最近停车场有个需求,需要将所有的停车场展示到高德地图上。这本来不是一个很难的需求,不过由于需要将高德地图嵌入到echarts控件中,所以这里面有一些技术细节需要开发者注意。

具体的做法步骤如下:

一、安装echarts和echarts-extension-amap(高德地图扩展库)

npm i echarts@5.0.0
npm i echarts-extension-amap@1.6.0

二、index.html中加载高德地图相关js

<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?key=你的高德地图key&v=1.4.16&plugin=AMap.Autocomplete,Autocomplete,AMap.Geocoder,Geocoder,AMap.Geolocation,Geolocation,AMap.Scale,Scale,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=myInit"
></script>
<script
  src="https://webapi.amap.com/ui/1.1/main-async.js"
  type="text/javascript"
></script>
<script>
  window.myInit = function() {
    initAMapUI(); //这里调用initAMapUI初始化
  };
</script>

地图js加载时最后加了&callback=myInit,是在加载完js后执行回调函数myInit,在这个方法中执行AMapUI初始化。

注意:需要将高德地图的key置换成自己的key

三、在组件中import

代码示例:

import * as echarts from "echarts";
import "echarts-extension-amap";

四、在工程内使用的方法

代码示例:

let chart = echarts;
this.amapChart = chart.init(document.getElementById("mapBox"));

五、详细的代码示例

html样式代码:

<template>
  <div id="mapBox" class="map-box"></div>
</template>

data配置代码:

data() {
    return {
      chartOption: {
        // 加载 amap 组件
        amap: {
          // 高德地图中心经纬度
          center: [105.82205, 36.09491],
          // 高德地图缩放
          zoom: 5,
          // 启用resize
          resizeEnable: true,
          // 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
          renderOnMoving: true,
          // 自定义地图样式主题
          mapStyle: "amap://styles/blue"
          // 说明:如果想要添加卫星、路网等图层
          // 暂时先不要使用layers配置,因为存在Bug
          // 建议使用amap.add的方式
          // 其他高德地图支持的初始配置项都可以在这里配置
        },
        tooltip: {
          trigger: "item"
        },
        animation: true,
        series: [
          {
            name: "停车场",
            type: "scatter",
            // 使用高德地图坐标系
            coordinateSystem: "amap",
            data: [],
            symbolSize: 8,
            encode: {
              // 编码使用数组中第三个元素作为value维度
              value: 2
            },
            tooltip: {
              formatter: (param, ticket, callback) => {
                if (this.loading) return;
                this.loading = true;
                let val = param.value;
                if (this.parkCurId !== val[2]) {
                  this.parkCurId = val[2];
                  setTimeout(async () => {
                    let result = await parkStatistic({ parkId: val[2] });
                    this.parkData = result.data;
                    this.loading = false;
                    callback(
                      ticket,
                      param.name +
                        ":<br />总通道数量:" +
                        this.parkData.totalChannel +
                        "<br />总车位数量:" +
                        this.parkData.totalCarport
                    );
                  }, 0);
                } else {
                  this.loading = false;
                  callback(
                    ticket,
                    param.name +
                      ":<br />总通道数量:" +
                      this.parkData.totalChannel +
                      "<br />总车位数量:" +
                      this.parkData.totalCarport
                  );
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#eac736"
              }
            }
          }
        ]
      },
      amapChart: null
    };
  },

加载动态数据,initMapChart方法:

initMapChart(parks) {
  this.amapChart = echarts.init(document.getElementById("mapBox"));
  let myData = [];
  if (parks && parks.length > 0) {
    for (let i = 0; i < parks.length; i++) {
      myData.push({
        name: parks[i].parkName,
        value: [
          parks[i].addLon,
          parks[i].addLat,
          parks[i].parkId,
          parks[i].parkName
        ]
      });
    }
  }
  this.chartOption.series[0].data = myData;
  this.amapChart.setOption(this.chartOption);
},

设置地图中心点:

// 设置地图中心点
setCenterOption(lng, lat) {
  this.chartOption.amap.center = [lng, lat];
  this.amapChart.setOption(this.chartOption, false);
}

悬停弹窗效果:

image2021-8-5_14-17-10.png

六、在vue工程中使用高德地图

如果项目中用到vue-amap,需要与index.html引入的高德地图js版本对应:

import VueAMap from "vue-amap";
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  key: "你的高德地图key",
  plugin: [
    "AMap.Autocomplete",
    "AMap.Geocoder",
    "AMap.Geolocation",
    "AMap.Scale"
  ],
  v: "1.4.16",
  uiVersion: "1.1"
});

说明:当前后台项目使用的vue-amap的版本为0.5.10,可以与以上设置配合使用。