map-chart

v2.0.8

Published

7 months ago

#### 介绍

0High
0Medium
0Low

user-r

vue2 echarts map

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

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

回调

方法

通过$refs 方式调用

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

map-chart

介绍

Install

use

属性

customizeKey 配置选项说明

AmapInfo 配置选项说明

generateOption 配置选项说明

generateJson 配置选项说明

generateJson 配置选项说明

回调

方法