例子

使用

<template>
  <demo-view :map-options="mapOptions" @map-click="onMapClick">
    <template v-slot:control>
      <a-form-item label="类型">
        <a-radio-group v-model="type">
          <a-radio-button value="world">World</a-radio-button>
          <a-radio-button value="country">Country</a-radio-button>
          <a-radio-button value="province">Province</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="国家" v-if="type === 'country'">
        <a-select v-model="country.soc" @change="onCountryChange">
          <a-select-option
            v-for="(country, soc) in country.countries"
            :key="soc"
            :value="soc"
            >{{ country.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="省份" v-if="type === 'province'">
        <a-select v-model="province.adcode[0]">
          <a-select-option
            v-for="prov in adcodes"
            :key="prov.adcode"
            :value="prov.adcode"
            >{{ prov.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="opacity">
        <a-slider
          v-model="opacity"
          :min="0"
          :max="1"
          :step="0.1"
          style="width: 180px;"
        />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-district-layer-world
        v-if="type === 'world'"
        ref="layer"
        :opacity="opacity"
        :styles="world.styles"
      />

      <amap-district-layer-country
        v-if="type === 'country'"
        ref="layer"
        :opacity="opacity"
        :soc="country.soc"
        :depth="2"
        :styles="country.styles"
      />

      <amap-district-layer-province
        v-if="type === 'province'"
        ref="layer"
        :opacity="opacity"
        :depth="2"
        :adcode="province.adcode"
        :styles="province.styles"
      />
    </template>
  </demo-view>
</template>

<script>
const adcodes = Object.freeze(require('../../public/assets/data/adcodes.json'));
const GDPSpeed = require('../../public/assets/data/gdp-speed.json');
const colors = {};
function getColor(key, type) {
  if (!key) return 'rgb(200,200,240)';
  if (!colors[key]) {
    if (type === 'world') {
      const R = key.charCodeAt(0) * 2;
      const G = R; // key.charCodeAt(1) * 2
      const B = 255;
      colors[key] = 'rgb(' + R + ',' + G + ',' + B + ')';
    } else if (type === 'country') {
      const gdp = GDPSpeed[key];
      if (!gdp) {
        // 没有GDP数据
        const rg = Math.random() * 155 + 50;
        colors[key] = `rgb(${rg}, ${rg}, 255)`;
      } else {
        const rg = 255 - Math.floor(((gdp - 5) / 5) * 255);
        colors[key] = 'rgb(' + rg + ',' + rg + ',255)';
      }
    } else {
      const gb = Math.random() * 155 + 50;
      colors[key] = 'rgb(' + gb + ',' + gb + ',255)';
    }
  }

  return colors[key];
}

export default {
  data() {
    return {
      adcodes,
      type: 'world',
      opacity: 1.0,
      map: {
        showIndoorMap: false,
        isHotspot: false,
      },
      world: {
        map: {
          center: [100, 36],
          zoom: 3,
        },
        styles: {
          // 颜色格式: #RRGGBB、rgba()、rgb()、[r,g,b,a]
          'nation-stroke': props => {
            //props:{type:Nation_Border_China/Nation_Border_Foreign}
            if (props.type == 'Nation_Border_China') {
              return 'red';
            } else {
              return 'white';
            }
          },
          'coastline-stroke': [0.8, 0.63, 1, 1],
          fill: props => {
            return getColor(props.SOC, 'world');
          },
        },
      },
      country: {
        map: {
          zoom: 3,
          center: [108.915184, 39.109677],
        },
        countries: {
          CHN: {
            name: '中国',
            map: { zoom: 3, center: [108.915184, 39.109677] },
          },
          RUS: {
            name: '俄罗斯',
            map: { zoom: 3, center: [95.135754, 63.85731] },
          },
          USA: {
            name: '美国',
            map: { zoom: 3, center: [-113.877655, 52.652266] },
          },
          JPN: {
            name: '日本',
            map: { zoom: 5, center: [136.824904, 38.00712] },
          },
        },
        soc: 'CHN',
        styles: {
          'nation-stroke': '#22ffff',
          'coastline-stroke': [0.85, 0.63, 0.94, 1],
          'province-stroke': 'white',
          'city-stroke': 'rgba(255,255,255,0.5)', //中国特有字段
          fill: props => {
            //中国特有字段
            return getColor(props.adcode_pro || props.NAME_CHN, 'country');
          },
        },
      },
      province: {
        map: {
          center: [116.796948, 39.467825],
          zoom: 6,
        },
        adcode: [130000],
        styles: {
          fill: props => {
            // properties为可用于做样式映射的字段，包含
            // NAME_CHN:中文名称
            // adcode_pro
            // adcode_cit
            // adcode
            const adcode = props.adcode;
            return getColor(adcode, 'province');
          },
          'province-stroke': 'cornflowerblue',
          'city-stroke': 'white', // 中国地级市边界
          'county-stroke': 'rgba(255,255,255,0.5)', // 中国区县边界
        },
      },
    };
  },
  computed: {
    mapOptions() {
      return {
        ...this.map,
        ...this[this.type].map,
      };
    },
  },
  methods: {
    onCountryChange(soc) {
      const country = this.country.countries[soc];
      this.country.map = country.map;
    },
    onMapClick(e) {
      const layer = this.$refs.layer;
      if (layer.getDistrictByContainerPos) {
        const info = layer.getDistrictByContainerPos(e.pixel);
        const json = JSON.stringify(info, null, '  ');
        this.$message.info(`点击拾取到了行政区: ${json}`);
      }
    },
  },
};
</script>