大屏项目_引入高德地图插件(2)

在events中引入高德地图插件

    const [mapEvents, setMapEvents] = useState({
        created: (aMap) => {
          let myMap = aMap;
          myMap.setLabelzIndex(150);
  
          //这里是将使用的插件进行注册，才可以使用，不然直接用会报错
          AMap.plugin(['AMap.DistrictSearch', 'AMap.Polygon'], () => {
            let opts = {
              subdistrict: 0,

              //是否返回行政区边界坐标点
              extensions: 'all',

              //设置查询行政区级别
              level: 'province',
            };
            
            //利用行政区查询获取路径
            let district = new AMap.DistrictSearch(opts);

            //区域3D边线
            // district.search('椒江区', function (status, result) {
            //   let bounds = result.districtList[0].boundaries;
            //   // rgba
            //   let color = '#0055ff';
            //   for (let i = 0; i < bounds.length; i += 1) {
            //     let line = new AMap.Object3D.ThinLine({
            //       path: bounds[i],
            //       color: color,
            //     });
            //     object3Dlayer.add(line);
            //   }
            // });

            //区域3D遮罩层
            district.search('椒江区', function (status, result) {
              let bounds = result.districtList[0].boundaries;
              
              // 实现遮罩层的原理就是找到目标的所有坐标点，进行划线和填充颜色
              let color = '#0055ff';
              for (let i = 0; i < bounds.length; i += 1) {
                let polygon = new AMap.Polygon({
                  map: myMap,
                  
                  // 坐标点
                  path: bounds[i],
                  
                  // 边线的宽度
                  strokeWeight: 3,
                  
                  // 边线的颜色
                  strokeColor: '#14C1FC',
                  
                  // 填充区域的颜色
                  fillColor: '#14C1FC',
                  
                  //填充区域的透明度
                  fillOpacity: 0.2,
                });
                polygons.push(polygon);
              }

              // 自适应区域，根据所画的的区域全部展示，达到自适应
              // myMap.setFitView();
            });
          });
        },
        click: (e) => {
          // console.log(e);
        },
      });

这里当时阅读官方文档，在案例中找到类似的，但在引入插件时需要注册，一切来源于官网