map-chart v2.0.6

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 配置选项说明

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,
    },
  ],
})

事件

方法

通过$refs 方式调用