当前位置: 代码迷 >> 综合 >> mapbox 笔记
  详细解决方案

mapbox 笔记

热度:49   发布时间:2023-10-17 07:39:53.0

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';

12:更改地图手势

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