我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_
最终效果如图:(地图上添加一个“三维地图”的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框)
以下都在已经引入并且初始化maptalks地图的基础上,如何引入使用maptalks可以查看以下文章
https://www.jb51.net/article/192983.htm
1、安装maptalks.three包
npm install maptalks.three
2、安装three包
npm install three
3、安装obj-loader和mtl-loader包
npm i --save three-obj-mtl-loader
4、引入model模型文件到public下(放在这里是因为打包后读取路径问题,目前发现放在这里才能在打包后正确读取)
5、Vue页面代码
引入包
import * as THREE from 'three' import * as maptalks from 'maptalks' import { ThreeLayer } from 'maptalks.three' import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader'
初始化的地图对象是
this.map
下面是渲染三维模型的方法
// 渲染三维 draw3D() { const that = this // 三维地图 var three_flag = false // ///单体化交互开始 var INTERSECTED this.map.on('click', function(e) { // console.log(e) var raycaster = new THREE.Raycaster() var mouse = new THREE.Vector2() const camera = threeLayer.getCamera() const scene = threeLayer.getScene() if (!scene) return const size = that.map.getSize() const width = size.width; const height = size.height mouse.x = (e.containerPoint.x / width) * 2 - 1 mouse.y = -((e.containerPoint.y) / height) * 2 + 1 raycaster.setFromCamera(mouse, camera) raycaster.linePrecision = 3 var intersects = raycaster.intersectObjects(scene.children, true) // var intersects = raycaster.intersectObject(points); if (!intersects) return if (Array.isArray(intersects) && intersects.length === 0) return console.log(intersects) // 这里我们操作第一个相交的物体 if (intersects.length > 0) { if (INTERSECTED != intersects[0].object) { if (INTERSECTED) { // INTERSECTED.material.color.setHex(INTERSECTED.currentHex); // INTERSECTED.scale.set(1,1,1); if (INTERSECTED.material.length === undefined) { INTERSECTED.material.color.setHex(INTERSECTED.currentHex) } else { for (var i = 0; i < INTERSECTED.material.length; i++) { INTERSECTED.material[i].color.setHex(INTERSECTED.currentHex) } } } INTERSECTED = intersects[0].object // 设置相交的第一个物体的颜色 // INTERSECTED.currentHex = INTERSECTED.material[0].color.getHex(); INTERSECTED.currentHex = 16777215 // 将该物体设为随机的其他颜色 // INTERSECTED.material.opacity = 0.2; // INTERSECTED.material.transparent = true; // INTERSECTED.material.opacity = 0.2; // INTERSECTED.material.needsUpdate = true; // INTERSECTED.material.transparent = false; // INTERSECTED.material.color.setHex(0xff0000); if (INTERSECTED.material.length === undefined) { INTERSECTED.material.color.setHex(0x1E90FF) } else { for (var i = 0; i < INTERSECTED.material.length; i++) { INTERSECTED.material[i].color.setHex(0x1E90FF) } } } // ////////////// var lonlat = e.coordinate if (true) { var options = { 'autoOpenOn': 'null', // set to null if not to open window when clicking on map 'single': true, 'width': 410, 'height': 190, 'custom': true, 'autoCloseOn': 'click', 'dy': -316, 'content': '<div class="content build-content">' + '<div class="pop-img"><img src="/UploadFiles/2021-04-02/1544760152593.jpg">上面这段代码需要注意的是模型数据文件的读取路径
// 相对路径参数, var mtlPath = process.env.BASE_URL + 'model/obj/' var mtlName = '3d_puruan_new.mtl' var objPath = process.env.BASE_URL + 'model/obj/' var objName = '3d_puruan3.obj'关于process.env.BASE_URL的值可以在vue.config.js里自定义设置(cli3.0)
baseUrl: process.env.NODE_ENV === 'production' "color: #ff0000">补充知识:Vue npm安装Vue常用依赖,axios、element ui、mockjs
添加axios依赖:
npm install axios
添加element-ui:
npm i element-ui -S
添加 mockjs:
npm install mockjs
以上这篇maptalks+three.js+vue webpack实现二维地图上贴三维模型操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]