代码编织梦想

mapboxgl可以调用mapbox公司自己的地图,那么如果我们需要发布自己的矢量瓦片,有几种方法

1.使用商业GIS软件,如国产的超图支持MVT发布

2.使用开源的GIS服务软件,比如geoserver

实现方法:

geoserver的新版本,2.14.1已经集成了mbtiles,老版本需要下载plugin才行

在geoserver中发布矢量地图,创建自己的layergroup,在图层组的设置页面,点Tile caching 标签

在Tile Image Formats中勾选  application/x-protobuf;type=mapbox-vector

以上在geoserver中发布mbtiles完成

 

以下是调用的方法

需要掌握mapboxgl中 sprite(字体库)、glyphs的概念

需要掌握mapboxgl中styles的设置

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>矢量瓦片</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            position: relative;
        }


    </style>


    <script src='../../libs/mapbox-gl-js/mapbox-gl.js'></script>
    <link href='../../libs/mapbox-gl-js/mapbox-gl.css' rel='stylesheet' />
    <script src='../js/jquery.min.js'></script>
</head>                                 

    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
        <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
        <script>

            var map, threeLayer, position = [104.07898, 30.66147];

            mapboxgl.accessToken = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';



            var simple = {
                "version": 8,
                "sprite":"http://" + window.location.host +"/examples/data/mbstyle/ArcTilerWeb/sprites/sprite",
                "glyphs": "http://" + window.location.host + "/examples/data/mbstyle/ArcTilerWeb/fonts/{fontstack}/{range}.pbf",
                "sources": {
                    "composite": {
                        "url": "mapbox://mapbox.mapbox-terrain-v2",
                        "type": "vector"
                    },
                    "esri": {
                        "type": "vector",
                        "scheme": "tms",
                        "tiles": [
                            "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/KylinWS:TestSC@EPSG:900913@pbf/{z}/{x}/{y}.pbf"
                        ]
                    },
                },
                "layers":
                     [
        {
            "id": "cityregion",
            "type": "fill",
            "source": "esri",
            "source-layer": "cityregion",
            "layout": {},
            "paint": {
                "fill-color": "#D4CDBC"
            }
        },
        {
            "id": "ShuiXiPolygon",
            "type": "fill",
            "source": "esri",
            "source-layer": "ShuiXiPolygon",
            "layout": {},
            "paint": {
                "fill-color": "#73B2FF"
            }
        },
        {
            "id": "XianDao/1",
            "type": "line",
            "source": "esri",
            "source-layer": "XianDao",
            "minzoom": 8.58,
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#B9B7B9",
                "line-width": 4.13333
            }
        },
        {
            "id": "XianDao/0",
            "type": "line",
            "source": "esri",
            "source-layer": "XianDao",
            "minzoom": 8.58,
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#FFFFFF",
                "line-width": 2.13333
            }
        },
        {
            "id": "ShengDao/1",
            "type": "line",
            "source": "esri",
            "source-layer": "ShengDao",
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#D4C9B4",
                "line-width": 4.66667
            }
        },
        {
            "id": "ShengDao/0",
            "type": "line",
            "source": "esri",
            "source-layer": "ShengDao",
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#FFF9CC",
                "line-width": 2.66667
            }
        },
        {
            "id": "GuoDao/1",
            "type": "line",
            "source": "esri",
            "source-layer": "GuoDao",
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#E68C65",
                "line-width": 5.06667
            }
        },
        {
            "id": "GuoDao/0",
            "type": "line",
            "source": "esri",
            "source-layer": "GuoDao",
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#FFE6CF",
                "line-width": 3.06667
            }
        },
        {
            "id": "gaosu/1",
            "type": "line",
            "source": "esri",
            "source-layer": "gaosu",
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#B35933",
                "line-width": 5.6
            }
        },
        {
            "id": "gaosu/0",
            "type": "line",
            "source": "esri",
            "source-layer": "gaosu",
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#E69973",
                "line-width": 4
            }
        },
        {
            "id": "TieLu/1",
            "type": "line",
            "source": "esri",
            "source-layer": "TieLu",
            "layout": {
                "line-join": "round"
            },
            "paint": {
                "line-color": "#BFB8AA",
                "line-width": 1.88973
            }
        },
        {
            "id": "TieLu/0",
            "type": "line",
            "source": "esri",
            "source-layer": "TieLu",
            "layout": {
                "line-join": "round"
            },
            "paint": {
                "line-color": "#E6E6E6",
                "line-width": 0.755867,
                "line-dasharray": [
                    10.5839,
                    12.3479
                ]
            }
        },
        {
            "id": "GuoDao/label/Class 1",
            "type": "symbol",
            "source": "esri",
            "source-layer": "GuoDao",
            "minzoom": 9.87,
            "layout": {
                "symbol-placement": "line",
                "text-font": [
                    "Microsoft YaHei Regular"
                ],
                "text-size": 13.3333,
                "text-max-width": 8,
                "text-field": "{PathName}",
                "text-optional": true
            },
            "paint": {
                "text-color": "#000000"
            }
        },
        {
            "id": "gaosu/label/Class 1",
            "type": "symbol",
            "source": "esri",
            "source-layer": "gaosu",
            "layout": {
                "symbol-placement": "line",
                "text-font": [
                    "Microsoft YaHei Regular"
                ],
                "text-size": 13.3333,
                "text-max-width": 8,
                "text-field": "{PathName}",
                "text-optional": true
            },
            "paint": {
                "text-color": "#000000"
            }
        },
        {
            "id": "citypoint",
            "type": "symbol",
            "source": "esri",
            "source-layer": "citypoint",
            "layout": {
                "icon-image": "citypoint",
                "icon-allow-overlap": true,
                "text-font": [
                    "Microsoft YaHei Regular"
                ],
                "text-size": 13.3333,
                "text-anchor": "bottom",
                "text-max-width": 8,
                "text-field": "{Name}",
                "text-optional": true
            },
            "paint": {
                "text-color": "#000000",
                "text-halo-color": "#E1E1E1",
                "text-halo-width": 1.33333
            }
        },
        {
            "id": "XianPoint",
            "type": "symbol",
            "source": "esri",
            "source-layer": "XianPoint",
            "minzoom": 7.94,
            "layout": {
                "icon-image": "XianPoint",
                "icon-allow-overlap": true,
                "text-font": [
                    "Microsoft YaHei Regular"
                ],
                "text-size": 13.3333,
                "text-anchor": "center",
                "text-max-width": 8,
                "text-field": "{Name}",
                "text-optional": true
            },
            "paint": {
                "text-color": "#000000"
            }
        },
        {
            "id": "XianZhen",
            "type": "symbol",
            "source": "esri",
            "source-layer": "XianZhen",
            "minzoom": 9.98,
            "layout": {
                "icon-image": "XianZhen",
                "icon-allow-overlap": true,
                "text-font": [
                    "Microsoft YaHei Regular"
                ],
                "text-size": 13.3333,
                "text-anchor": "bottom",
                "text-max-width": 8,
                "text-field": "{Name}",
                "text-optional": true
            },
            "paint": {
                "text-color": "#000000"
            }
        }
                     ]

                    
            }

            var map = new mapboxgl.Map({
                container: 'map',
                style: simple,
                zoom: 8,
                center: [104.07898, 30.66147]
            });

            map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        </script>
    </body>
</html>

效果

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GIS_Lyn/article/details/84746523

稍微整理一下geoserver配置style的几种样式-爱代码爱编程

    首先,配置geoserver图层样式,可以手写sld文件,或者通过一些工具辅助(QGIS或者udig都可以)。      第二,能够稍微阅读一下http://docs.geoserver.org/2.5.x/en/user/styling/index.html这里面的api。 未完待续,明天提供事例 事例1 图层介绍:  事例

利用geoserver发布矢量切片,mapbox进行调用_啊哈hl的博客-爱代码爱编程

1、新建工作区 2、添加数据存储,选择矢量数据源下的文件夹方式,注意字符集编码。点击确定提交之后会出现该文件下的所有shpfile的图层发布界面。 3、或者选择左边的图层菜单,新建图层,选择工作区,进行图层进行发布。 4、设置图层的经纬度范围 5、切换到Tile Caching页面,设置发布切片的格式,矢量切片包括geojs

【qt】qt的学习:qt中显示地图_ipfpm的博客-爱代码爱编程_qt 地图

(一)使用html的方式(QWidget):    (1)QT通过加载html的形式显示地图 mainMapView = new QWebEngineView(this); mainMapView->load(QUrl("qrc:/files/resource/file/mainMapView.html")); mainMa

0622_arcmap添加地图地图(矢量底图与影像地图)_太乐地图插件arctailer.tlb_刘彩虹的博客-爱代码爱编程_arcmap怎么导入地图

AIM: 在Arcmap中添加遥感影像底图,并进行矢量面的绘制; 添加方法 · 使用太乐地图ArcGIS插件 下载地址:太乐地图ArcGIS插件安装使用与卸载教程:安装使用卸载教程(有垃圾软件顺带,慎用)太乐地图

发布自己的mapbox矢量地图_swagzs的博客-爱代码爱编程_mapbox导出矢量图

一、前言 mapbox 作为一款开源的地图开发平台,优势兼具百度、高德等互联网地图平台和Arcgis、Supermap 等企业级地图平台的特点,是很多企业作为地图项目开发的基础平台,这里根据实际的工作经验,来谈一谈如何发布自己的mapbox矢量地图。并通过mapbox.js调用进行下一步的开发。 二、整体流程 发布mapbox 需要很多第三方的软件平台依

mapboxgl 点击矢量高亮显示-爱代码爱编程

高亮显示有两种方式 一、通过首次加载的时候 将高亮渲染出来后通过点击获取到他的id 控制现实隐藏 https://blog.csdn.net/qq_33460928/article/details/100566632  参考了这个文章 要求,点击乡镇的模块的数据让他的边界变成蓝色的,我们这里用了filter 1、初始化加载矢量图层 let i

js修改本地json文件_mapbox-gl本地化实践-爱代码爱编程

很多时候,我们不能将我们的数据托管到mapbox的在线服务。我们希望使用mapbox studio定制完地图样式后,将样式文件导出,然后将数据服务改成geoserver发布的矢量瓦片服务。实现这个目标,需要解决: 1、图标等静态资源的本地化。 2、字体文件本地化。 2、数据服务的本地化。 一、使用geoserver发布矢量瓦片服务 上一篇文章

geoserver 发布影像数据_矢量切片绘制(mapbox-gl+geoserver)-爱代码爱编程

自己在实践过程中的一些记录,如果有错误的地方,希望指出交流。 一、数据准备 苏州工业园区建筑地块数据(wgs84),数据中包含地块高度字段。 图1-1 苏州园区建筑地块数据 二、geoserver 安装 我在早之前安装过geoserver2.14.2版本和该版本对应的插件,使用该版本发布服务后遇到了pbf格式文件无法预览的

mapboxgl + geoserver 配置本地地图教程-爱代码爱编程

目录 零、准备阶段 一、JDK的安装 二、Tomcat的配置 三、geoserver的安装 四、利用geoserver发布shapefile数据 五、查看我们发布的数据 六、离线地图的部署 七、效果展示   零、准备阶段 环境需求:JDK1.8           apache-tomcat-7.0.88           ge

【GeoServer + MapBox-GL 搭建离线矢量切片地图服务】多图详细流程 + 踩过的坑总结-爱代码爱编程

文章目录 前言Geoserver 安装前期工作JDK的安装安装 GeoServerGeoServer 的使用进入 GeoServer 界面使用 GeoServer 发布矢量切片离线地图使用 Mapbox-GL 调用离线矢量切片地图【踩坑总结】【踩到的第一个坑】跨域问题—报错:有CORS的错误提示【踩到的第二个坑】无法预览Pbf 前言 我们实验

基于geoserver开发的地理场景可视化系统_不爱赖床的懒虫的博客-爱代码爱编程

基于GeoServer的地理场景可视化系统 文章目录 基于GeoServer的地理场景可视化系统系统总体架构设计二维地理场景可视化设计与实现图层预览模块图层组切换模块WMS服务模块三维地理场景可视化设计与实现基于Cesium的三维地形仿真二、三维联动模块 系统总体架构设计 总体框架主要分为地图服务器管理模块和地理场景可视化模块这两个部分。地

mapboxgl系列(一)基础知识介绍_mapbox-爱代码爱编程

MapboxGL基础知识介绍 文章目录 MapboxGL基础知识介绍前言一、Mapbox是什么?二、Mapbox常用服务工具介绍1.mapboxgl.js2.mapbox studio3.tippecan