百度地图BMapGL通过geojson数据画镇级别区域图，并掩膜其他区域不展示

溜溜仔仔

已于 2024-01-03 17:11:07 修改

阅读量1.5k

点赞数 11

文章标签： java

于 2024-01-03 17:00:10 首次发布

本文链接：https://blog.csdn.net/weixin_40935738/article/details/135367970

版权

文章介绍了如何使用axios从GeoJSON文件中获取数据，然后在BMapGL地图上标记POI兴趣点并创建地图掩模，展示了如何在JavaScript代码中实现地理信息可视化。

摘要由CSDN通过智能技术生成

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>

帮人帮到底，需要用到的东西都给你们加上