mapbox实现底图切换

贴个群号

WebGIS学习交流群461555818,欢迎大家。

底图配置文件

const token ='你的token'
//负载均衡解决天地图调用经典底图切片加载丢失,418与404报错问题
const servers = [...Array(8).keys()];
const rand = (min = 0, max = 1) => (
  Math.round(Math.random() * (max - min) + min)
)
const serversProxy = new Proxy(servers, {
    get(target, prop){
        if (prop === 'server') {
            return target[rand(1, target.length - 1)]
        }
        return target[prop]
    }
})
const tiandituHeader = 'https://t'+serversProxy.server+'.tianditu.gov.cn/'
const tiandituCenter = '/wmts?&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER='
const tiandituEnd = '&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles&tk='
export const baseMapLayer ={
    '影像':{
        map:{
            source:{
                id:'tdtImg',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'img_w'+tiandituCenter+'img'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtImg",
                "type": "raster",
                "source": "tdtImg",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
        note:{
            source:{
                id:'tdtCia',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'cia_w'+tiandituCenter+'cia'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtCia",
                "type": "raster",
                "source": "tdtCia",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
    },
    '经典':{
        map:{
            source:{
                id:'tdtVec',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'vec_w'+tiandituCenter+'vec'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtVec",
                "type": "raster",
                "source": "tdtVec",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
        note:{
            source:{
                id:'tdtCva',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'cva_w'+tiandituCenter+'cva'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtCva",
                "type": "raster",
                "source": "tdtCva",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
    },
    '地形':{
        map:{
            source:{
                id:'tdtTer',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'ter_w'+tiandituCenter+'ter'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtTer",
                "type": "raster",
                "source": "tdtTer",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
        note:{
            source:{
                id:'tdtCta',
                source:{
                    "type": "raster",
                    'tiles': [
                        tiandituHeader+'cta_w'+tiandituCenter+'cta'+tiandituEnd+token,
                    ],
                    'tileSize': 256
                }
            },
            layer:{
                "id": "tdtCta",
                "type": "raster",
                "source": "tdtCta",
                "minzoom": 0,
                "maxzoom": 17
            }
        },
    }
}

初始化底图

        mapboxgl.accessToken = '你的token';
        const style = {
          container: this.mapId,
          projection:'globe',
          // style: 'mapbox://styles/mapbox/streets-zh-v1',
          style: {
            version: 8,
            center: [110, 36],
            zoom: 3,
            "sprite": baseUrlMVT+tilesUrlDC+"/sprites/sprite",
            "glyphs":  baseUrlMVT+tilesUrlDC+"/fonts/{fontstack}/{range}.pbf",
            "version": 8,
            "sources": {
                'tdtImg':baseMapLayer['影像'].map.source.source,
                'tdtCia':baseMapLayer['影像'].note.source.source
                // 'tdtVec':baseMapLayer['经典'].map.source.source,
                // 'tdtCva':baseMapLayer['经典'].note.source.source
            },
            "layers": [
              baseMapLayer['影像'].map.layer,
              baseMapLayer['影像'].note.layer
              // baseMapLayer['经典'].map.layer,
              // baseMapLayer['经典'].note.layer
            ],
          },
          maxZoom: 19.9,
          minZoom: 0.1,
          // dragRotate: false,
          trackResize: true,
          attributionControl: false,
          preserveDrawingBuffer: true,
          renderWorldCopies: true, // 地图不重复
          locale: {
            'NavigationControl.ZoomIn': '放大',
            'NavigationControl.ZoomOut': '缩小'
          }
        }
        //存一份旧的底图,用来进行moverlayer,来当beforeLayer
        this.baseMapId = {'mapId':baseMapLayer['影像'].map.source.id,'noteId':baseMapLayer['影像'].note.source.id}
        
        const map = this.map = new mapboxgl.Map(style)

底图切换方法

type就是经典,影像这几个文字

    baseMapsChange(type){
        console.log(type,this.map)
        //选到同样的底图了那就不操作
        if(this.map.getSource(baseMapLayer[type].map.source.id)){
        }else{
            //选到别的底图了,先添加新的底图
            this.map.addSource(baseMapLayer[type].map.source.id,baseMapLayer[type].map.source.source)
            this.map.addLayer(baseMapLayer[type].map.layer)
            this.map.addSource(baseMapLayer[type].note.source.id,baseMapLayer[type].note.source.source)
            this.map.addLayer(baseMapLayer[type].note.layer)
            //移动新底图到旧底图前面,保证底图都是在最底层
            this.map.moveLayer(baseMapLayer[type].map.source.id,this.baseMapId.mapId)
            this.map.moveLayer(baseMapLayer[type].note.source.id,this.baseMapId.noteId)
            //移除旧底图
            this.map.removeLayer(this.baseMapId.mapId)
            this.map.removeLayer(this.baseMapId.noteId)
            this.map.removeSource(this.baseMapId.mapId)
            this.map.removeSource(this.baseMapId.noteId)
            this.baseMapId = {'mapId':baseMapLayer[type].map.source.id,'noteId':baseMapLayer[type].note.source.id}
        }
    }
Mapbox是一款强大的地图工具,支持通过矢量瓦片、GeoJSON等多种数据形式构建丰富的地理信息系统应用。下面简要介绍如何在Mapbox实现瓦片底图和GeoJSON底图之间的互相切换。 ### 瓦片底图与GeoJSON底图切换 #### 基本步骤: 1. **初始化 Map** 需要在HTML页面引入`mapbox-gl.js`库并创建一个基本的地图实例。 ```javascript const map = new mapboxgl.Map({ container: 'map', // HTML元素ID style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], // 初始中心点坐标 zoom: 9 // 初始缩放级别 }); ``` 2. **加载 GeoJSON 数据作为覆盖层** 可以使用 `addSource()` 和 `addLayer()` 方法将GeoJSON数据添加到现有地图上,并设置样式规则。 ```javascript map.addSource('geojson-source-id', { type: 'geojson', data: '/path/to/your.geojson' }); map.addLayer({ id: 'geojson-layer-id', type: 'fill', source: 'geojson-source-id', paint: { 'fill-color': '#088', 'fill-opacity': 0.8 } }); ``` 3. **动态切换底图风格** 使用 `setStyle()` 方法可以改变当前显示的瓦片底图风格(如街道视图或卫星影像)。例如从默认街景切至暗黑主题: ```javascript function switchToDarkMode() { map.setStyle('mapbox://styles/mapbox/dark-v10'); } function switchToSatelliteView() { map.setStyle('mapbox://styles/mapbox/satellite-streets-v11'); } ``` 4. **移除或隐藏特定覆盖物** 当需要完全恢复只有瓦片底图的状态时,可以删除之前加入的所有自定义源及其关联层次结构: ```javascript if (map.getLayer('geojson-layer-id')) { map.removeLayer('geojson-layer-id'); } if (map.getSource('geojson-source-id')) { map.removeSource('geojson-source-id'); } ``` 5. **结合按钮操作完成交互功能** 最终把上述逻辑封装成事件处理器绑定给用户界面控件即可让其一键操控地图展示效果。 ```html <button onclick="switchToDarkMode()">切换到黑暗模式</button> <button onclick="switchToSatelliteView()">切换到卫星图像</button> ``` --- 以上就是关于如何利用Mapbox API制作具备简单互动性的WebGIS系统的概括说明啦!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值