概述

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

效果

实现

1. 实现思路

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

2. 实现代码

获取style，生成唯一mapid

function randomString(len = 32){//默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1const 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 = 200new 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 = urlconsole.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});
})

mapboxGL地图分享功能的实现相关推荐

奥维怎么记录沿线轨迹_奥维地图最新功能—北斗星盒轨迹实时分享
原标题:奥维地图最新功能-北斗星盒轨迹实时分享奥维互动地图新版本(V7.6.7)推出了又一强大功能--设备位置采集实时上传至奥维服务器,并把历史位置分享给指定好友. 听起来不知所云,下面小编就为越野 ...
[功能发布]Excel催化剂地图可视化功能正式发布，欢迎使用！
地图可视化功能开发完成已过去1个多月,文章的阅读量与初定传播目标相差甚远. 但因着热爱分享的缘故,在阅读量未及预期时,仍然破例对其功能进行发布. 若真正喜爱Excel催化剂所开发的地图可视化,可通过完 ...
vue中，应用mapbox地图（一）——mapbox-gl地图设置中文是zh-Hans不是zh accessToken-访问令牌正确版本streets-v11
vue中,应用mapbox地图(一)--mapbox-gl地图设置中文是zh-Hans不是zh & accessToken-访问令牌 & 正确版本streets-v11 Mapbox ...
SuperMap iClient 9D for MapboxGL地图风格浅析
作者:dominating ###前言随着SuperMap iServer 9D的发布,iServer增加了许多的新功能,其中之一就是地图服务模块,矢量切片(tileFeature)资源增加了支持 ...
调用百度地图api实现地图查询功能
百度地图api功能强大,进入百度地图api平台之后首先需要注册申请一个ak码(其实就是权限码),通过审核之后就可以参考api提供的例子进行自定义的地图开发功能了. 在这里提供两个本人写好的地图查询功能 ...
java web 分享功能实现_微信开发（一）基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
java初始化微信分享_微信开发（一）基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
百度地图----检索功能的使用
百度地图--检索功能的使用 ONE Goal ,ONE Passion ! 上面几篇写了如何集成以及使用百度地图和覆盖物.现在就说说百度地图的检索功能; 目前百度地图SDK所集成的检索服务包括:POI ...
iOS单独集成QQ分享功能
2019独角兽企业重金招聘Python工程师标准>>> (1)首先,把TencentOpenAPI.framework.TencentOpenApi_IOS_Bundle.bundl ...

mapboxGL地图分享功能的实现

概述

效果

实现

1. 实现思路

2. 实现代码

mapboxGL地图分享功能的实现相关推荐

最新文章

热门文章