region-map v0.11.1

RegionMap

基于 THREEJS 的三维地图模型

功能

• 三维地图倾斜模型展示
• 添加自定义 DOM 节点
• 纹理贴图
• 事件检测
• 3d 柱状图
• 2d 与 3d 飞线

效果

安装

npm install region-map --save

使用

基本使用

import RegionMap from 'region-map'

const options = {
  ///...
  getTextureUrl(property: any) {
    if (property.adcode == '610100') {
      return getTextureByImageUrl('xa.png')
    }
    let url = Math.random() > 0.5 ? 'tt.png' : 'aa.jpg'
    return getTextureByImageUrl(url)
  }
}

class MyRegion extends RegionMap {
  constructor(options) {
    super(options)
  }
}
///...

飞线

import RegionMap from 'region-map'
import createFlyLineFactory from 'region-map/lib/effects/FlyLine.js'

const options = {
  mapReady: map => {
    //创建飞线
    let line = createFlyLineFactory(regionMap)
    line.createFlyLine([108.946016, 34.384795], [109.731926, 38.303278])
  }
}

class MyRegion extends RegionMap {
  constructor(options) {
    super(options)
  }
}
const regionMap = new MyRegionMap(options)

分区域贴图

region-map在渲染每个区域的时候会调用getTextureUrl,在getTextureUrl中需要用getTextureByImageUrl将对应贴图的texture对象返回：

const options = {
  //...
  //获取贴图方法
  getTextureUrl(property: any) {
    return getTextureByImageUrl(`ll/${property.adcode}.png`)
  }
}

添加 Marker

利用getViewportPositionFromLonlat可以将经纬度转换为相对于外部容器的left、top值，之后需要将添加的 DOM 节点绝对定位。

<template>
  <div class="region-map-wrapper">
    <div ref="map" class="region-map"></div>
    <div class="map-markers" v-if="showMarkers">
      <!--添加marker-->
      <i v-for="item in markers" :style="computedPosition(item)"></i>
    </div>
  </div>
</template>
<script>
  import RegionMap from 'region-map'
  export default {
    data() {
      return {
        markers: [[longtitude, latitude]],
        showMarkers: false
      }
    },
    mounted() {
      this.initRegionMap()
    },
    methods: {
      initRegionMap() {
        this.regionMap = new RegionMap({
          el: this.$refs.map,
          //...,
          mapReady: () => {
            this.initMarker()
          }
        })
      },
      initMarker() {
        this.showMarkers = true
      },
      computedPosition(location) {
        const [left, top] = this.regionMap.getViewportPositionFromLonlat(location)
        return {
          left: left + 'px',
          top: top + 'px'
        }
      }
    }
  }
</script>
<style>
  .region-map-wrapper {
    position: relative;
    left: 0;
    right: 0;
  }
  .region-map {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .map-marker {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
  }
</style>

Options

Event.Item

API 📕

setOptions 重新设置配置项，类似 echarts,传入的 options 会和原来的options合并

regionMap.setOptions({
  getRegionData() {
    return axios.get('xa.json').then(res => res.data)
  },
  borderStyle: {
    color: 0x00ff00,
    linewidth: 5
  },
  regionStyle: {
    color: 0x8d8d8d
  }
})

❗ 注意:重新设置events并不会生效

//此操作无效 ❌
regionMap.setOptions({
  events: [
    {
      type: 'mousemove',
      handler() {
        //...
      }
    }
  ]
})