关于 mapboxgl 的常用方法及效果

原创

已于 2023-12-06 15:22:31 修改 · 2.8k 阅读

标签

#mapboxgl #map地图动态路径 #路径规划 #map #地址匹配

于 2023-12-06 15:16:32 首次发布

本文详细描述了在Vue项目中使用MapboxGLJS实现地图上的标记点、气泡展示、线路绘制、缓冲区圆绘制、图片添加、图标动态移动、路径动画以及地址匹配和两点间路径规划的功能。同时提到了在Vue组件中处理数据绑定时可能出现的地图空白问题及其解决方案。

给地图标记点

实现效果
在这里插入图片描述

 /**
  * 在地图上添加标记点
  * point: [lng, lat]
  * color: '#83f7a0'
  */
 addMarkerOnMap(point, color = '#83f7a0') {
   
   
   const marker = new mapboxgl.Marker({
   
   
     draggable: false,
     color: color,
   }).setLngLat(point).addTo(this.map);
   this.markersList.push(marker);
 },

给地图添加气泡展示地点详情

实现效果：
在这里插入图片描述

 /**
  * 在地图上添加气泡展示
  * point: [lng, lat]
  */
 addPopupOnMap(point) {
   
   
   // 将所选点设置为地图中心
   this.map.setCenter(point);
   // Zoom to the zoom level 8 with an animated transition
   this.map.zoomTo(16, {
   
   
     duration: 2000
   });
   // 自行赋值
   const html = `<div class="dt-popup">
     <i class="ivu-icon ivu-icon-md-close" id="closePop"></i>
     <ul>
       <li><span class="label">事件名称：</span>${
     
     eventName}</li>
       <li><span class="label">经度：</span>${
     
     longitude}</li>
       <li><span class="label">纬度：</span>${
     
     latitude}</li>
     </ul>
   </div>`
   const popup = new mapboxgl.Popup({
   
    closeOnClick: false }).setLngLat(point).setHTML(html).addTo(this.map);
   // this.popup = popup
   Popup = popup
 },

给地图划线

实现效果
在这里插入图片描述
我的写法估计是有点问题，每条小线段都增加了一个资源和图层，但是还是实现了此功能

map.addSource(`route${
     
     routesI}`, {
   
   
  type: 'geojson',
   data: {
   
   
     type: 'Feature',
     properties: {
   
   },
     geometry: {
   
   
       type: 'LineString',
       coordinates: routesNew,
     },
   },
 });
 map.addLayer({
   
   
   id: `route${
     
     routesI}`,
   type: 'line',
   source: `route${
     
     routesI}`,
   layout: {
   
   
     'line-join': 'round',
     'line-cap': 'round',
   },
   paint: {
   
   
     'line-color': '#24C1FF',
     'line-width': 10,
   },
 });

给地图添加缓冲区画圆

实现效果：（颜色自行修改）
在这里插入图片描述

参考地址：https://blog.csdn.net/qq_33950912/article/details/127428093

思路：画圆，其实就是连接n个近似于圆的点位。

经过验证，上述文章中选取了方法三，自定义去切割圆。方法一未曾实现。方法二可能有问题，没有尝试。

/**
  * 计算以中心点、半径 缓冲区
  * center: [lng, lat]
  * radiusInKm 
  */
 createGeoJSONCircle(center, radiusInM, points = 64) {
   
   
   var coords = {
   
   
     latitude: center[1],
     longitude: center[0]
   };

   var miles = radiusInM;
   var ret = [];
   var distanceX = miles/1000/(111.320*Math.cos(coords.latitude*Math.PI/180));
   var distanceY = miles/1000/110.574;

   var theta, x, y;
   for(var i=0; i<points; i++) {
   
   
     theta = (i/points)*(2*Math.PI);
     x = distanceX*Math.cos(theta);
     y = distanceY*Math.sin(theta);

     ret.push([coords.longitude+x, coords.latitude+y]);

最低0.47元/天解锁文章