flex 做网站,求2021没封的良心网站,邯郸做网站公司哪家好,宁波网站建设优化企业1.背景
最近在做天地图的项目#xff0c;要基于MapBox添加CGCS2000矢量切片数据#xff0c;但是 Mapbox 只支持web 墨卡托#xff08;3857#xff09;坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码#xff0c;支持CGCS2000的切片数据加载#xff0c;并且修改…1.背景
最近在做天地图的项目要基于MapBox添加CGCS2000矢量切片数据但是 Mapbox 只支持web 墨卡托3857坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码支持CGCS2000的切片数据加载并且修改了相关的mapbox-gl的配套代码详情请见github网址。https://github.com/cgcs2000
2.将MapBox部署到本地
npm i cgcs2000/mapbox-gl!DOCTYPE html
htmlheadmeta charsetutf-8 /titleMapbox加载天地图CGCS2000矢量瓦片地图服务/titlemeta nameviewport contentinitial-scale1,maximum-scale1,user-scalableno /stylebody {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}/style
/headbodydiv idmap/div
/body
script typemodule
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投影坐标系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%3AcountyEPSG%3A4490pbf/{z}/{x}/{y}.pbf], //GeoServer发布的矢量切片地图zoomOffset: -1});//配置矢量切片图层样式map.addLayer({id: custom-go-vector-tile-layer,type: circle, // 符号化样式 [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
/html3.GeoServer发布CGCS2000的矢量瓦片服务
1.安装过程自行百度Tomcat下面部署Geoserver可能会遇到跨域访问问题。将geoserver部署到tomcat之后打开tomcat下webapps\geoserver\WEB-INF目录下的web.xml文件添加一下内容重启tomcat即可。 filterfilter-nameCORS/filter-name filter-classcom.thetransactioncompany.cors.CORSFilter/filter-classinit-param param-namecors.tagRequests/param-name param-valuetrue/param-value /init-param/filterfilter-mapping filter-nameCORS/filter-name url-pattern/*/url-pattern /filter-mapping2.发布矢量瓦片服务 GeoServer默认只有84的坐标系我们需要自己定义CGCS2000的坐标系。 首先点击Tile Caching下的Gridsets创建一个新的坐标系 在框选的地方搜索4490选择为CGCS2000坐标系其他数据按图填写279,541,132.0143589级别自定义。 设置完成后在矢量切片设置页将新设置坐标系添加进来 在TMS页就可以看到服务地址
4.效果展示
