map-chart

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	是	--	见下面配置选项
useAmap	是否开启高德地图	Boolean	否	false	--
AmapInfo	高德地图配置信息，参考高德	Object	是	--	见下面配置选项
echartsEvents	配置 echarts 事件	Array	否	--	见下面配置选项
drillDown	配置下钻方式	String	否	click	dblclick 双击下钻｜ off 关闭下钻
drillingDownLevels	可下钻层级	String	否	'3'	1-4
generateOption	echarts option 具体参考https://echarts.apache.org	Function	是	--	见下面配置选项
generateJson	用户自定义图层 json	Function	否	--	见下面配置选项
mapData	业务数据	Array	是	--	--
redrawMapView	自定义 echarts 图层名称、区块合并、删除	Object	否	--	见下面配置选项
loadingCfg	自定义 echarts 加载动画 参考https://echarts.apache.org	Object	否	--	--

customizeKey 配置选项说明

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

AmapInfo 配置选项说明

详细配置参考高德开发者平台
const AMapInfo = {
  security: '', // 初始化时加载秘钥
  key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
  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',
  },
  AMapUIPlugins: ['overlay/SimpleMarker', 'geo/DistrictExplorer'],
}

echartsEvents 配置选项说明

computed: {
    echartsEvents() {
      return [
        {
          type: 'click',
          handler: (e) => {
            console.log('自定义事件', e)
          },
        },
      ]
    },
  },

generateOption 配置选项说明

async generateOption() {
      // 模拟业务数据
      const adcode = this.getNowAdcode()
      const areaDataJson = await this.districtExplorer.loadAreaNode(adcode)
      const mokeData = areaDataJson.features.map((item) => {
        return {
          name: item.properties.name,
          value: (Math.random() * 1000).toFixed(2),
          adcode: item.properties.adcode,
          org_id: (Math.random() * 1000).toFixed(0),
        }
      })
      this.mapData = mokeData
      // echartsOption为echarts option对象
      return echartsOption(mokeData)
    }

generateJson 配置选项说明

配置 echarts 地图 在内部 json 不满足使用情况时 支持自定义 json adcodeArr： 需要替换自定义 json 的 adcode handler: 自定义 json 获取方式

generateJson() {
      return {
        adcodeArr: ['210000', '220000', '222400'],
        handler: async (adcode) => {
          // 模拟数据自定义数据
          console.log('模拟数据自定义数据')
          const areaDataJson = await this.districtExplorer.loadAreaNode(adcode)
          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	高德地图初始化	map:高德实例对象, aMapUIPlugins:配置的插件
enter-amap	进入高德地图时触发	json：当前层级信息
leave-amap	离开高德地图时触发	--

方法

通过$refs 方式调用

方法名称	说明	参数
drillUpEventRef	上钻	目标区域 adcode
drillDownEventRef	下钻	目标区域 adcode
updateEchartsMapDataRef	更新 echarts 数据	--
showAmapRef	显示高德地图	--
hideAmapRef	隐藏高德地图	--