mapbox-gl 移动端（H5）位置共享交互

---

前言

分享最近写的一个小demo，功能类似微信小程序端的大头针位置共享功能，需要实现的主要功能包括位置查询、周边地点检索、位置定位等，数据采用天地图球面墨卡托（WGS84）的 WMTS 矢量底图与标记服务，框架采用Taro。首页如下

---

逆地理编码：获取周边地点

逆地理编码是借助经纬度坐标信息得到标准的地址信息的过程，在mapbox-gl中，借助 Marker 组件实现大头针效果，需要注意的点有二

• 底图移动时保持大头针始终保持在地图中央
• 底图停止移动时，发送请求获取周边位置列表

// 监听地图移动，实时设置大头针位置
 mapRef?.current.on('move', markerMove);
 // 监听地图停止移动，获取周边详情
 mapRef?.current.on('dragend', markerMoveEnd);

地理编码：查询位置

一个简单的查询功能，选择地址后锁定相机视角

大头针选位

也可以手动拖动大头针选取位置，通过点击更新大头针位置，不过这样的话与保持大头针在中央会有矛盾点，建议二选其一

markerRef.current.setDraggable(true);

位置卡片

截取当前canvas上的要素，包括大头针，但不能将返回键截图进去，借助 html2canvas

  const saveImg = async () => {
    const mapDom = document.getElementById('mapcontainer')
   
    html2canvas(mapDom, {
      scale:1.0 ,// 保持原始大小
      allowTaint: true,
      useCORS: true,
      logging: true,
      
    }).then(canvas => {
      const imgurl = canvas.toDataURL();   // 获取64位编码
      console.log(imgurl);
      sendImageRequest(imgurl)
    });
  }

封装一个请求图片的请求查看截图效果

  function sendImageRequest(src) {
    console.log(src)
    return new Promise((resolve, reject) => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.onload = () =>{
        ctx?.drawImage(img, 0, 0);
        resolve(canvas.toDataURL('image/png'));
      }
      img.onerror = () =>{
        reject()
      }
    
      img.src = src;
    });
  }