关于使用mapbox的一些记录

2025-12-22 13:42:33

Hello World!

.addTo(map);

六、修改主题 https://www.mapbox.com/mapbox-gl-js/example/setstyle/

map.setStyle('mapbox://styles/mapbox/dark-v9');

七、添加WMS层 https://www.mapbox.com/mapbox-gl-js/example/wms/

map.addLayer({

'id': 'wms-test-layer',

'type': 'raster',

'source': {

'type': 'raster',

'tiles': [

'https://geodata.state.nj.us/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=Natural2015'

'tileSize': 256

'paint': {}

}, 'aeroway-taxiway');

八、地图旋转

map.rotateTo(70, {animate: false});

九、获取layer、删除layer

map.getLayer(layerId);

map.removeLayer(layerId);

十、添加event、删除event

function handle() {

// ...

}

map.on('click', layerId, handle);

map.off('click', layerId, handle)

十一、修改鼠标 https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/

map.on('mouseenter', 'symbols', function () {

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

});

map.on('mouseleave', 'symbols', function () {

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

});

十二、显示layer、隐藏layer https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/

map.setLayoutProperty(layerId, 'visibility', 'visible');

map.setLayoutProperty(layerId, 'visibility', 'none');

十三、禁止双击缩放、禁止倾斜旋转、修改logo位置、隐藏地图所属信息

var map = new mapboxgl.Map({

container: 'map', // container id

style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location

center: [-74.50, 40], // starting position [lng, lat]

zoom: 9, // starting zoom

logoPosition: 'bottom-right', // 修改logo位置

doubleClickZoom: false, // 禁止双击缩放

pitchWithRotate: false, // 禁止绕x轴旋转

attributionControl: false // 隐藏地图所属信息

dragRotate: false, // 禁用拖拽旋转

dragPan: false, // 禁用拖拽平移

scrollZoom: false, // 禁用滚轮缩放

});

十四、动态绘制区域 https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

十五、修改一条线中不同线段的颜色 https://www.mapbox.com/mapbox-gl-js/example/data-driven-lines/

var red = '#F7455D';

var blue = '#33C9EB';

map.addLayer({

'id': 'lines',

'type': 'line',

'source': {

'type': 'geojson',

'data': {

'type': 'FeatureCollection',

'features': [{

'type': 'Feature',

'properties': {

'color': red,

'geometry': {

'type': 'LineString',

'coordinates': [

[-122.4833858013153, 37.829607404976734],

[-122.4830961227417, 37.82932776098012],

[-122.4830746650696, 37.82932776098012],

[-122.48218417167662, 37.82889558180985],

[-122.48218417167662, 37.82890193740421],

[-122.48221099376678, 37.82868372835086],

[-122.4822163581848, 37.82868372835086],

[-122.48205006122589, 37.82801003030873]

]

}

}, {

'type': 'Feature',

'properties': {

'color': blue

'geometry': {

'type': 'LineString',

'coordinates': [

[-122.48393028974533, 37.829471820141016],

[-122.48395174741744, 37.82940826466351],

[-122.48395174741744, 37.829412501697064],

[-122.48423874378203, 37.829357420242125],

[-122.48422533273697, 37.829361657278575],

[-122.48459815979002, 37.8293425906126],

[-122.48458743095398, 37.8293447091313],

[-122.4847564101219, 37.82932776098012],

[-122.48474299907684, 37.829331998018276],

[-122.4849334359169, 37.829298101706186],

[-122.48492807149889, 37.82930022022615],

[-122.48509705066681, 37.82920488676767],

[-122.48509168624878, 37.82920912381288],

[-122.48520433902739, 37.82905870855876],

[-122.48519897460936, 37.82905870855876],

[-122.4854403734207, 37.828594749716714],

[-122.48543500900269, 37.82860534241688],

[-122.48571664094925, 37.82808206121068],

[-122.48570591211319, 37.82809689109353],

[-122.4858346581459, 37.82797189627337],

[-122.48582661151886, 37.82797825194729],

[-122.4859634041786, 37.82788503534145],

[-122.48595803976059, 37.82788927246246],

[-122.48605459928514, 37.82786596829394]

]

}

}]

}

// The identity function does not take a 'stops' property.

// Instead, the property value (in this case, 'color') on the source will be the direct output.

'paint': {

'line-width': 3,

'line-color': {

'type': 'identity',

'property': 'color'

}

});

十六、判断点是否在区域内 http://turfjs.org/docs#booleanPointInPolygon

var pt = turf.point([-77, 44]);

var poly = turf.polygon([[

[-81, 41],

[-81, 47],

[-72, 47],

[-72, 41],

[-81, 41]

]]);

turf.booleanPointInPolygon(pt, poly);

//= true

十七、计算两点间的距离 http://turfjs.org/docs#distance

var from = turf.point([-75.343, 39.984]);

var to = turf.point([-75.534, 39.123]);

var options = {units: 'miles'};

var distance = turf.distance(from, to, options);

十八、点到线的最近一点坐标 http://turfjs.org/docs#nearestPointOnLine

var line = turf.lineString([

[-77.031669, 38.878605],

[-77.029609, 38.881946],

[-77.020339, 38.884084],

[-77.025661, 38.885821],

[-77.021884, 38.889563],

[-77.019824, 38.892368]

]);

var pt = turf.point([-77.037076, 38.884017]);

var snapped = turf.nearestPointOnLine(line, pt);

十九、两点间中点坐标 http://turfjs.org/docs#midpoint

var point1 = turf.point([144.834823, -37.771257]);

var point2 = turf.point([145.14244, -37.830937]);

var midpoint = turf.midpoint(point1, point2);

二十、区域平移、点平移、线平移 http://turfjs.org/docs#transformTranslate

可获取平移后的坐标

// 区域平移

var poly = turf.polygon([[[0,29],[3.5,29],[2.5,32],[0,29]]]);

var translatedPoly = turf.transformTranslate(poly, 100, 35);

// 点平移

turf.transformTranslate(turf.point([10, 10]), 100, 35);

// 线平移

turf.transformTranslate(turf.lineString([[10, 10], [20, 20]]), 100, 35);

二一、修改区域参考：https://www.mapbox.com/mapbox-gl-js/example/animate-a-line/

map.addLayer({

'id': k,

'type': 'fill',

'source': {

'type': 'geojson',

'data': {

'type': 'Feature',

'geometry': {

'type': 'Polygon',

'coordinates': [ v.bounds ]

}

'paint': {

'fill-color': v.fill,

'fill-outline-color': v.stroke

}

});

map.getSource(k).setData({

'type': 'Feature',

'geometry': {

'type': 'Polygon',

'coordinates': [[

[102.92171417511929, 25.103626888715624],

[102.93111617108025, 25.114968731879713],

[102.93246157760666, 25.11403601959097],

[102.92274821358956, 25.101974512317625],

[102.92171417511929, 25.103626888715624],

]]

}

});

二二、计算麻点的中点坐标 http://turfjs.org/docs#centerOfMass

var polygon = turf.polygon([[[-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41]]]);

var center = turf.centerOfMass(polygon);

二三、添加缩放及指南针控件 https://www.mapbox.com/mapbox-gl-js/example/navigation/

map.addControl(new mapboxgl.NavigationControl(), 'top-right');

二四、geojson point(symbol) text

map.addLayer({

"id": "stand_text",

"type": "symbol",

"source": {

"type": "geojson",

"data": res2

"paint": {

"text-color": '#f00',

"text-halo-color": '#fff',

"text-halo-width": 1

"layout": {

"text-size": 14,

"text-field": "{stand}"

}

});

二五、两点角度计算 http://turfjs.org/docs#bearing

var point1 = turf.point([-75.343, 39.984]);

var point2 = turf.point([-75.534, 39.123]);

var bearing = turf.bearing(point1, point2);

二六、点平移 http://turfjs.org/docs#rhumbDestination

var pt = turf.point([-75.343, 39.984], {"marker-color": "F00"});

var distance = 50;

var bearing = 90;

var options = {units: 'miles'};

var destination = turf.rhumbDestination(pt, distance, bearing, options);

二七、kml转geojson

KML is Google’s Keyhole Markup Language. GeoJSON is a format for encoding a variety of geographic data structures.

pm下载地址：https://www.npmjs.com/package/togeojson

mapbox-gl可参考链接

本文来自于 mapbox · 前端技术总结 · 看云 (kancloud.cn)

mapbox Style 规范 https://zhuanlan.zhihu.com/p/641898777

mapbox 操作 https://article.juejin.cn/post/7257184836972576825

《拳皇命运》全集无修在线观看
矿机多长时间停一次？矿机需要多久休息一次？

关于使用mapbox的一些记录

Hello World!

最新发表

友情链接