echarts结合amap (echarts-extension-amap)

小咪咪 2023-01-16 02:50 162阅读 0赞

**网上高德结合echarts资源太少了，有的还需要下载收费，自己踩了好多坑，最终实现了，我把这整理成文档，**

**一、是为了自己把知识记录下来**

**二、是为了方便别人尽量少总弯路**

### 实现效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

### 安装 ###

npm install echarts-extension-amap --save

### 首先 ###

在index.vue页面引入高德api

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>大数据平台</title>
        <script src="./static/js/ezuikit.js"></script>
        <script src="https://webapi.amap.com/maps?v=2.0&key=XXX&plugin=AMap.PolygonEditor"></script>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

### 地图页面 ###

import echarts from "echarts";
    import "echarts-extension-amap";
    export default {
      data() {
        return {
          linesData: {
            saddr: {
              name: "潼江河谷优质粮油现代农业园区",
              fromCoord: ["105.171696", "31.780457"],
            },
            eaddr: [
              {
                area: "苏仙区",
                province: "湖南省",
                detailaddr: "湖南省郴州s市",
                city: "郴州市",
                total: "1200000",
                eaddr: "113.082857,25.698858",
                name: "湖南省",
                value: "1200000",
                toCoord: ["113.082857", "25.698858"],
              },
              {
                area: "南昌县",
                province: "江西省",
                detailaddr: "江西省南昌是南昌县",
                city: "南昌市",
                total: "12000",
                eaddr: "115.835552,28.557603",
                name: "江西省",
                value: "12000",
                toCoord: ["115.835552", "28.557603"],
              },
              {
                area: "武侯区",
                province: "四川省",
                detailaddr: "成都市武侯区",
                city: "成都市",
                total: "1448200",
                eaddr: "104.07853,30.558076",
                name: "四川省",
                value: "1448200",
                toCoord: ["104.07853", "30.558076"],
              },
              {
                area: "涪城区",
                province: "四川省",
                detailaddr: "绵阳市龙门镇",
                city: "绵阳市",
                total: "2400000",
                eaddr: "104.689665,31.479566",
                name: "四川省",
                value: "2400000",
                toCoord: ["104.689665", "31.479566"],
              },
              {
                area: "双流区",
                province: "四川省",
                detailaddr: "成都市双流",
                city: "成都市",
                total: "1206000",
                eaddr: "104.155568,30.482416",
                name: "四川省",
                value: "1206000",
                toCoord: ["104.155568", "30.482416"],
              },
            ],
          },
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        convertData(data) {
          var res = [];
          let { saddr, eaddr } = data;
          for (var i = 0; i < eaddr.length; i++) {
            var dataItem = eaddr[i];
            res.push({
              fromName: saddr.name,
              toName: dataItem.name,
              coords: [saddr.fromCoord, dataItem.toCoord],
              value: dataItem.value,
            });
          }
          return res;
        },
        initMap() {
          const option = {
            backgroundColor: "transparent",
            //amap地图配置
            amap: {
              center: [113.74947682142859, 22.835607857142858],
              resizeEnable: true,
              mapStyle: "amap://styles/blue", //地图样式白色
              rotation: 10,
              zoom: 5, //缩放
              viewMode: "3D", //是否启用3d地图
              pitch: 35, //视角高度
              skyColor: "#33216a",
            },
            animation: true,
            series: [
              {
                type: "lines",
                zlevel: 2,
                coordinateSystem: "amap",
                symbolSize: 10,
                effect: {
                  show: true,
                  period: 6,
                  trailLength: 0,
                  symbol: "arrow",
                  symbolSize: 10,
                },
                lineStyle: {
                  normal: {
                    color: "#A6C84D",
                    width: 2, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: 0.3, //尾迹线条曲直度
                  },
                },
                data: this.convertData(this.linesData),
              },
              {
                name: 333,
                type: "effectScatter",
                coordinateSystem: "amap",
                // coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  brushType: "stroke",
                },
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    formatter: "{b}",
                  },
                },
                symbolSize: function (val) {
                  return 8;
                },
                itemStyle: {
                  normal: {
                    show: false,
                    color: "#A6C84D",
                  },
                  emphasis: {
                    areaColor: "#A6C84D",
                  },
                },
                data: this.linesData.eaddr.map(function (dataItem) {
                  return {
                    name: dataItem.name,
                    value: dataItem.toCoord.concat([dataItem.value]),
                  };
                }),
              },
              //被攻击点
              {
                type: "scatter",
                coordinateSystem: "amap",
                // coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  //涟漪特效
                  period: 4, //动画时间，值越小速度越快
                  brushType: "stroke", //波纹绘制方式 stroke, fill
                  scale: 10, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                  normal: {
                    show: true,
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: "{b}",
                    fontSize: 14,
                    textStyle: {
                      color: "#ff0",
                    },
                  },
                  emphasis: {
                    show: true,
                    color: "#A6C84D",
                  },
                },
                symbol: "pin",
                symbolSize: 100,
                itemStyle: {
                  color: "#A6C84D",
                },
                data: [
                  {
                    name: this.linesData.saddr.name,
                    value: this.linesData.saddr.fromCoord,
                  },
                ],
              },
            ],
          };
          var chart = echarts.init(document.getElementById("chart03"));
          chart.setOption(option);
          // 获取amap实例 
          var amap = chart.getModel().getComponent("amap").getAMap();        
          AMap.plugin('AMap.ToolBar',function(){//异步加载插件
            var toolbar = new AMap.ToolBar();
            amap.addControl(toolbar);
          });    
          // var satelliteLayer = new AMap.TileLayer.Satellite();//卫星图层
          // var roadNetLayer = new AMap.TileLayer.RoadNet();//道路图层
          // amap.add([satelliteLayer, roadNetLayer]);
        }, 
        
      },
    };

注意：在给amap添加控件的时候，网上好多写法是：

amap.addControl(new AMap.Scale());

amap.addControl(new AMap.ToolBar());

而我用这种方法，一直报错，开始以为是没有AMap，后来打印发现是有AMap的

![20210423154444380.png][]

分析：后来发现是 因为他们在因为amap的api时，已经定义了插件，例如：

![20210423155946155.png][]

后来我用这种方式顺利解决，或者在引入api时定义

AMap.plugin("AMap.ToolBar", function () {
            //异步加载插件
            var toolbar = new AMap.ToolBar();
            amap.addControl(toolbar);
          });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221022/ae43766fe95c4377b34067b58c709e0c.png
[20210423154444380.png]: /images/20221022/181f03c576a14c7987dff51554a5ebc6.png
[20210423155946155.png]: /images/20221022/c3eaedac503f430f9b157f7916b0f549.png