如何让矢量瓦片配图神器maputnik支持geoserver,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
一直想搞一个类似百度,高德地图那样的矢量地图配图工具
百度个性化地图配图工具:
高德自定义地图配图工具:
在网上找过几次,都没有找到。
无意中从这个博客了解到了maputnik,一阵摆弄后,感觉相见恨晚。对!就是我要找的东西。
maputnik是啥?有啥用?
maputnik是Mapbox样式规范的开源可视化编辑器,它和Mapbox的Mapbox工作室,百度地图的个性化地图编辑器,高德地图的自定义地图编辑器干的是一个事,都是用来编辑矢量瓦片地图样式,配图用的。
有了maputnik就可以这样来发布地图,
用geoserver发布矢量瓦片
<李>用maputnik为上面的矢量瓦片配置地图样式
<李>用Mapbox调用矢量瓦片,并应用上面的地图样式,在前台渲染地图展示
和Mapbox工作室相比,maputnik开源,可以免费在本地使用,不再需要把自己的地图数据上传到Mapbox的服务器,相应的也就不用受制于Mapbox免费账号对每月上传数据量的限制,和对地图调用次数的限制。
maputnik官网:https://maputnik.github。io/
Maputnik github地址:https://github.com/maputnik/editor
Maputnik官方在线体验地址:https://maputnik.github。io/编辑/
Maputnik的创建背景,作者是想打造一套对标mapbox的开源GIS解决方案。
遇到的问题
用Maputnik1.7.0版本加载geoserver发布的矢量瓦片时遇到一个问题,加载的图层不显示,这个问题困扰了自己好几天,去网上百度,谷歌,相关的资料也非常少,没有答案。
自己好不容易遇到的兵器,难道就要这样擦肩而过吗?不,我不允许!
功夫不负有心人,经过几天的折腾,终于让我发现了其中的问题,下面详细说一下。
排查问题
发现地图没显示,就习惯性的打开了浏览器的开发者工具,发现缩放,拖动地图时,浏览器去请求了瓦片,但都没有成功。
拷贝其中一个请求地址,在浏览器单独打开,看到geoserver返回的报错提示是,请求的瓦片超出了数据范围。
Maputnik地图的api使用的是mapboxgl,那直接用mapboxgl调用一下发布的矢量瓦片,或许能更容易排查问题。网上介绍mapboxgl调用geoserver矢量瓦片的文章还是挺多的,自己参考着写了个示例。运行示例,结果瓦片可以正确请求到并显示。
代码:
var map =, new mapboxgl.Map ({ 容器:& # 39;地图# 39; 风格:& # 39;mapbox://风格/mapbox light-v10& # 39;, 变焦:3, 中心:[108.34942054748535,37.83543237333567] }); map.on(& # 39;负载# 39;,,()函数,{ map.addLayer ({ “id":,“mapillary" “type":,“line" “source": { “type":,“vector" & # 39;计划# 39;:& # 39;经颅磁刺激# 39; “tiles":,“http://192.168.50.198:7000 geoserver/gwc/服务/tms/1.0.0/中国% 3 acity_region@epsg % 3 a900913@pbf/{z}/{x}/{y} .pbf"], }, “source-layer":,“city_region" “paint": { “line-opacity": 0.6, “line-color":“rgb(53岁,175年,109年)“, “line-width": 2 } },,& # 39;waterway-label& # 39;); });效果:
这就有点意思了,看来还是maputnik的调用配置出现了问题。打开浏览器开发者工具,发现示例请求的瓦片地址中的编的号,要比maputnik中的编号大很多。
如何让矢量瓦片配图神器maputnik支持geoserver
