maptalks+three.js+vue webpack实现二维地图上贴三维模型操作

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

最终效果如图：（地图上添加一个“三维地图”的toolbar按钮，点击后在二维地图上贴上建好的三维模型点击显示弹框）

以下都在已经引入并且初始化maptalks地图的基础上，如何引入使用maptalks可以查看以下文章

http://www.zzvips.com/article/184419.html

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="http://pde56fqkk.bkt.clouddn.com/1544760152593.jpg"/><p class="pop-name build-pop-name" id="viewdetial"><span class="text-ellipsis" javascript" id="highlighter_300040"> ? // 相对路径参数, 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'
// 相对路径参数,
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'