如何让矢量瓦片配图神器maputnik支持 geoserver
关键词:maputnik、geoserver、矢量地图、矢量瓦片、mapbox、mapboxgl、地图配图、地图配色
一直想搞一个类似百度、高德地图那样的矢量地图配图工具
百度个性化地图配图工具:
高德自定义地图配图工具:
在网上找过几次,都没有找到。
无意中从这个博客了解到了Maputnik,一阵摆弄后,感觉相见恨晚。对!就是我要找的东西。
Maputnik是啥?有啥用?
Maputnik是Mapbox样式规范的开源可视化编辑器,它和Mapbox的mapbox studio、百度地图的个性化地图编辑器、高德地图的自定义地图编辑器干的是一个事,都是用来编辑矢量瓦片地图样式,配图用的。
有了Maputnik就可以这样来发布地图,
- 用geoserver发布矢量瓦片
- 用Maputnik为上面的矢量瓦片配置地图样式
- 用mapbox调用矢量瓦片,并应用上面的地图样式,在前台渲染地图展示
和 mapbox studio 相比,Maputnik开源,可以免费在本地使用,不再需要把自己的地图数据上传到mapbox的服务器,相应的也就不用受制于mapbox免费账号对每月上传数据量的限制,和对地图调用次数的限制。
maputnik 官网:https://maputnik.github.io/
Maputnik github地址:https://github.com/maputnik/editor
Maputnik 官方在线体验地址:https://maputnik.github.io/editor/
Maputnik的创建背景,作者是想打造一套对标 mapbox 的开源GIS解决方案。
遇到的问题
用Maputnik1.7.0版本加载geoserver发布的矢量瓦片时遇到一个问题,加载的图层不显示,这个问题困扰了自己好几天,去网上百度、谷歌,相关的资料也非常少,没有答案。
自己好不容易遇到的兵器,难道就要这样擦肩而过吗?不,我不允许!
功夫不负有心人,经过几天的折腾,终于让我发现了其中的问题,下面详细说一下。
排查问题
发现地图没显示,就习惯性的打开了浏览器的开发者工具,发现缩放、拖动地图时,浏览器去请求了瓦片,但都没有成功。
拷贝其中一个请求地址,在浏览器单独打开,看到geoserver返回的报错提示是,请求的瓦片超出了数据范围。
Maputnik地图的api使用的是mapboxgl,那直接用mapboxgl调用一下发布的矢量瓦片,或许能更容易排查问题。网上介绍mapboxgl调用geoserver矢量瓦片的文章还是挺多的,自己参考着写了个示例。运行示例,结果瓦片可以正确请求到并显示。
代码:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 3,
center: [108.34942054748535,37.83543237333567]
});
map.on('load', function() {
map.addLayer({
"id": "mapillary",
"type": "line",
"source": {
"type": "vector",
'scheme':'tms',
"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
},
"source-layer": "city_region",
"paint": {
"line-opacity": 0.6,
"line-color": "rgb(53, 175, 109)",
"line-width": 2
}
}, 'waterway-label');
});
效果:
这就有点意思了,看来还是Maputnik的调用配置出现了问题。打开浏览器开发者工具,发现示例请求的瓦片地址中的编号,要比maputnik中的编号大很多。
在maputnik中拖动地图。找到和示例中相同的瓦片编号,发现地图跑到了南半球。
这会是什么原因造成的呢,会不会是请求瓦片的大小不同,比如一个是256x256的,一个是512x512的,通常这种情况也会导致出现上面的问题,而且编号会刚好相差一半。
但现在的编号差的好像并不是一半,那geoserver发布的矢量瓦片到底是多少呢?Maputnik中又是按照什么规则来请求的呢?抱着这个疑问,我决定去研究一下mapboxgl的api,看会不会有什么发现。
上面示例的代码中,数据源是通过source来配置的
"source": {
"type": "vector",
'scheme':'tms',
"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
},
这里面有三个参数,type
和tiles
的意思好理解,scheme
是什么意思呢?
查看mapboxgl的api,关于scheme的解释如下:
这个 xyz
和tms
分别是啥意思呢?
百度后觉得这篇博客写的还算明白,它们是两种请求瓦片的协议,不同协议对瓦片编号的规则也不同,在xyz
协议中,Y从顶部开始计算,而在tms
协议中,Y从底部开始计算。mapboxgl默认使用xyz
协议,而geoserver发布的是tms
协议。所以调用时需要定义scheme
为tms
。
问题找到这里,感觉自己已经看到黎明的曙光了。
那如果把示例中的scheme
设置为xyz
会不会出现和Maputnik一样的错误呢?尝试后答案是肯定的,地图同样跑到了南半球。
真相大白了,Maputnik界面上因为没有配置scheme
的选项,而scheme
默认是xyz
协议,所以就导致它只支持xyz
协议,不支持tms
协议,所以就请求不到瓦片,地图无法正确显示。
如何解决
问题找到了,接下来就是如何解决,思路有二:
- geoserver发布一个
xyz
协议的矢量瓦片服务。 - 修改一下Maputnik的源码,增加
scheme
的选项,让它支持tms
协议。
思路一自己找了一圈,没有发现相关教程,个人感觉思路二更简单一些,只要在下图的红框的位置加个选择scheme
的下拉框就能解决问题
下载maputnik的源码,一通研究,发现修改下面两个位置就可以:
1、在这里加一个下拉框控件
2、在这里给scheme
设置一下默认值
ok,来,走两步
一步
两步
哈哈,效果杠杠的!问题完美解决。
总结
Maputnik是一个矢量瓦片配图工具,可以替代 mapbox studio,免费使用。
Maputnik默认只支持xyz协议的矢量瓦片,不支持geoserver发布的tms协议矢量瓦片。
Maputnik的地图api使用的是mapboxgl,mapboxgl通过设置source的scheme选项,可以支持tms协议。
通过修改Maputnik源码,增加scheme选项,就可以让Maputnik支持geoserver发布的tms协议矢量瓦片。
源码
原文地址:http://gisarmory.xyz/blog/index.html?blog=maputnikGeoserverVectorTiles
关注《GIS兵器库》公众号, 第一时间获得更多高质量GIS文章。
本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名《GIS兵器库》(包含链接: http://gisarmory.xyz/blog/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。
如何让矢量瓦片配图神器maputnik支持 geoserver的更多相关文章
- geotrellis使用(三十四)矢量瓦片技术研究——矢栅一体化
前言 本文所涉及技术与Geotrellis并无太大关系,仅是矢量瓦片前端渲染和加载技术,但是其实我这是在为Geotrellis的矢量瓦片做铺垫.很多人可能会说,Geotrellis为什么要搞矢量瓦片, ...
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- Mapbox矢量瓦片标准(mapbox vector-tile-spec)
目录 1. 目标 2. 文件格式 2.1. 文件后缀 2.2 MIME类型 3. 投影和范围 4. 内部结构 4.1. 图层 4.2. 要素 4.3. 几何图形编码 4.4. 要素属性 4.5. 示例 ...
- 发布 mbtiles 存储的矢量瓦片
之前我们分享过如何 在本地发布OSM矢量瓦片地图,里面介绍了生成的矢量瓦片会存放在 .mbtiles 文件中,然后用 tileserver-gl 软件发布. mbtiles 是基于sqllite数据库 ...
- CAD/DWG图Web网页可视化技术之栅格和矢量瓦片
背景 在上一篇博文中CAD图DWG解析WebGIS可视化技术分析总结提到,实现CAD/DWG图形Web展示的思路一般为解析AutoCAD图形格式,然后转成html5所能绘制的格式如svg,geojso ...
- geoserver矢量瓦片发服务前端展示偏移问题解决
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 在之前的<项目角度谈矢量切片运用以及Geoserver处理自定义 ...
- cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...
- openlayers6结合geoserver实现地图矢量瓦片(附源码下载)
内容概览 1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载 效果图如下: 实现思路:利用Geoserver发布矢量切片服务,然后openlayers调用矢量瓦 ...
- GeoServer中利用SLD配图之矢量图层配图
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1 背景 我们在ArcMap中可以直接通过symbol功能对图层进行定 ...
随机推荐
- linux 文件类型和权限
linux 文件类型和权限 ls -l 显示: [user@wyf-201 ~]$ ll total 0 -rw-rw-r--. 1 user user 0 Aug 27 10:49 1.txt dr ...
- Java中nextInt和nextLine同时使用出现的问题
代码: package com.ins1; import java.util.*; public class test { public static void main(String[] args) ...
- 如何让SpringBoot工程在log/控制台中实时打印MyBatis执行的SQL语句
工程下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200429-4.zip 其实就是一句话设置的事情,实现步骤: 在applica ...
- 深入理解Go系列一之指针变量
指针变量 基本概念 &a,代表 a 变量的内存地址 p,代表一个句柄引用(句柄由实例数据指针与实例类型指针两部分组成) ,句柄的好处是,当实例数据值改变时,不需要改动实例数据指针与实例类型指针 ...
- python实例基础(慢慢补充)
1.有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 2.打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立 ...
- oracle之通过group by产生统计报告
通过group by产生统计报告 Oracle数据库中的ROLLUP配合group by命令使用,可以提供信息汇总功能(与"小计"相似)CUBE,也是GROUP BY子句的一种扩展 ...
- oracle之复杂查询之一:多表连接技术
复杂查询之一:多表连接技术 7.1 简单查询的解析方法: 全表扫描:指针从第一条记录开始,依次逐行处理,直到最后一条记录结束: 横向选择+纵向投影=结果集 7.2 多表连接 交叉连接(笛卡尔积) 非等 ...
- vue父子组件状态同步的最佳方式续章(v-model篇)
大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...
- JVM-垃圾回收篇
目录 JVM-垃圾回收篇 前言 举个例子 JVM 有哪些垃圾回收算法? 标记-清除算法 复制算法 标记-整理算法 分代收集算法 JVM 有哪些垃圾回收器? 概述 几个相关概念 一:Serial 收集器 ...
- day52:django:ORM单表/多表操作
目录 1.ORM 2.ORM单表增删改查 13个必知必会的查询接口 filter基于双下划线的模糊查询 3.ORM多表增删改查 ORM 什么是ORM? ORM(object relational ma ...