GIS开发:mapbox gl几种底图的加载

简介: GIS开发:mapbox gl几种底图的加载

mapbox gl除了加载客户端可控制样式的底图,也能够加载常规的影像底图。
这里指发布的影像或者矢量地图切片,在线经常使用的有天地图,谷歌地图、高德百度等,底图的加载,mapbox gl中,主要是修改对应的样式style。

//这是加载arcgis server发布的底图切片

var map = new mapboxgl.Map({

    container: 'map',


    style: {

        //目前地图的版本用8

        "version": 8,

          //数据源,可以设置多个数据源

         "sources": {"mapsource": {

          //数据源类型是 raster

            "type": "raster", 

          //切片的地址:arcgis server 只有发布了切片才能这样进行访问,具体参照arcgis server的wmts发布

            "tiles":   ['http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS/tile/1.0.0/ChinaOnlineCommunity/default/default028mm/{z}/{y}/{x}.png']

         //切片的尺寸,一般都是256

                     "tileSize": 256,

            } 

        },

        //加载数据源里的图层

        "layers": [{

                "id": "mapsource",

                "type": "raster",

          //数据源选择source中的id

                "source": "mapsource",

        //设置图层的可缩放级别

                "minzoom": 0,

                "maxzoom": 18

                } ]

                }

            });

        </script>



//加载天地图的矢量和注记图层

style: {

    "version": 8,

    "sources": {

    "mapsource": {

        "type": "raster",

           //天地图的影像切片,现在天地图需要申请token

"tiles": 

['http: //t1.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=<your token>'],

                            "tileSize": 256,

    },

       //注记的数据源,source中可以添加多个

    annotationsource": {

    "type": "raster",

    "tiles": [' http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=<your token>'],

                            "tileSize": 256,

                        }

   },

 //分别加载多个天地图的图层

    "layers": [{

        "id": "mapsource",

        "type": "raster",

        "source": "mapsource",

        "minzoom": 0,

        "maxzoom": 18

                    },{

        "id": "annotationsource",

        "type": "raster",

        "source": "annotationsource",

        "minzoom": 0,

        "maxzoom":18

            }]

    }

类似于高德、百度的地图,网上搜到这些地图的切片地址,同样也能够进行访问,需要注意的是,切片图层要做成web mecator的坐标系,才能进行访问。

相关文章
|
6月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
171 0
|
JavaScript 前端开发 大数据
GIS开发:推荐Mapbox gl解决方案
GIS开发:推荐Mapbox gl解决方案
355 0
|
JavaScript 定位技术
基于Leaflet.draw的gis图形标绘实战
本文将通过编码的方式讲解如何引入Leaflet.draw组件,并绘制点、线、面、圆对象,同时可以计算线的距离,面积,圆半径和点的经纬度等信息。通过本文可了解基本操作,可以基于leaflet扩展相关的绘制组件,为空间检索等
734 0
基于Leaflet.draw的gis图形标绘实战
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3761 10
mapbox-gl:数据多样式显示
mapbox-gl:数据多样式显示
354 0
mapbox-gl:数据多样式显示
cesium加载魔方立方体
【8月更文挑战第16天】
|
6月前
|
JSON 数据可视化 前端开发
地图可视化神器Kepler.gl 3.0终于来了!
地图可视化神器Kepler.gl 3.0终于来了!
211 1
|
前端开发 数据可视化 定位技术
GIS前端-地图标绘与动画
GIS前端-地图标绘与动画
181 0
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
134 0
|
4月前
|
开发框架 前端开发 定位技术
在Mars3d实现cesium的ImageryLayer自定义瓦片的层级与原点
通过上述步骤,您可以成功在Mars3D平台上集成Cesium,并实现自定义瓦片图层的层级与原点配置。这一过程不仅提升了地图应用的定制化程度,也为处理特定数据集和优化用户体验提供了灵活的解决方案。在实际开发过程中,不断测试和微调是确保图层展示效果与性能的关键。
229 0

热门文章

最新文章