百度地图实现区域高亮

已经封装位 api , 直接调用就可以

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <style>
    .bmap {
      height: 100vh;
    }
  style>
  
  <script src="https://api.map.baidu.com/api?v=3.0&ak=xxxx&styleId=">script>
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">script>
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js">script>

  <div id="bmap" class="bmap">div>
  <script src='./index.js'>script>
  <script>
    var myChart = echarts.init(document.getElementById('bmap'))
    option = {
      title: {
        text: '',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function (res) {
          return res.name + ':' + res.value[2]
        }
      },
      bmap: {
        center: [121.480509, 31.23592, 10],
        zoom: 10,
        roam: true,
        mapStyle: {
        },
      },
      series: [
        {
          name: '测试',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: [
            { name: '上海', value: [121.480509, 31.23592, 10] },
            { name: '南京', value: [118.804147, 32.070037, 10] }
          ],
          symbolSize: function (val) {
            return val[2]
          },
          rippleEffect: {
            brushType: 'stroke'
          },
          itemStyle: {
            normal: {
              color: '#ff0000',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          }
        }
      ]
    }
    myChart.setOption(option)
    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.setMapStyleV2({
      styleId: '5c067ea626775da3d2131d4b41d04363'
    });

    // getBoundary()

    const distirctList = [{ name: '南京', color: 'red' }, { name: '上海', color: 'black' }]

    const mapHightLight = new MapHightLight(BMap, bmap)

    mapHightLight.getDistricts(distirctList)
  script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

class MapHightLight {
  constructor(BMap, bmapInstance) {
    this.BMap = BMap
    this.bmapInstance = bmapInstance
  }
  /**
   * @description: 获取当前区域的路径坐标
   * @param {*} distirct
   * @return {*}
   */
  #getDistrict(distirct) {
    const bdary = new this.BMap.Boundary();
    return new Promise((resolve, reject) => {
      bdary.get(distirct.name, function (res) {
        resolve({
          ...distirct,
          points: res.boundaries.reduce((pre, next) => {
            pre.push(next)
            return pre
          }, [])
        })
      });
    })
  }


  #drawBoundary(districts) {
    const pointArray = [];
    for (const district of districts) {
      const { name, color } = district
      for (const point of district.points) {
        const ply = new this.BMap.Polygon(point, {
          strokeWeight: 1, //边框宽度
          strokeColor: "red", //边框颜色
          fillColor: color //填充颜色
        }); //建立多边形覆盖物
        ply.name = name;
        this.bmapInstance.addOverlay(ply);
        const path = ply.getPath();
        pointArray.push(...path);
      }
    }
    this.bmapInstance.setViewport(pointArray)
  }

  /**
   * @description: 获取当前区域的路径坐标
   * @param { Array } distirct
   * @return {*}
   */
  getDistricts(distirctList) {
    const promiseList = distirctList.reduce((pre, distirct) => {
      pre.push(this.#getDistrict(distirct))
      return pre
    }, [])

    Promise.all(promiseList).then(res => {
      this.#drawBoundary(res)
    })
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在这里插入图片描述
百度地图
 百度地图 api 类文档
 ecahrts amap
高亮参考

相关阅读:
CVE-2022-42475-FortiGate-SSLVPN HeapOverflow 学习记录
 PaddleOCR学习笔记1-初步尝试
 Linux-进程管理
 提升测试工具开发的思考
 C++算法：最少翻转操作数
 Metasploit介绍
 nordic平台SDK包下载地址
 【论文阅读】（CVPR2023）用于半监督医学图像分割的双向复制粘贴
 工科top1——清华大学出招生简章了，一起来看看吧
 【快速学习系列】Mybatis缓存和使用SpringBoot开启MyBatis缓存+ehcache
原文地址：https://blog.csdn.net/weixin_43191327/article/details/126668325

百度地图实现 区域高亮

百度地图实现区域高亮