vue-map-3d

1.0.4 • Public • Published

基于three.js和vue的3d地图组件

当前版本:v1.0.4

  基于three.js和vue的3d地图组件,开箱即用,灵活配置。

img

安装

# 安装项目依赖包
npm install vue-map-3d -S

使用

1.全局使用
    import VueMap3d from 'vue-map-3d';//插件导入
    Vue.use(VueMap3d);//全局注册
    <VueMap3d
       :width="800"
       :height="900"
       :options="{ baseConfig: { map: {...}, mapOutline:{...} } }"></VueMap3d>
       
注:map和mapOutline为地图数据,数据较大,图示省略没写,请传入真实标准地图数据(参数详情见下)。
    
    
2.局部使用
    import VueMap3d from 'vue-map-3d';//插件导入
    <VueMap3d
       :width="800"
       :height="900"
       :options="{ baseConfig: { map: {...}, mapOutline:{...} } }"></VueMap3d>
       
注:map和mapOutline为地图数据,数据较大,图示省略没写,请传入真实标准地图数据(参数详情见下)。

参数说明

1.scale:
  外部缩放参数,主要针对外部有 transform: scale;通过传入scale值,使地图事件模拟保持正确。
  
2.width:
  绘图区宽度。
  
3.height:
  绘图区高度。
  
1.options:
  地图配置,子级参数除options.baseConfig.map和options.baseConfig.mapOutline
均为可选,不传使用默认,传入覆盖默认:
  
  {
          background: 'none',//绘图区背景色
          baseConfig: {//地图基础配置
            map: {},//地图数据,子级区域轮廓数据(*必要参数)
            mapOutline: {},//地图外轮廓数据(*必要参数)
            rotation: [0, 0, 0],//地图部分旋转参数
            position: [0, 0, this.height / 15],//地图部分位置参数
            scale: 1,//地图部分缩放参数
            thickness: 35,//地图厚度
            rotateAnimation: {//地图旋转动画参数
              on: false,//开启地图自转功能(旋转开启后,请控制区域itemStyle透明度opacity为1,否则会出现标识黑底情况,three.js贴图使用透明材质,下面又叠加透明材质的bug,three.js框架bug,暂无法解决)
              speed: 1//自转速度
            },
            labelAnimation: true,//地图标识图标闪烁动画控制
            mapStyle: {//地图样式(注:地图分4层,最上层为子区域层,在options.itemStyle中配置,该处配置外轮廓主图3层样式)
              top: {//顶部薄片层
                color: '#056CE3',
                opacity: 0.3
              },
              center: {//中间厚度层
                color: '#004493',
                opacity: 0.5
              },
              bottom: {//底部薄片层
                color: '#0062DB',
                opacity: 1
              }
            },
            plate: {//底部旋转圆盘控制
              show: true,
              position: [0, 0, -this.height / 2],
              rotation: [0.8 * Math.PI, 0, 0]
            }
          },
          linesConfig: {//飞线配置参数
            show: false,
            type: 'dash',//飞线类型,可选dash(虚线)和solid(实线)
            color: '#F4E925',//飞线颜色
            symbolColor: '#F4E925',//飞线动画实体颜色
            symbolSize: 1,//飞线动画实体尺寸缩放控制
            height: 300,//飞线最高点高度
            symbolDefine(THREE){//自定义沿飞线运动的symbol实体,新手可查阅three.js相关手册
                       
              return new THREE.Mesh(new THREE.SphereGeometry(10, 50, 50), new THREE.MeshBasicMaterial({
                color: '#F4E925'
              }));
                       
           }
          },
          eventDebounceConfig: {//事件节流函数控制参数
            on: false,//是否开启事件节流函数
            duration: 50//节流时间
          },
          itemStyle: {//地图最上层子区域层样式配置
            normal: {//非激活状态
              color: '#00ccff',
              opacity: 0.2,
              borderColor: '#00DFFF'//轮廓线颜色
            },
            active: {//激活状态
              color: '#91D5FF',
              opacity: 0.3,
              borderColor: '#00DFFF'
            }
          },
          labelStyle: {//地图区域标识样式
            color: '#ffffff',
            fontSize: 14,
            icon: '',//使用base64编码图标
            iconWidth: 14,//图标尺寸宽
            iconHeight: 14//图标尺寸高
          },
          eventHooks: [{//地图事件监听
            type: 'click',//绑定事件类型
            active: true,//事件是否触发激活状态
            select: true,//事件是否触发区域选中
            handle(data){//事件触发回调句柄(data.data: 事件外传数据;data.e:事件详情参数,用于外部根据地图事件添加需要定位的dom元素相关功能)
  
              console.log(data);
  
            },
            cancelHandle(){//事件反向取消句柄,用于控制操作地图外让地图取消选中和某些外部handle触发功能
  
              console.log(999)
  
            }
          }, {
            type: 'mousemove',
            active: true
          }],
          series: [{//地图拓展功能
            type: 'item-data',//地图子区域数据绑定,样式自定义控制
            data: [{
              name: '合肥市',//区域名称
              code: '340100',//区域编码(优先使用code匹配item对应项,其次使用name,两者都无法匹配中则不处理)
              itemStyle: {},//覆盖options.itemStyle统一配置
              labelStyle: {},//覆盖options.labelStyle统一配置
              data: {//需要绑定的事件外传数据
                a: 1,
                b: 2
              }
            }]
          }, {
            type: 'line-data',//飞线数据,支持中文地名(请保持中文地名准确)和经纬度两种方式
            data: [['合肥市', '六安市'], [[117.283042, 31.86119], [116.2, 33.3]], ['合肥市', '宣城市']]//支持中文名和准确坐标两种方式
          }]
        }

Package Sidebar

Install

npm i vue-map-3d

Weekly Downloads

0

Version

1.0.4

License

none

Unpacked Size

7.45 MB

Total Files

16

Last publish

Collaborators

  • jkchen2