@lqs469/map-chart

Map-chart ·

A Vue.js component of map-visualization

Install

NPM

Usage

Suggest to cast a glance at Configuration GUI.

<MapChart :config="config" />

Configurations

config = {
  enableKeys: true,
  controlEnabled: true,
  width: window.innerWidth,
  height: window.innerWidth * (1080 / 1920),
  earthUrl: '', // 地球纹理
  starUrl: '', // 背景星空纹理
  countryUrl: '', // 国境线纹理
  radius: 50,
  camera: [-31.85, 66.48, -94.05],
  sphere: [-8, 0, 0],
  drawCountry: false,
  ambientLight: {
    color: 0xffffff,
    intensity: 5,
  },
  directionalLight: {
    color: 0xffffff,
    position: [300, 350, -210],
    intensity: 0.8,
  },
  ring: {
    redRingUrl:
      'http://a.amap.com/insight/static/map-chart-components/bubble-1.png',
    redRingSize: [3, 4],
    redRingUpdateTime: 16,
    yellowRingUrl:
      'http://a.amap.com/insight/static/map-chart-components/bubble-2.png',
    yellowRingSize: [2, 3],
    yellowRingUpdateTime: 32,
    blueRingUrl:
      'http://a.amap.com/insight/static/map-chart-components/bubble-3.png',
    blueRingSize: [2, 2],
  },
  data: [
    {
      adcode: 330100,
      center: '120.213196,30.261488',
      value: 0.19336917,
      x: 1,
      y: 1,
      label: true,
      showRank: true,
    },
    ...
  ],
};