首页 > 其他分享 >Maptalk-Three-Vue简单示例

Maptalk-Three-Vue简单示例

时间:2023-02-20 20:48:45浏览次数:56  
标签:Vue 楼体 示例 实现 maptalks Three 加载

Maptalk-Three-Vue简单示例

​ 通过国产GIS前端框架付镇大神的[Maptalks](maptalks/maptalks.js: A light and plugable JavaScript library for integrated 2D/3D maps. (github.com)),利用maptalks.three插件实现三维效果,后续就可以通过Three.js的material实现shader特效。实际项目开发中前端大多采用vue实现,该demo通过原生实现,其中meshline原版已很久未更新,通过对meshline 的es实现进行调整。

​ 简单实现功能包含了GeoJson、3Dtile加载,波纹强、动态线,动态线的实现原理就是动态调整uv贴图,这部分实现也可应用到Cesium,这可能是最简单的Shader特效了。GeoJson和3Dtiles这块主要是想看下maptalks.three下两种加载方式性能的差异,主要应用在建筑楼体和模型加载上,测试对大场景的加载性能,小场景下差异不大,不过Geojson加载的楼体确实漂亮一下,这块的实现底层依赖poly-extrude,拉伸楼体的颜色通过分段颜色实现。

​ 效果图如下:

效果

​ 最后再安利一下maptalks的设计MapTalks IDE,通过配置实现各种复杂Shader才能实现的特效,支持PBR渲染,材质组等。

maptalks ide

​ 示例代码 https://github.com/linxing58/maptalk-three-vue

标签:Vue,楼体,示例,实现,maptalks,Three,加载
From: https://www.cnblogs.com/HanxiGIS/p/17138811.html

相关文章

  • vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped
    目录vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped今日内容概要今日内容详细1vue-ci创建项目2vue项目目录介绍3es6导入导出语法3.1App.vue,m......
  • vue
    今日内容1.vue-cli创建项目2.vue项目目录介绍3.es6导入导出语法4.小练习-登录功能5.scoped1.vue-cli创建项目前端做成项目----》使用工具(vue-cli),创建出vue项目,单页......
  • vue项目使用rem布局刷新页面瞬间元素尺寸由小变大,页面闪现错乱样式
    vue项目使用px2remLoader插件,在index.html自定义设置font-size的大小,尤其是在首屏加载的时候,会出现页面各个元素尺寸由小变大的一个过程,很难看刚开始一直在想是不是因为cs......
  • 【Vue】vue项目目录介绍 es6的导入导出语法 vue项目开发规范 Vue项目编写步骤
    目录昨日回顾今日内容0vue-cli创建项目node.js环境创建vue-cli项目1vue项目目录介绍node_modulesindex.htmlapp.vuepackage.jsonpackage-lock.json2es6的导入导出语法ma......
  • vue---day06( )
    上节回顾#1组件使用 -局部-全局#2组件间通信 -一旦组件化开发----》组件间通信-父传子:自定义属性-子传父:自定义事件-ref属性: ......
  • vue实现预览pdf功能
    vue页面中的一部分实现预览pdf功能一、全屏预览模式先说直接全屏预览的,直接axios获取到数据,将流转为二进制文件,可以window.open(后端返回文件流,前端把流转成url,在使用w......
  • python 装饰器示例
    1defwrapper_log(func):2"""3无参装饰器,也可以写成有参装饰器,True或Flase标记是否调用日志模块4功能一:执行失败,打印并记录错误日志信息,定位bug......
  • Vue 06
    Vue06vue-cli创建项目在使用前端做项目的时候我们会使用到一个工具:vue-cli 1.创建出一个vue项目,单页面开发,组件化开发,把App.vue,ts,saas,less编译成能够在浏览器中......
  • 附录E示例-UT_DrainageSystem_2
    示例概述排水系统_2意图该UT实施IfcDistributionSystem,用于带有涵洞和开放侧沟的道路排水。 它基于故事情节bFi_IR_SLRD-DD(https://app.box.com/s/x9q3q62tcc77hdqp......
  • vue2中的v-for
    数组更新检测变更方法Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:push()pop()shift()unshift()splice()sort()......