1.背景
最近在做天地圖的項(xiàng)目，要基于MapBox添加CGCS2000矢量切片數(shù)據(jù)，但是 Mapbox 只支持web 墨卡托（3857）坐標(biāo)系的數(shù)據(jù)。Github有專業(yè)用戶修改了mapbox-gl的相關(guān)代碼，支持CGCS2000的切片數(shù)據(jù)加載，并且修改了相關(guān)的mapbox-gl的配套代碼，詳情請(qǐng)見github網(wǎng)址。https://github.com/cgcs2000
2.將MapBox部署到本地
npm i @cgcs2000/mapbox-gl
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Mapbox加載天地圖CGCS2000矢量瓦片地圖服務(wù)</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
<script type="module">
import '@cgcs2000/mapbox-gl/dist/mapbox-gl.css'
import mapboxgl from '@cgcs2000/mapbox-gl';
mapboxgl.accessToken = 'YourToken';
//添加天地圖
var mapStyle =
{
"version": 8,
"name": "Map",
"sources": {
"world-vec": {
"type": "raster",
"tiles": [
"http://t0.tianditu.gov.cn/vec_c/wmts?tk=......"
],
"scheme": "xyz",
"maxzoom": 9,
"tileSize": 256
},
"layers": [
{
"id": "world-vec",
"source": "world-vec",
"type": "raster",
"layout": {
"visibility": "visible"
}
},
],
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"transition": {
"duration": 300,
"delay": 0
}
}
var map = new mapboxgl.Map({
container: 'map',
zoom: 7,
center: [118.8, 36.3],
style: mapStyle,
});
/**CGCS2000投影坐標(biāo)系（4490）**/
map.on('load', function loaded() {
//添加geoserver矢量切片
map.addSource('custom-go-vector-tile-source', {
type: 'vector',
scheme: 'tms',
tiles: ['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/MyWork%3Acounty@EPSG%3A4490@pbf/{z}/{x}/{y}.pbf'], //GeoServer發(fā)布的矢量切片地圖
zoomOffset: -1
});
//配置矢量切片圖層樣式
map.addLayer({
"id": "custom-go-vector-tile-layer",
"type": "circle", // 符號(hào)化樣式 [fill,line,symbol,circle,heatmap]
"source": "custom-go-vector-tile-source",
"source-layer": "county", //添加矢量圖層名
"minzoom": 5,
"maxzoom": 13,
paint: {
'circle-radius': 1,
'circle-color': "#000000",
'circle-opacity': 0.8
}
});
});
</script>
</html>
3.GeoServer發(fā)布CGCS2000的矢量瓦片服務(wù)
1.安裝過程自行百度，Tomcat下面部署Geoserver可能會(huì)遇到跨域訪問問題。將geoserver部署到tomcat之后，打開tomcat下webapps\geoserver\WEB-INF目錄下的web.xml文件，添加一下內(nèi)容，重啟tomcat即可。
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.tagRequests</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
2.發(fā)布矢量瓦片服務(wù)
GeoServer默認(rèn)只有84的坐標(biāo)系，我們需要自己定義CGCS2000的坐標(biāo)系。
首先，點(diǎn)擊Tile Caching下的Gridsets，創(chuàng)建一個(gè)新的坐標(biāo)系
在框選的地方搜索4490，選擇為CGCS2000坐標(biāo)系，其他數(shù)據(jù)按圖填寫（279,541,132.0143589），級(jí)別自定義。
設(shè)置完成后在矢量切片設(shè)置頁，將新設(shè)置坐標(biāo)系添加進(jìn)來
在TMS頁就可以看到服務(wù)地址
文章來源：http://www.zghlxwxcb.cn/news/detail-641424.html
4.效果展示
文章來源地址http://www.zghlxwxcb.cn/news/detail-641424.html
到了這里，關(guān)于Mapbox加載天地圖CGCS2000矢量瓦片地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
