5. 测试并优化地图显示效果 启动你的Vue项目,并查看地图是否正确显示。 根据需要调整地图样式、图层顺序和属性,以优化显示效果。 通过以上步骤,你就可以在Vue项目中使用Mapbox GL JS调用GeoServer提供的离线地图了。
四、服务调用(mapbox-gl) 获取服务请求地址。 图4-1获取服务地址(1) 图4-2获取服务地址(2) 这里拷贝的是srs=EPSG:900913对应的地址,在调用服务是的服务完整地址是http://10.100.214.222:8085/geoserver/gwc/service/tms/1.0.0/myTest%3Asz_build@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf,后面需要加上z、...
为了方便, 使用 vue-cli 快速生成一个项目,并安装 mapbox-gl: 1 yarn add mapbox-gl 首先需要获得 GeoServer 部署的 tile 的地址,在 GeoServer 首页中,可以看到 tms 服务,点之后,可以看到一个 xml 页面: 1 1 http://localhost:8080/geoserver/gwc/service/tms/1.0.0/beijing_test%3Abeijing_shp@EPSG%3A9...
mapboxgl加载geoserver发布的tms矢量图层服务 // 添加源g.map.addSource('tms-source', {type:'vector',scheme:'tms',tiles: ['http://localhost:9090/geoserver/gwc/service/tms/1.0.0/route:global_port@EPSG:900913@pbf/{z}/{x}/{y}.pbf'],minzoom:0,maxzoom:18});// 样式g.map.addLayer({id...
一、使用geoserver发布矢量瓦片服务 上一篇文章已经介绍了如何使用geoserver发布矢量瓦片服务(数据源使用的是wgs84坐标),前端使用mapbox-gl来绘制矢量瓦片服务。在这次测试实验中,我发布了包括建筑、路网、湖泊水系,公交站点等七个图层,并将这七个图层放在一个图层组里面。
'http://<YOUR GEOSERVER ADDRESS>:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&...
mapboxgl加载geoserver发布的tms矢量图层服务 // 添加源 g.map.addSource('tms-source', { type: 'vector', scheme:'tms', tiles: [ 'http://localhost:9090/geoserver/gwc/service/tms/1.0.0/route:global_port@EPSG:900913@pbf/{z}/{x}/{y}.pbf' ...
使用chrome浏览器进行调试,我们可以看到在网页上加载出来的卫星地图,我们继续研究这个例子代码,可以发现mapbox_gl用到的JS和CSS文件我们可以直接拉下来保存到本地即可,于是我们在调试的网页中按F12选择source栏目,在mapbox资源站点下载过来的文件中找到了JS和CSS文件,先保存到本地电脑上。我们继续观察这个Helloworld代码,...
GIS的底图一直使用金字塔技术进行切图，使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张...
而开源得服务器GeoServer目前也是刚刚支持矢量瓦片服务不久,在使用方面还是有一些bug和其它问题,后续可能会调整好,就目前来讲不推荐使用GeoServer。 自己开发可以按需开发,但是成本和对开发人员要求比较高。 静态资源服务器这种方式应该很多人都不会陌生,在之前的所有普通瓦片服务器其实很多就是静态资源服务器,我们只需要将...