安装GeoServer

使用Geoserver： geoserver-2.15.0.exe版本和对应的vector tiles 插件
参考：GeoServer+Mapbox

配置Geoserver 数据

Data_dir中的美国各个州的shp作为数据源

跨域问题：

跨域使用 jetty的两个jar文件： jetty-servlets-9.4.9.v20180320.jar jetty-util-9.4.9.v20180320.jar

设置web.xml

          <filter><filter-name>cross-origin</filter-name><filter-class>org.mortbay.servlets.CrossOriginFilter</filter-class><init-param><param-name>allowedOrigins</param-name><param-value>*</param-value></init-param><init-param><param-name>allowedMethods</param-name><param-value>GET,POST</param-value></init-param><init-param><param-name>allowedHeaders</param-name><param-value>x-requested-with,content-type</param-value></init-param></filter>

以及

        <filter-mapping><filter-name>cross-origin</filter-name><url-pattern>/*</url-pattern></filter-mapping>

参考：GeoServer跨域设置

编写mapbox 网页

        <!DOCTYPE html><html><head><meta charset='utf-8' /><title>Join local JSON data with vector tile geometries</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><!-- <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script> --><!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' /> --><script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' /><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }</style></head><body><div id='map'></div><script>mapboxgl.accessToken ='pk.eyJ1IjoibG9uZ2xvbmd3YXl0b2dvIiwiYSI6ImNqdnZ6OWV6cTFnY240NG9nbmxnc2k5dTkifQ.hsbNl4QUNyn46nfbztiFpw';var map = new mapboxgl.Map({container: 'map', style: 'mapbox://styles/mapbox/streets-v9', center: [-99.637496,38.719526], zoom: 4});map.on('load', function() {map.addSource('usa_states',{'type':'vector','scheme':'tms',// 'tiles':['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myTest%3AbigBuildings@EPSG:900913@pbf/{z}/{x}/{y}.pbf']'tiles':['http://192.168.1.230:8080/geoserver/gwc/service/tms/1.0.0/mapbox%3Astates@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf']});map.addLayer({'id':'states','type':'fill','source':'usa_states','source-layer':'states','paint':{'fill-color':'#00ff00',}},'waterway-label');});</script></body></html>

预览

其他参考：

Publishing a GeoServer Layer for use with Mapbox Styles

GeoServer+mapbox发布矢量瓦片(一）：创建美国区域显示相关推荐

ArcGIS API for JavaScript 4.x加载Mapbox在线矢量瓦片服务（weixin公众号【图说GIS】）
前言大家都知道,Mapbox在矢量瓦片这个领域做的很好.那么如何使用ArcGIS API 4.x加载,经过研究,将解决方案总结如下. 分析问题查询ArcGIS JS API // Typical ...
mapbox pbf矢量瓦片读取(附pbf瓦片文件qt可视化工具源码)
矢量瓦片官方文档:https://docs.mapbox.com/vector-tiles/specification/ 读取pbf 简易demo地址:https://github.com/tlglo ...
Mapbox加载天地图CGCS2000矢量瓦片地图服务
1.背景最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据.Github有专业用户修改了mapbox-gl的相 ...
高德地图 sdk 加载 geoserver 发布的瓦片地图服务
前言最近,碰到了需求,想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图. 还好经过一番研究,在其官方文档中发现,从新版本(v1.4.3开始)的高德 sdk 开始,已经支持加载第三 ...
php矢量瓦片,矢量瓦片 - SegmentFault 思否
Geoserver发布矢量瓦片 geoserver矢量图片发布为mapbox gl style 示例:(注意投影必须是900913){ "version": 8, "na ...
关于MVT矢量瓦片，你不知道的事
作者:LX 其实博主已经在前面的系列文章中介绍了矢量瓦片,比如 <创建矢量瓦片之制图最佳实践>介绍了制作瓦片的注意事项: <SuperMap地图系列:矢量瓦片的应用>介绍了矢量 ...
Web端MVT矢量瓦片加载之OpenLayers篇
作者:LX 前言 MVT全称是Mapbox Vector Tile,是Mapbox标准的矢量切片.矢量瓦片具有创建效率高.传输和渲染速度快.数据和风格样式独立,更改配图方案无需重新创建瓦片.高显示质量 ...
移动端加载MVT矢量瓦片
在SuperMap iMobile for Android 9D(2019)版本中,新增了加载MVT矢量瓦片的接口.矢量瓦片具有创建效率高.传输和渲染速度快.数据和风格样式独立,更改配图方案无需重新创 ...
Mapbox、GeoServer离线部署矢量地图
Mapbox.GeoServer离线部署矢量地图关键词:Mapbox.GeoServer.Tomcat.PostgreSQL.PostGis 一.地图数据获取使用OpenStreetMap获取中国 ...

GeoServer+mapbox发布矢量瓦片(一）：创建美国区域显示

安装GeoServer

配置Geoserver 数据

跨域问题：

编写mapbox 网页

预览

其他参考：

GeoServer+mapbox发布矢量瓦片(一）：创建美国区域显示相关推荐

最新文章

热门文章