mapbox 笔记

1：mapbox 更改图层属性

map.setPaintProperty(layer, 'fill-opacity', 1);

2：mapbox 更改图层数据源

map.getSource(source).setData(cityHeatDatas);

3：mapbox 获取当前地图已添加的图层layers及数据源sources

const layers = map.getStyle().layers;
const sources= map.getStyle().sources;

4：mapbox添加热力图heat-weight表达式

"heatmap-weight": ["/", ["get", "value"], heatWeight],

5：mapbox更改style

let style =  {
        "version": 8,
        "sources": {
            "raster-tiles": {
                "type": "raster",
                "tiles": ['https://t{s}.tianditu.gov.cn/DataServer?T=' + type + '_w&x={x}&y={y}&l={z}&tk=' + tk ],
                "tileSize": 256,
            }
        },
        "layers": [{
            "id": "tdt-img-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }]
    };

map.setStyle(style);

6：地图加载完成后执行

window.map.on('load', function() {
    console.log("do something!");    
});

7：判断某个图层是否存在

const layer = map.getLayer("layerId");

8：移除图层或数据源

map.removeLayer(layerId);   // 移除图层

map.removeSource(sourceId);    // 移除数据源

9：根据范围进行定位（含动画）

const bounds = [78.23,27.05,99.25,36.30];
map.fitBounds(bounds);

10：获取图层点击处的属性

map.on('click', 'point', function (e) {
            var bbox = [
                [e.point.x - 5, e.point.y - 5],
                [e.point.x + 5, e.point.y + 5]
            ];
            var renderFeatures = map.queryRenderedFeatures(bbox, {
                layers: [layersId]
            });
            renderFeatures.forEach(renderFeature => {
                const { id, layer, source, properties } = renderFeature;
            });
        });

11：自动生成要素id

map.addSource(sourceId, {
            type: 'geojson',
            data: geojson,
            generateId: true
        });

map.addSource(provinceSourceId, {
            type: "vector",
            tiles: ["http://192.9.104.187:8084/vt1/{z}/{x}/{y}"],
            promoteId: "gb",
        });

12：更改地图手势

map.getCanvas().style.cursor = 'pointer';

map.getCanvas().style.cursor = '';

map.getCanvasContainer().style.cursor = 'grab';

map.getCanvasContainer().style.cursor = 'crosshair';

13：根据数据属性显示文本内容

layout: {
            "text-field": ['get', 'name'],
            "text-size": 12,    // 文字大小
            "text-anchor": "top",
            "text-allow-overlap": true // 文字避让
        },

14: 屏幕坐标转像素坐标

map.on('click', (e) => {
// When the map is clicked, get the geographic coordinate.
const coordinate = map.unproject(e.point);
});

15: 调整图层顺序

// Move a layer with ID 'polygon' before the layer with ID 'country-label'. The `polygon` layer will appear beneath the `country-label` layer on the map.
map.moveLayer('polygon', 'country-label');

16：获取点击图层的第一个要素

map.on('mousemove', 'counties', (e) => {
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = 'pointer';
 
    // Use the first found feature.
    const feature = e.features[0];
})

17：地图跳转

// 1 jumpTo 无动画
const cityCoordinate = [100.507, 13.745];
map.jumpTo({ center: coordinate });

// 2 带动画
const location = {
    bearing: 90,
    center: [-0.12416858, 51.50779757],
    zoom: 14.3,
    pitch: 20
};
map.flyTo(location);

// 3 带动画 根据bounds定位
const bounds = [[32.958984, -5.353521],[43.50585, 5.615985]];
map.fitBounds(bounds);

// 4 可配置动画 easeTo
map.easeTo({ center：coordinate , duration: 1000, easing: (n) => n });

18：获取鼠标悬浮位置像素位置及地理位置

map.on('mousemove', (e) => {
    // 像素位置 point.x: 距离左侧位置 point.y: 距离上边位置
    const point = e.point;

    // 地理位置 coordinate.lng：经度   coordinate.lat: 维度
    const coordinate = e.lngLat;
});

19: 显示、隐藏图层

// visible: 显示  none: 隐藏
const display = false;
map.setLayoutProperty(
    layerID,
    'visibility',
    display ? 'visible' : 'none'
);

20：禁用地图交互

interactive: false

const map = new mapboxgl.Map({
    container: 'map',
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [-74.5, 40],
    zoom: 9,
    // causes pan & zoom handlers not to be applied, similar to
    // .dragging.disable() and other handler .disable() funtions in Leaflet.
    interactive: false
});

21：禁用鼠标滚轮放大、缩小地图

map.scrollZoom.disable();

map.scrollZoom.disable();

22：地图旋转禁用

鼠标禁用：map.dragRotate.disable();

map.dragRotate.disable();

数控版禁用 ：map.touchZoomRotate.disableRotation();

map.touchZoomRotate.disableRotation();

23：控制地图级别缩放动画

map.zoomTo(18, { duration: 9000 });