mapboxGL地图分享功能的实现

lzugis

发布于 2023-06-10 11:21:17

2840

发布于 2023-06-10 11:21:17

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

本文基于mapboxGL实现地图的分享功能，并通过qrcode.js生成二维码。

实现

1. 实现思路

将地图的状态和数据存储在style中；
生成惟一的mapid和style一并存储；
通过url访问的时候带着mapid，通过mapid先请求样式，再生成地图。

2. 实现代码

获取style，生成唯一mapid

function randomString(len = 32){
    //默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
    const chars = 'abcdefhijkmnprstwxyz2345678';
    let tempLen = chars.length, tempStr='';
    for(let i = 0; i < len; ++i){
        tempStr += chars.charAt(Math.floor(Math.random() * tempLen ));
    }
    return tempStr;
}
function generateQrcode(text) {
    const size = 200
    new QRCode('qrcode', {
        text: text,
        width: size,
        height: size,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });
}
function shareMap () {
    let style = map.getStyle()
    style.center = map.getCenter().toArray()
    style.zoom = map.getZoom()
    const mapId = randomString()
    const url = `https://www.lzugis.cn/preview.html?mapId=${mapId}`
    document.getElementById('mapUrl').innerText = url
    console.log(style)
    generateQrcode(url)
}

访问分享地图,url为https://www.lzugis.cn/preview.html?mapId=htfbk4wihpczjkktsxwjbsf254pdtp47

function getQueryString(name) {
  const url_string = window.location.href;
  const url = new URL(url_string);
  return url.searchParams.get(name);
}

const mapId = getQueryString('mapId ')
fetch(`https://www.lzugis.cn/getStyle?mapId=${mapId }`).then(res => res.json()).then(res => {
  const map = new mapboxgl.Map({
        container: 'map',
        style: res,
        attributionControl: false
    });
})

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-06-05，如有侵权请联系 cloudcommunity@tencent.com 删除

存储