mapbox记录

记录一次mapbox本地化部署，内网开发

1. www.mapbox.com/ 注册账号，获取Access tokens，需要科学上网

2. 撸代码

<div id="basicMapbox"></div>

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

// 初始化
let map = new mapboxgl.Map({
    container: 'basicMapbox', 
    style: (window as any).mapStyle, // 我这里是引入本地的js文件，dom格式类似mapbox://styles/xxx/xxx
    center: [120.9697, 29.4826],
    zoom: 8, 
    attributionControl: false,
    accessToken: ''
})
   
// 打点显示气泡   
let bounds: any[] = []
map.on('load', () => {
    //添加自定义标记点 data为后台返回的数据集合
    for (const item of data) {
        if(!item.longitude || !item.latitude) {
            return
        }
        // 创建标记点
        const el = document.createElement('img') //这里可以是任意标签
        el.className = 'marker'
        el.src = pointPng //图片路径赋值

        //添加气泡弹窗
        let mhtml = `<div class="jw_infoWindow">
            <div class="fontSize16">
                ${item.stationName}
            </div>
            <div class="fontSize14 marginT8" style="color: #999999"><img class="marginR4" src="${trianglePng}" width="12" height="13"/>地址</div>
            <div class="fontSize16 marginT8">${item.addr}</div>
            <div class="marginT12 jw_png"><img width="100%" height="116" src="${item.stationImage || emptyPng}"  class="a"/></div>
        </div>`

        let popup = new mapboxgl.Popup({ offset: [0, -16] }).setHTML(mhtml)

        // 添加自定义标记点
        new mapboxgl.Marker(el).setLngLat([+item.longitude, +item.latitude]).setPopup(popup).addTo(map)
        bounds.push([+item.longitude, +item.latitude])
    }

    // 让点在地图中间
    map.fitBounds(bounds, {
        padding: { top: 50, bottom: 50, left: 50, right: 50 },
        maxZoom: 12,
        linear: true
    })
})
    
        

以下是一些 mapboxgl 常用的方法和功能：

1. 地图初始化和创建：

   • new mapboxgl.Map(options): 创建一个新的地图实例。
   • map.on(eventType, handler): 监听地图事件，如 click, load, move, zoom 等。

2. 地图样式和图层：

   • map.setStyle(styleURL): 设置地图的样式，可以是 Mapbox提供的默认样式，也可以是自定义的地图样式。
   • map.addLayer(layerConfig, beforeLayerId): 添加图层到地图上，并指定添加在哪个图层之前。
   • map.removeLayer(layerId): 移除地图上的指定图层。

3. 地图控制和交互：

   • map.setCenter(center): 设置地图的中心点坐标。
   • map.setZoom(zoom): 设置地图的缩放级别。
   • map.setBearing(bearing): 设置地图的方向。
   • map.setPitch(pitch): 设置地图的倾斜角度。
   • map.addControl(control): 添加地图控件，如导航控件、缩放控件等。

4. 地图数据和标记：

   • new mapboxgl.Marker(element)：创建一个标记，并指定标记的 DOM 元素。
   • marker.setLngLat(lngLat): 设置标记的位置。
   • marker.addTo(map): 将标记添加到地图上。

5. 地图交互事件：

   • map.on('click', handler): 处理地图点击事件。
   • map.on('mousemove', handler): 处理鼠标移动事件。

6. 地图样式操作：

   • map.setPaintProperty(layerId, property, value): 修改图层的绘制属性，如颜色、透明度等。
   • map.setLayoutProperty(layerId, property, value): 修改图层的布局属性，如显示方式、旋转角度等。

7. 地图数据源和图层更新：

   • map.addSource(id, source): 添加数据源到地图上。
   • map.removeSource(id): 移除地图上的指定数据源。

8. 地图尺寸和边界：

   • map.fitBounds(bounds, options): 调整地图视图以适应给定的地理边界。