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

属性	说明	类型
el	容器	id 或者 dom 对象	非必须,默认为 body
getRegionData	获取区域 geojson 数据，需要返回Promise对象	Function	必填
center	重置坐标系中心点位置	Array	非必须
scale	坐标缩放级别	number	非必须
translate	坐标系偏移	Array	非必须
deepth	模型厚度	number	非必须
regionStyle	区域样式	object 具体查看 docs 中定义	非必须
borderStyle	边框样式	object 具体查看 docs 中定义	非必须
getTextureUrl	获取每个区域的贴图	Function	非必须
constrol	是否开启控件	boolean	非必须
debug	是否开启调试模式	boolean	非必须
rotateX	x 轴旋转角度	number,单位：角度	非必须
hiddenBottomBorder	是否底边轮廓	boolean	非必须
noLight	是否采用 MeshBasicMaterial 材质渲染模型（不受光照影响）	boolean	非必须
events	事件集合	Array<Event.Item>	非必须
mapReady	地图初始化完成回调函数	Function,参数为 map 对象	非必须

Event.Item

属性	说明	类型
type	类型	string
handler	回调函数	Function

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() {
        //...
      }
    }
  ]
})