geojson镇级别的数据去这里下POI数据|POI兴趣点|POI数据库|POI兴趣点下载|POI数据下载|最新POI数据库|最全POI数据库|谷歌POI数据库|2023年POI数据库 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>(原始的html页面引入axios,vue的自己装一下再引)
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=密码"></script>(没有去申请) <script src="https://mapv.baidu.com/build/mapv.min.js"></script> <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.127/dist/mapvgl.min.js"></script>
<script type="text/javascript">var bmapgl = new BMapGL.Map('map_container'); bmapgl.enableScrollWheelZoom(true);// 开启鼠标滚轮缩放 var point = new BMapGL.Point(109.124578,38.3241); bmapgl.centerAndZoom(point, 13); bmapgl.setMapStyleV2({styleJson:eval("baiduMapStyle")});//地图颜色
axios.get('../../css/json/18924.geojson').then(async(res) => {const areas = []for (let i = 0; i < res.data.features.length; i++) {let villages = []const villagesPoints = res.data.features[i].geometry.coordinates[0][0]for (let j = 0; j < villagesPoints.length; j++) {areas.push(villagesPoints[j].toString())}villages = villages.join(';')areas.push(villages)}console.log("areas",areas)const path = []for (let z= 0;z < areas.length-1; z++){let villages = []villages = areas[z].split(",");path.push(new BMapGL.Point(villages[0],villages[1]));}console.log("path",path)var mapmask = new BMapGL.MapMask(path, {isBuildingMask: true,isPoiMask: true,isMapMask: true,showRegion: 'inside',topFillColor: '#5679ea',topFillOpacity: 0.5,sideFillColor: '#5679ea',sideFillOpacity: 0.9});bmapgl.addOverlay(mapmask);var border = new BMapGL.Polyline(path, {strokeColor: '#4ca7a2',strokeWeight: 3,strokeOpacity: 1});bmapgl.addOverlay(border); })
</script>
帮人帮到底,需要用到的东西都给你们加上