maptalks + 3。js + vue webpack实现二维地图上贴三维模型的方法是什么

这篇文章主要介绍maptalks + 3。js + vue webpack实现二维地图上贴三维模型的方法是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_

最终效果如图:(地图上添加一个“三维地图”的工具栏按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框)

以下都在已经引入并且初始化maptalks地图的基础上,如何引入使用maptalks可以查看以下文章https://www.jb51.net/article/192983.htm

1,安装maptalks.three包

npm maptalks安装。三

2,安装三个包

npm安装三

3,安装obj-loader和mtl-loader包

npm我——拯救three-obj-mtl-loader

4,引入模型模型文件到公共下(放在这里是因为打包后读取路径问题,目前发现放在这里才能在打包后正确读取)

5, vue页面代码

引入包

进口* 3 & # 39;3 # 39; 　　进口*从& # 39;maptalks maptalks& # 39; 　　进口{ThreeLayer} & # 39; maptalks.three& # 39; 　　进口{MTLLoader, OBJLoader} & # 39; three-obj-mtl-loader& # 39;

初始化的地图对象是

<代码>。地图

下面是渲染三维模型的方法

//渲染三维
　　draw3D () {
　　const=这//三维地图
　　var three_flag=false/////单体化交互开始
　　var分割的
　　this.map.on(& # 39;点击# 39;,函数(e) {//console.log (e)
　　var raycaster=new THREE.Raycaster ()
　　var鼠标=new THREE.Vector2 ()
　　const相机=threeLayer.getCamera ()
　　const场景=threeLayer.getScene ()
　　如果场景(!)回来
　　
　　常量大?that.map.getSize ()
　　const宽度=宽度;const高度=size.height
　　鼠标。x=(e.containerPoint。x/宽)* 2 - 1
　　鼠标。(y=) - (e.containerPoint.y/高度)* 2 + 1
　　
　　raycaster。setFromCamera(鼠标、摄像头等)
　　raycaster。linePrecision=3
　　
　　var相交=raycaster.intersectObjects (scene.children,真的)//var相交=raycaster.intersectObject(点);
　　如果(!相交)返回
　　如果(Array.isArray(交点),,相交。长度===0)回来
　　console.log(交点)//这里我们操作第一个相交的物体
　　如果(相交。长度比;0){
　　如果(交叉!=相交[0].object) {
　　如果(交叉){//INTERSECTED.material.color.setHex (INTERSECTED.currentHex);//INTERSECTED.scale.set (1 1 1);
　　如果(INTERSECTED.material。长度===未定义){
　　INTERSECTED.material.color.setHex (INTERSECTED.currentHex)
　　其他}{
　　(var=0;我& lt;INTERSECTED.material.length;我+ +){
　　INTERSECTED.material[我].color.setHex (INTERSECTED.currentHex)
　　}
　　}
　　}
　　交叉=相交[0].object//设置相交的第一个物体的颜色//交叉。currentHex=INTERSECTED.material [0] .color.getHex ();
　　有了交集。currentHex=16777215//将该物体设为随机的其他颜色//INTERSECTED.material。不透明度=0.2;//INTERSECTED.material。透明=true;//INTERSECTED.material。不透明度=0.2;//INTERSECTED.material。needsUpdate=true;//INTERSECTED.material。透明=false;//INTERSECTED.material.color.setHex (0 xff0000);
　　如果(INTERSECTED.material。长度===未定义){
　　INTERSECTED.material.color.setHex (0 x1e90ff)
　　其他}{
　　(var=0;我& lt;INTERSECTED.material.length;我+ +){
　　INTERSECTED.material[我].color.setHex (0 x1e90ff)
　　}
　　}
　　}////////////////var lonlat=e.coordinate
　　如果(真){={var选项
　　& # 39;autoOpenOn& # 39;: & # 39;零# 39;//设置为null如果不打开窗户当点击>//相对路径参数,
　　var mtlPath=process.env。BASE_URL + & # 39;模型/obj/& # 39;
　　var mtlName=& # 39; 3 d_puruan_new.mtl& # 39;
　　var objPath=process.env。BASE_URL + & # 39;模型/obj/& # 39;
　　var objName=& # 39; 3 d_puruan3.obj& # 39; 

关于process.env.BASE_URL的值可以在vue.config.js里自定义设置(cli3.0)

baseUrl: process.env。NODE_ENV===& # 39;生产# 39;,# 63;& # 39;/bcmp-web & # 39;:& # 39;/& # 39;

关于draw3D的代码我没有进行详细的解释,如果需要会出一个详细版的方法使用介绍

<强> Vue npm安装Vue常用依赖,axios, ui元素,mockjs

添加axios依赖:

npm安装axios

添加element-ui:

maptalks + 3。js + vue webpack实现二维地图上贴三维模型的方法是什么