map-chart

介绍

基于 echarts+AMap 集成的支持地图下钻 vue2 组件 数据维护 依靠 adcode

Install

pnpm add map-chart

use

import Vue from 'vue'
import MapChart from 'map-chart'
Vue.use(MapChart)

<!-- or -->
import { MapChart } from 'map-chart'

属性

属性	说明	类型	是否必传	默认值	可选值
customizeKey	配置选项	Object	是	--	见下面配置选项
amapInfo	高德地图配置信息，参考高德	Object	是	--	若不配置，则默认不实用高德地图相关功能，useAmap 无法开启见下面配置选项
useAmap	是否开启高德地图	Boolean	否	false	开启后会根据设定图层层级(mapHierarchy),将最后一层改为高德地图展示
mapHierarchy	地图层级各省-各市-各区	Number	是	3	1-4
drillDown	配置下钻方式	String	否	click	dblclick 双击下钻｜ off 关闭下钻
generateOption	echarts option 具体参考https://echarts.apache.org	Function	是	--	见下面配置选项
generateJson	用户自定义图层 json	Function	否	--	见下面配置选项
mapData	业务数据	Array	是	--	--
redrawMapView	自定义 echarts 图层名称、区块合并、删除	Object	否	--	见下面配置选项
loadingCfg	自定义 echarts 加载动画 参考https://echarts.apache.org	Object	否	--	--
openLog	开启日志	Boolean	否	false	--

customizeKey 配置选项说明

参数	说明	类型
userKey	业务数据 key	string
value	业务数据 value	string
adname	初始地图名称	string
adcode	初始 adcode	string
amapDomId	自定义高德地图渲染 dom	string

AmapInfo 配置选项说明

详细配置参考高德开发者平台
const AMapInfo = {
  security: '', // 初始化时加载秘钥
  key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: [
    'AMap.PolyEditor',
    'AMap.MarkerClusterer',
    'AMap.Driving',
    'AMap.DistrictSearch',
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Walking',
    'AMap.Riding',
    'AMap.DragRoute',
    'AMap.MassMarks',
    ...
  ],
  amap: {
    rotateEnable: true, //控制地图是否可以旋转
    pitchEnable: true, //控制地图是否可以倾斜
    terrain: true, // 开启地形图
    pitch: 50, //初始化角度
    viewMode: '2D', //是否为3D地图模式
    zoom: 12, //初始化地图级别
    center: [113.17, 23.8], //初始化地图中心点位置113°17',北纬23°8'
    mapStyle: '', //初始化地图样式
  },
  AMapUI: {
    version: '1.0',
    plugins: ['overlay/SimpleMarker', 'geo/DistrictExplorer'],
  },
}

generateOption 配置选项说明

generateOption() {
      // 模拟业务数据
      const mokeData = [{
        adcode:110000,
        name:"北京市",
        org_id:"566",
        value:"942.10"
      },
      {
        adcode:120000,
        name:"天津市",
        org_id:"16",
        value:"942.10"
      },
      ...
      ]
      return echartsOption(mokeData)
    }

generateJson 配置选项说明

配置 echarts 地图的 json 数据自定义入口 1、不启用高德套件时自动调用该方法 2、启用高德套件时但需自定义部分地图区域时根据 adcodeArr 的传入项 自动调用该方法 adcodeArr： 需要替换自定义 json 的 adcode handler: 自定义 json 获取方式

generateJson() {
      return {
        adcodeArr: ['210000', '220000', '222400'],
        handler: async (adcode) => {
          // 跟组业务自行实现获取json方法
          const areaDataJson = { features: areaDataJson.getSubFeatures() }
          return areaDataJson
        },
      }
    },

generateJson 配置选项说明

const redrawMapView = Object.freeze({
  210000: [
    {
      adcodeTarget: [210200],
      properties: {
        name: '自定义名称',
        adcode: 210200, // 自定义adcode 转 number
        centroid: [122.190893, 39.593378], // 图标展示位置
        cp: [122.190893, 39.593378], // 文字展示位置
      },
    },
    {
      adcodeTarget: [211300, 211400, 210400, 210100],
      properties: {
        name: '朝阳+葫芦岛',
        adcode: 211300, // 自定义adcode 转 number
        centroid: [120.451176, 41.576758], // 图标展示位置
        cp: [120.451176, 41.576758], // 文字展示位置
      },
    },
    {
      adcodeTarget: [210300],
      properties: {
        name: '鞍山新名字',
        adcode: 210300, // 自定义adcode 转 number
        centroid: [122.995632, 41.110626], // 图标展示位置
        cp: [122.995632, 41.110626], // 文字展示位置
      },
    },
    {
      adcodeTarget: [210500, 210600],
      delete: true,
    },
  ],
  440000: [
    {
      adcodeTarget: [440600, 440100],
      properties: {
        name: '广州+佛山',
        adcode: 440100, // 自定义adcode 转 number
        centroid: [113.122717, 24.028762], // 图标展示位置
        cp: [113.122717, 24.028762], // 文字展示位置
      },
    },
    {
      adcodeTarget: [441300],
      delete: true,
    },
  ],
})

回调

事件名称	说明	回调参数
update-stack	地图层级变化时触发	基本层级信息
created-amap	地图初始化	相关实例
enter-amap	进入高德地图时触发	json：当前层级信息
leave-amap	离开高德地图时触发	--

方法

通过$refs 方式调用

方法名称	说明	参数
drillUpEventRef	上钻	目标区域 adcode
drillDownEventRef	下钻	目标区域 adcode
drillMiddleEventRef	同级切换	目标区域 adcode、业务数据主键 key, 目标区域名称 name（存在父级图层时可不传）
updateEchartsMapDataRef	更新 echarts 数据	--
showAmapRef	显示高德地图	--
hideAmapRef	隐藏高德地图	--
setRegisterMapRef	地图注册	设置 echarts 地图 参数配置 https://echarts.apache.org/zh/api.html#echarts.registerMap