MapBox本地化加载GeoServer的wms,tms,矢量wmts,静态切片wmts四种格式

原创 已于 2024-10-21 17:40:38 修改 · 1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mapbox #geoserver

于 2024-10-21 17:35:48 首次发布

注意： 首先要破解mapbox才能加载本地化或者你们测试弄个token来也行

注意：EPSG:900913相当于3857坐标系  因为他们参数一致，mapbox目前只支持geoserver中的900913与3857坐标系

1.mapbox加载geoserver的wms格式

1.1mapbox加载wms的效果

该方法加载有点慢 提前跟你们声明一下

1.2mapbox加载wms的源码

<template>
    <div class="mapbox-maps">
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from './../../public/mapbox-gl.js'
import './../../public/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
//import MapboxLanguage  from '@mapbox/mapbox-gl-language'

// import mapboxgl from 'mapbox-gl'
// import 'mapbox-gl/dist/mapbox-gl.css'


export default {

    methods: {
        initMap() {
            // application/vnd.mapbox-vector-tile,GEoServer版本不同，这里可能不同，注意在GeoServer里查看
            //mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';

            var wmsUrl = "http://192.168.10.10:8080/geoserver/mymvt/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&format=image/png&TRANSPARENT=true&STYLES&LAYERS=mymvt:CSZTGH&exceptions=application/vnd.ogc.se_inimage&srs=EPSG:900913&WIDTH=768&HEIGHT=370&BBOX={bbox-epsg-3857}";

            var map = new mapboxgl.Map({
                container: 'map',
                style: {
                    "version": 8,
                    "name": "test-wms-style",
                    "sources": {
                        "osm-wms": {
                            'type': 'raster',
                            // 'scheme': 'tms',//TMS服务有此一行，默认xyz
                            'tiles': [
                                wmsUrl
                            ],
                            //"tileSize": 256
                        }
                    },
                    "layers": [{
                        "id": "wms-test-id",
                        "type": "raster",
                        "source": "osm-wms",
                        //"source-layer": "CSZTGH",
                        "paint": {
                            'raster-opacity': 1
                        }
                    }]
                },
                zoom: 12,
                center: [114.9, 27]
            });
        }
    },

    mounted() {
        this.initMap()
    }
}
</script>

<style lang="less">
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;

    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

        .mapboxgl-canvas {
            outline: none;
        }

        // 隐藏mapbox商标
        .mapboxgl-ctrl-logo {
            display: none;
        }
    }
}
</style>

2.mapbox加载geoserver的矢量wmts格式

2.1mapbox加载矢量wmts的效果

2.2mapbox加载矢量wmts的源码

<template>
    <div class="mapbox-maps">
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from './../../public/mapbox-gl.js'
import './../../public/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
//import MapboxLanguage  from '@mapbox/mapbox-gl-language'

// import mapboxgl from 'mapbox-gl'
// import 'mapbox-gl/dist/mapbox-gl.css'


export default {

    methods: {
        initMap() {
            // application/vnd.mapbox-vector-tile,GEoServer版本不同，这里可能不同，注意在GeoServer里查看
            //mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
            var vectorwmtsLayerUrl = "http://192.168.10.10:8080/geoserver/gwc/service/wmts?" +
                "REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=mymvt:CSZTGH" +
                "&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&" +
                "FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}";

            var map = new mapboxgl.Map({
                container: 'map',
                style: {
                    "version": 8,
                    "name": "test-wmts-pbf-style",
                    "sources": {
                        "osm-wmts-vec": {
                            'type': 'vector',
                            // 'scheme': 'tms',//TMS服务有此一行，默认xyz
                            'tiles': [
                                vectorwmtsLayerUrl
                            ],
                            //"tileSize": 256
                        }
                    },
                    "layers": [{
                        "id": "wmts-vec-id",
                        "type": "line",
                        "source": "osm-wmts-vec",
                        "source-layer": "CSZTGH",
                        "layout": {
                            "line-join": "round",
                            "line-cap": "round"
                        },
                        //样式
                        "paint": {
                            "line-color": "#E31asa",
                            "line-width": 1,
                            "line-opacity": 1
                        }

                    }]
                },
                zoom: 12,
                center: [114.9, 27]
            });
        }
    },

    mounted() {
        this.initMap()
    }
}
</script>

<style lang="less">
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;

    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

        .mapboxgl-canvas {
            outline: none;
        }

        // 隐藏mapbox商标
        .mapboxgl-ctrl-logo {
            display: none;
        }
    }
}
</style>

3.mapbox加载geoserver的tms格式

3.1mapbox加载tms的效果

前提开启pplication/vnd.mapbox-vector-tile

3.2mapbox加载tms的源码

<template>
    <div class="mapbox-maps">
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from './../../public/mapbox-gl.js'
import './../../public/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
//import MapboxLanguage  from '@mapbox/mapbox-gl-language'

// import mapboxgl from 'mapbox-gl'
// import 'mapbox-gl/dist/mapbox-gl.css'


export default {

    methods: {
        initMap() {
            // application/vnd.mapbox-vector-tile,GEoServer版本不同，这里可能不同，注意在GeoServer里查看
            //mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';

            var tmsUrl = "http://192.168.10.10:8080/geoserver/gwc/service/tms/1.0.0/mymvt%3ACSZTGH@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";
            var map = new mapboxgl.Map({
                container: 'map',
                style: {
                    "version": 8,
                    "name": "test-tms-style",
                    "sources": {
                        "osm-tms": {
                            'type': 'vector',
                            'scheme': 'tms',//TMS服务有此一行，默认xyz
                            'tiles': [
                                tmsUrl
                            ],
                            //"tileSize": 256
                        }
                    },
                    "layers": [{
                        "id": "tms-test-id",
                        "type": "line",
                        "source": "osm-tms",
                        "source-layer": "CSZTGH",
                        "layout": {
                            "line-join": "round",
                            "line-cap": "round"
                        },
                        "paint": {
                            "line-color": "#E31A1C",//红色
                            "line-width": 3,
                            "line-opacity": 1
                        }
                    }]
                },
                zoom: 12,
                center: [114.9, 27]
            });
        }
    },

    mounted() {
        this.initMap()
    }
}
</script>

<style lang="less">
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;

    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

        .mapboxgl-canvas {
            outline: none;
        }

        // 隐藏mapbox商标
        .mapboxgl-ctrl-logo {
            display: none;
        }
    }
}
</style>

4.mapbox加载geoserver的静态切片wmts格式

4.1mapbox加载静态切片wmts的效果

4.2mapbox加载静态切片wmts的源代码

<template>
    <div class="mapbox-maps">
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from './../../public/mapbox-gl.js'
import './../../public/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
//import MapboxLanguage  from '@mapbox/mapbox-gl-language'

// import mapboxgl from 'mapbox-gl'
// import 'mapbox-gl/dist/mapbox-gl.css'


export default {

    methods: {
        initMap() {
            //注意 EPSG:900913相当于3857坐标系  因为他们参数一致
            var wmtsStyle = "http://192.168.10.10:8080/geoserver/gwc/service/wmts?layer=mymvt:CSZTGH&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}";
            //  mapboxgl.accessToken ='pk.eyJ1IjoibWFwYm94bWF4IiwiYSI6ImNqbnY4MHM3azA2ZmkzdnBnMThvNzRoZ28ifQ.IffqPZGkhcdPjnZ2dmSO6w';
            var map = new mapboxgl.Map({
                container: 'map',
                style: {
                    "version": 8,
                    "name": "test-wmts-style",
                    "sources": {
                        "osm-wmts": {
                            "type": "raster",//栅格格式相当于图片
                            'tiles': [
                                wmtsStyle//geoserver服务地址
                            ],
                            "tileSize": 256//瓦片大小
                        }
                    },
                    "layers": [{
                        "id": "wmts-test-id",//相当于图层名字
                        "type": "raster",//栅格格式相当于图片
                        "source": "osm-wmts",//对应sources取得键名
                        "minZoom": 1,
                        "maxZoom": 18,
                        "paint": {
                            "raster-opacity": 1//绘画透明度 1不透明
                        }
                    }]
                },
                zoom: 3,
                center: [112.08, 27.54]
            });
        }
    },

    mounted() {
        this.initMap()
    }
}
</script>

<style lang="less">
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;

    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

        .mapboxgl-canvas {
            outline: none;
        }

        // 隐藏mapbox商标
        .mapboxgl-ctrl-logo {
            display: none;
        }
    }
}
</style>


<!-- <template>
  <div class="map_box">
      <div ref="map" class="map" id="map"></div>
  </div>
</template>

<script>
import maxboxMap from './futureMap.js'

export default {
  components: {},
  data() {
      return {
          map: null,
      }
  },
  computed: {},
  methods: {
      handleInitMap() {
          // 后期想传入一些值 比如areaCode 之类的 自动定位至改城市的中心

          let map = new maxboxMap({
              element: 'map'
          })
      },
  },
  watch: {},

  mounted() {
      this.handleInitMap()
  },
}
</script> -->
<style lang="less"></style>

mapbox进阶，纯前端生成线路路径方向、距离描述信息，用于路径规划文本描述
我哎GIS博客
05-22 341
本文详细介绍如何基于mapbox-gl v3.*.* 版本，纯前端生成线路路径方向、距离描述信息，用于路径规划文本描述，亲测可用。希望能帮助到您。一起学习，加油！加油！
GIS开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍
热门推荐
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-10 1万+
OpenLayer、Leaflet、Maplibre-gl和Cesiumjs（3d）OpenLayer 对各种地图服务支持较好，比如各种vms,vmts等，动态效果较差。Leaflet 对vue支持较好，与前端交互方便，对地图服务支持不好Maplibre-gl:继承自Mapbox-2d的开源分支，Mapbox商业化后Maplibre-gl项目从Mapbox-2d的开源分支开始继续维护更新，号称地图服务中动态效果最好的库，插件较多，个人感觉像是地图引擎里的游戏引擎，各种动态效果极好。
Mapbox 添加WMS服务
米老头的博客
10-25 4902
转载 Mapbox 添加WMS服务 https://blog.csdn.net/wangdaoyin2010/article/details/79116609?utm_source=blogxgwz0 Mapbox使用ArcGIS 切片服务（WMTS） https://blog.csdn.net/wangdaoyin2010/article/details/79668485?utm_sou...
Mapbox加载wms
04-21
mapbox 加载wms 用geoserver发布之后加载，亲测可以行
mapbox加载geoserver发布的WMS服务
Sakura1998gis的博客
06-05 1688
mapbox加载geoserver发布的WMS服务
MapBox加载GeoServer发布的WMS地图服务
做GIS梦的人
03-08 6711
使用MapBox加载GeoServer发布的WMS地图服务，测试一下成功，但是发现好像不支持4326坐标系，只支持3857坐标系，最终没有找到怎么加载4326坐标系的WMS服务。加载代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;ti
Mapbox GL 加载GeoServer发布的WMS地图服务及点击查询
hequhecong10857的博客
02-20 5988
文章目录1. GeoServer发布WMS地图服务2. Mapbox GL 加载WMS source3. WMS地图服务点击查询4. 完整代码5. 参考文档 1. GeoServer发布WMS地图服务 GeoServer发布地图服务的常规操作： 创建工作区 添加新的数据存储 添加新的图层 不会的可自行在网上搜索，此处不再赘述。需要注意以下几点： 添加新的数据存储时，需要注意属性表数据的编码格式，如果包含中文字符，需要选择GB2312或者GBK 添加新的图层时，需要正确定义待发布图层的坐标系，此处强制
Mapbox 加载自定义 WMS 数据源
Young Lee
07-30 1763
Mapbox 加载自定义 WMS 数据源 Step 1 引入依赖文件 <link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script> Step 2 创建地图容器 <div id="ma
Arcgis for Js之加载wms服务
01-18 3741
概述：本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务。 1、定义resourceInfo var resourceInfo = { extent: new Extent(-126.40869140625,31.02539...
Geoserver Openlayers 加载数据总结
爱明爱夏的博客
01-21 5192
经过一段时间的踩坑，现在总结一下利用Openlayers加载地图数据方法。 一 加载天地图、百度地图数据 openlayers3加载天地图数据 OpenLayers 3加载百度地图 注意其中的‘’确定服务地址‘’部分，在浏览器中F12查看Network，可以清楚地看到每一个地图数据的加载过程和服务器地址，更具这些就可以确定如何使用openlayers加载数据。 天地图数据是一个切片数
cesium怎么加载kml格式_Cesium加载各类数据总结
weixin_40003478的博客
12-18 2195
接触到的加载数据类型：源地图、shp、Geojson、png、wms、地形底图1、Cesium加载各类源地图(在线的影像服务)#此类加载的本质在于 new Cesium.ImageryProvider()Api defination：“Provides imagery to be displayed on the surface of an ellipsoid. This type describ...
Cesium数据加载
【cacrle】的博客
01-25 3039
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium适用于地球科学研究、军事情报分析、航空航天领域以及虚拟现实应用等方面。本文是基于Cesium教程进行实践操作后的总结，介绍Cesium相关数据加载操作，数据包括ArcGIS在线地图、Bing地图、天地图、高德地图、OpenStreetMap、MapBox影像图等，ESRI、超图、中地数码等大型GIS厂
mapboxgl对接wms自定义服务
10-03
简单的一个示例！
mapboxwms天地图，高德地图，谷歌地图
04-28
mapboxwms天地图，高德地图，谷歌地图，使用最新mapbox，基类封装
mapbox 添加wmts
qq_34870529的博客
12-28 4255
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='https://cdn.bootcdn.net.
Mapbox使用ArcGIS 切片服务（WMTS）
wangdaoyin2010的专栏
03-23 1万+
使用Mapbox添加ArcGIS切片服务（WMTS ，注意：不是矢量切片）小结。          map.addLayer({                'id': 'ArcGIS_WMTS',                'type': 'raster',//这里要用raster ，因为切片得到的是图片                'source': {                ...
046：mapboxGL加载天地图路网图+标记（wmts方式）
大剑师兰特的GIS世界
10-14 1530
本示例的目的是介绍演示如何在vue+mapbox中加载天地图路网图+标记（wmts方式）。瓦片中的url地址引用的是天地图的wmts的形式。
mapbox 加载geoserver 的wmts ,pbf
qq_32290021的博客
12-18 609
之前写的是‘/geoserver/gwc/service’ 就一直报。有两种方式wmts 和pbf,两种方式都可以加载。1、geoserver 发布wmts,pbf。这里需要注意的点是 url 地址一定要完成。2、利用mapbox 显示自定义图层标签。祝各位GIS 开发者加载成功！
geoserver图层预览
最新发布
05-09
### GeoServer 图层预览配置教程 GeoServer 是一个开源软件服务器，允许用户通过标准协议共享地理空间数据。以下是关于如何在 GeoServer 中配置并查看图层预览的相关信息。 #### 1. 地理数据导入与发布 要使图层能够被预览，首先需要将地理数据（如 Shapefile 或数据库表）导入到 GeoServer 并发布它。具体操作如下： - 登录到 GeoServer 的 Web 界面。 - 进入 **Data → Stores** 页面，点击 “Add new Store”，选择适合的数据存储类型（例如 PostGIS 数据库或文件系统上的 Shapefile 文件夹）。 - 完成数据源创建后，进入 **Layers** 页面，找到对应的工作区下的新数据集，并将其作为图层发布[^1]。 #### 2. 配置 WMS/WMTS/TMS 输出参数 为了支持不同客户端访问方式以及优化性能表现，可以调整以下几个方面设置来增强用户体验效果： - 在 Layer Configuration 下拉菜单里修改请求 URL 和默认样式选项； - 如果希望提供瓦片缓存功能，则需启用 GeoWebCache (GWC)，并通过编辑 `web.xml` 添加自定义磁盘路径保存生成好的切片文件[^3]: ```xml <context-param> <param-name>GEOWEBCACHE_CACHE_DIR</param-name> <param-value>/path/to/cache/directory</param-value> </context-param> ``` #### 3. 访问图层预览页面 完成以上准备工作之后就可以直接打开浏览器输入类似下面这样的链接地址来进行在线浏览测试了: ``` http://localhost:8080/geoserver/web/?wicket:bookmarkablePage=:org.geoserver.web.demo.MapPreviewPage ``` 此界面会展示当前可用的所有公开资源列表及其基本信息摘要；选中目标项即可加载其实际渲染效果图样^。 另外值得注意的一点是当涉及到跨域资源共享(CORS)时可能还需要额外处理才能让前端应用顺利调用后台接口返回的地图内容[^1]^。 ```javascript // Example of using Mapbox GL JS to load a WMS service from GeoServer. map.addSource('my-wms-source', { type: 'raster', tiles: [ 'http://localhost:8080/geoserver/wms?service=WMS&version=1.1.1&request=GetMap&layers=test_layer&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png' ], tileSize: 256 }); map.addLayer({ id: 'my-wms-layer', type: 'raster', source: 'my-wms-source' }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

挣钱花388

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值