ThreedMap

一款基于three.js,3d vue插件，个性化设置，快速构建地图模型，
2 基于threejs的三维地图工具开发
研发目的： UI设计原先设计稿中客户要求的三维地图前端无法实现，gis这边也无法实现相关效果，考虑到后续这种需求可能会比较多，于是我们部门决定研发一套专门针对三维地图的开发工具
主要功能：
1支持标准的geojson格式的数据导入，通过导入json数据转换成可视化的三维地图模型；
2 支持地图凹凸影像贴图、边界线动画、地图飞线功能、自定义地图定位点功能、渐变色立体地图功能、三维文字功能、其他一些辅助功能。
3 对地图进行国家级、省级、地市级、区县级、街道级别的分级，系统内置各个级别的地图数据，可根据需要导出相应级别的三维地图（部分重点省份的数据可支持到街道），

HOW TO USE ?

for js;

 1  npm install threedmap
 2  import {ThreedMap} from 'threedmap'
 3  var map = new ThreedMap ('el')   // 需要挂载的dom节点
 4  map.clickMap = (data, $event)=>{..}  // 注册点击事件，点击的数据，$evnt 鼠标参数
 5  map.setJSON(datajson)            // 需要切换的json数据

for vue (vue2 only)

 // main.js
import Vue from 'vue'
import App from './App.vue'

import ThreedMap  from  'threedmap'
Vue.use(ThreedMap)

// 在全局页面
 <template>
   <ThreedMap type="3D" :jsonData='json' :scale="1.2" @target="target"></ThreedMap>
</template>

<script>
import json from '../public/testmap.json'
export default {
  data() {
    return {
         json: json,
    }
  },
  methods: {
    target(value) {
        consloe.log("当前的点击对象是")
         
    }
  }
}
</script>
<style>
.ThreedMap {
  width: 300px;
  height: 300px;
}
</style>

查看示例

  /example/index.html 查看演示效果

### 新增贴图功能 2022 08 22
### nothing 1.2  边界线动效
### nothing 1.3  添加切换动效.修复

Customize configuration

更多详情 ThreedMap软件UI部.