maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_
最终效果如图：（地图上添加一个“三维地图”的toolbar按钮，点击后在二维地图上贴上建好的三维模型点击显示弹框）
以下都在已经引入并且初始化maptalks地图的基础上，如何引入使用maptalks可以查看以下文章
https://www.nhooo.com/article/192983.htm
1、安装maptalks.three包
npminstallmaptalks.three
2、安装three包
npminstallthree
3、安装obj-loader和mtl-loader包
npmi--savethree-obj-mtl-loader
4、引入model模型文件到public下（放在这里是因为打包后读取路径问题，目前发现放在这里才能在打包后正确读取）
5、Vue页面代码
引入包
import*asTHREEfrom'three'
import*asmaptalksfrom'maptalks'
import{ThreeLayer}from'maptalks.three'
import{MTLLoader,OBJLoader}from'three-obj-mtl-loader'
初始化的地图对象是
this.map
下面是渲染三维模型的方法
//渲染三维
draw3D(){
constthat=this
//三维地图
varthree_flag=false
/////单体化交互开始
varINTERSECTED
this.map.on('click',function(e){
//console.log(e)
varraycaster=newTHREE.Raycaster()
varmouse=newTHREE.Vector2()
constcamera=threeLayer.getCamera()
constscene=threeLayer.getScene()
if(!scene)return
constsize=that.map.getSize()
constwidth=size.width;constheight=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
varintersects=raycaster.intersectObjects(scene.children,true)
//varintersects=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(vari=0;i'+
'浦软大厦详情 - 入驻企业：12家
- 登记人员：1000人
- 今日访客：100人
- 登记车辆：500辆
- 实时人数：0人
- 监控点位：0个
- 人脸门禁：0个
- 消防设施：0个