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

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

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章maptalks+three.js+vue webpack实现二维地图上贴三维模型操作由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

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

以下都在已经引入并且初始化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下（放在这里是因为打包后读取路径问题，目前发现放在这里才能在打包后正确读取）。

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

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 。

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

 
         // 渲染三维 
        
         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'

关于process.env.base_url的值可以在vue.config.js里自定义设置（cli3.0）。

baseurl: process.env.node_env === 'production' ? '/bcmp-web/' : '/'.

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

补充知识：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实现二维地图上贴三维模型操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/liona_koukou/article/details/85231410 。

 
         
          
         
         
         
         
          
           
          vue 
          Webpack 
          三维模型 
          二维地图 
          Three.JS 
          maptalks 
          
          
           
          
         
         
          
          延伸 · 阅读 
          
          
          2021-08-17详解vue中v-model和v-bind绑定数据的异同 
          2021-08-17vue+elementUI(el-upload)图片压缩,默认同比例压缩操作 
          2021-08-17使用vue引入maptalks地图及聚合效果的实现 
          2021-08-17vue-video-player实现实时视频播放方式(监控设备-r 
          2021-08-17解决vue+webpack项目接口跨域出现的问题 
          2021-08-17vue 导航锚点_点击平滑滚动,导航栏对应变化详解 
          
         
         
         
         
          
           
          
         
         
         
           精彩推荐 
          
         
         
          
           
            
           
          JavaScript 
            
            jQuery中offsetParent()方法用法实例 
            这篇文章主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使... 。 
             
             jQuery教程网 
             505 
             2021-07-16 
             
           
  
          JavaScript 
            
            jQuery实现表单提交时判断的方法 
            这篇文章主要介绍了jQuery实现表单提交时判断的方法,涉及针对表单提交时的判断方法,是非常实用的技巧,需要的朋友可以参考下... 。 
             
             jquerycn 
             681 
             2021-05-13 
             
           
  
          JavaScript 
            
            JS跨页面通信极简方案&纯前端实现文件下载 
            本文介绍的主要还是基于javascript，不涉及任何框架方面的问题(如果想研究vue，react，angular方面的技术问题，可以移步我的其他文章)，所以让我们用原生... 。 
             
             趣谈前端 
             1136 
             2021-04-06 
             
           
  
          JavaScript 
            
            js继承call()和apply()方法总结 
            本文介绍了js继承当中的call和apply方法，从定义到常用实例都做了分析，非常的实用，推荐给小伙伴们。... 。 
             
             JS教程网 
             650 
             2021-05-07 
             
           
  
          JavaScript 
            
            javascript实现修改微信分享的标题内容等 
            这篇文章主要介绍了javascript实现修改微信分享的标题内容等,需要的朋友可以参考下... 。 
             
             hebedich 
             1140 
             2021-05-11 
             
           
  
          JavaScript 
            
            Javascript前端UI框架Kit使用指南之kitjs的对话框组件 
            本文以kitjs对话框组件为例，给我们详细介绍了kitjs的组件目录、默认代码模板、构造器及初始方法、以及Kitjs继承。讲解的非常细致，对我们熟练掌握kit... 。 
             
             JavaScript教程网 
             1194 
             2021-04-27 
             
           
  
          JavaScript 
            
            JavaScript中获取样式的原生方法小结 
            这篇文章主要介绍了JavaScript中获取样式的原生方法小结,本文总结了5种JS获取样式的原生方法,并分别给出了实例,需要的朋友可以参考下... 。 
             
             JavaScript教程网 
             773 
             2021-03-26 
             
           
  
          JavaScript 
            
            JS中自定义定时器让它在某一时刻执行 
            写一个方法，让它在某一时刻执行，即需要在JS中写一个定时器，当时间达到要求时间时，需要执行的方法自动执行，下面的示例大家可以参考下... 。 
             
             JavaScript教程网 
             1017 
             2021-03-03 
             
           
  
          
         
         
          
           
          
          
           
           最近更新 
           
           
            
            详解vue中v-model和v-bind绑定数据的异同 
            maptalks+three.js+vue webpack实现二维地图上贴三维 
            React实现阿里云OSS上传文件的示例 
            vue+elementUI(el-upload)图片压缩,默认同比例压缩 
            使用vue引入maptalks地图及聚合效果的实现 
            
           
          
          
           
          
          
           
           编辑推荐 
           
           
            
             
              
               
               
               云服务器是什么，云主机干什么用的？ 
               
              
            2 
              
              2020最新好用的web服务器软件推荐 
              2020-05-17 
              
            3 
              
              服务器操作系统有哪些? 
              2020-04-06 
              
            4 
              
              web服务器配置（图文详解） 
              2020-04-06 
              
            5 
              
              企业如何选择阿里云服务器配置? 
              2019-10-18 
              
            6 
              
              五大免费主机管理系统优缺点对比及推荐 
              2019-06-14 
              
            7 
              
              2019最新三款Windows下连接Linux的ssh软件下载推荐 
              2019-05-28 
              
            8 
              
              服务器常用管理软件盘点 
              2019-05-27 
              
            9 
              
              Nginx服务器究竟是怎么执行PHP项目 
              2019-05-24 
              
            10 
              
              运维必须知道的关于云服务器的十个问题 
              2019-05-24 
              
            
           
          
          
           
          
          
           
           阅读排行 
           
           
            
            1 基于jquery的blockui插件显示弹出层 
            2 js通过location.search来获取页面传来的参数 
            3 jQuery中parents()和parent()的区别分析 
            4 Javascript让DEDECMS告别手写Tag 
            5 2014年最火的Node.JS后端框架推荐 
            6 2021年优秀JavaScript框架和技术趋势 
            7 一款基jquery超炫的动画导航菜单可响应单击事 
            8 AngularJS入门教程（二）：AngularJS模板 
            9 jQuery添加/改变/移除CSS类及判断是否已经存在 
            10 JavaScript获取鼠标移动时的坐标(兼容IE8、cho 
            
           
          
          
           
          
          
           
           热门标签 
           
           
           
             v-bind 　 原型 　 原型链 　 仿淘宝商城 　 jqeuryUI 　 网页对话框 　 样式规则 　 blockui 　 页面滚动 　 弹出窗 　 弹出提示 　 hidden 　 Hapi.js 　 无间断 　 对象构建 　 dialogArguments 　 随机显示 　 node应用 　 箭头函数 　 高级类型 　 Vuejs 　 JavaScript技术 　 并发语言 　 JavaScript优化 　 QRCanvas 　 JS库 　 Svelte 　 事件处理函数 　 名称冲突 　 当时时间 　 
            
           
          
          
           
          
         
         
         
          
          © 2019-2021 我(www.zzvips.com) 版权所有 
          关于我们联系我们版权申明网站地图

最后此篇关于maptalks+three.js+vue webpack实现二维地图上贴三维模型操作的文章就讲到这里了,如果你想了解更多关于maptalks+three.js+vue webpack实现二维地图上贴三维模型操作的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： jQuery中odd选择器的定义和用法

文章推荐：浅析javascript 定时器

文章推荐：解决springboot整合druid遇到的坑

文章推荐： JavaScript中自定义事件用法分析

java - Struts2 操作 > JSP > 操作
我正在努力做到这一点在我的操作中从数据库获取对象列表(确定) 在 JSP 上打印(确定) 此列表作为 JSP 中的可编辑表出现。我想修改然后将其提交回同一操作以将其保存在我的数据库中(失败。当我使用
linq - 不支持嵌套查询。操作 1 ='UnionAll' 操作 2 ='MultiStreamNest'
我有以下形式的 Linq to Entities 查询: var x = from a in SomeData where ... some conditions ... select
c# - 不支持嵌套查询。操作 1 ='UnionAll' 操作 2 ='MultiStreamNest'
我有以下查询。 var query = Repository.Query() .Where(p => !p.IsDeleted && p.Article.ArticleSections.Cou
java - Jtable ListSelectionListener 不响应 jtable 操作，而是响应同一个类中的另一个 jtable 操作
我正在编写一个应用程序包，其中包含一个主类，其中主方法与GUI类分开，GUI类包含一个带有jtabbedpane的jframe，它有两个选项卡，第一个选项卡包含一个jtable，称为jtable1，第
c# - LINQ 嵌套数组和三元运算符。不支持嵌套查询。操作 1 ='Case' 操作 2 ='Collect'
以下代码产生错误 The nested query is not supported. Operation1='Case' Operation2='Collect' 问题是我做错了什么？我该如何解决？
Redis哨兵中的C#操作
我已经为 HA redis 集群(2 个副本、1 个主节点、3 个哨兵)设置了本地 docker 环境。只有哨兵暴露端口(10021、10022、10023)。我使用的是 stackexchange
液体模板过滤器中的日期数学/操作
我正在 Desk.com 中构建一个“集成 URL”，它使用 Shopify Liquid 模板过滤器语法。对于开始日期为 7 天前而结束日期为现在的查询，此 URL 需要包含“开始日期”和“结束日期
Python为什么不支持 i++/i--操作
你一定想过。然而情况却不理想，python中只能使用类似于 i++/i--等操作。 python中的自增操作下面代码几乎是所有程序员在python中进行自增(减)操作的常用
GitHub 操作 - 将分支名称显示为构建名称
我需要在每个使用 github 操作的手动构建中显示分支。例如:https://gyazo.com/2131bf83b0df1e2157480e5be842d4fb 我应该显示分支而不是一个。最佳答
Perl qr//操作
我有一个关于 Perl qr 运算符的问题: #!/usr/bin/perl -w &mysplit("a:b:c", /:/); sub mysplit { my($str, $patt
uml - ArgoUML 操作
我已经使用 ArgoUML 创建了一个 ERD(实体关系图)，我希望在一个类中创建两个操作，它们都具有 void 返回类型。但是，我只能创建一个返回 void 类型的操作。例如: 我能够将 book
关于拉取请求和主分支的 Github 操作
Github 操作仍处于测试阶段并且很新，但我希望有人可以提供帮助。我认为可以在主分支和拉取请求上运行 github 操作，如下所示: on: pull_request push: b
用于记录的 Twilio 操作
我正在尝试创建一个 Twilio 工作流来调用电话并记录用户所说的内容。为此，我正在使用 Record，但我不确定要在 action 参数中放置什么。尽管我知道 Twilio 会发送有关调用该 UR
OpenGL 模板缓冲区 OR 操作？
我不确定这是否可行，但值得一试。我正在使用模板缓冲区来减少使用此算法的延迟渲染器中光体积的过度绘制(当相机位于体积之外时): 使用廉价的着色器，将深度测试设置为 LEQUAL 绘制背面，将它们标记在模
用于复制和重命名文件的 GitHub 操作
有没有聪明的方法来复制和重命名文件通过 GitHub 操作？我想将一些自述文件复制到 /docs文件夹(:= 同一个 repo，不是远程的!)，它们将根据它们的 frontmatter 重命名
PowerShell CSV 操作
我有一个 .csv 文件，其中第一列包含用户名。它们采用 FirstName LastName 的形式。我想获取 FirstName 并将 LastName 的第一个字符添加到它上面，然后删除空格。然
Sitecore - 操作 URL
Sitecore 根据 Sitecore 树中定义的项目名称生成 URL， http://samplewebsite/Pages/Sample Page 但我们的客户有兴趣降低所有 URL(页面/示例
单击按钮时的 Angularjs 操作
我正在尝试进行一些计算，但是一旦我输入金额，它就会完成。我只是希望通过单击按钮而不是自动发生这种情况。到目前为止我做了什么: Angular JS - programming-fr
将文件从一个存储库复制到另一个存储库的 github 操作
我的公司创建了一种在环境之间移动文件的复杂方法，现在我们希望将某些构建的 JS 文件(已转换和缩小)从一个 github 存储库移动到另一个。使用 github 操作可以实现这一点吗？最佳答案最简
java - JSONArray 操作
在我的代码中，我创建了一个 JSONArray 对象。并向 JSONArray 对象添加了两个 JSONObject。我使用的是 json-simple-1.1.jar。我的代码是 package j

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

延伸 · 阅读

jQuery中offsetParent()方法用法实例

jQuery实现表单提交时判断的方法

JS跨页面通信极简方案&纯前端实现文件下载

js继承call()和apply()方法总结

javascript实现修改微信分享的标题内容等

Javascript前端UI框架Kit使用指南之kitjs的对话框组件

JavaScript中获取样式的原生方法小结

JS中自定义定时器让它在某一时刻执行

2020最新好用的web服务器软件推荐

服务器操作系统有哪些?

web服务器配置（图文详解）

企业如何选择阿里云服务器配置?

五大免费主机管理系统优缺点对比及推荐

2019最新三款Windows下连接Linux的ssh软件下载推荐

服务器常用管理软件盘点

Nginx服务器究竟是怎么执行PHP项目

运维必须知道的关于云服务器的十个问题