官方示例(十二):网页加载道路及Geoline开发ThingJS
#前端开发# #交通可视化# #Geoline#
简介:智慧城市对于我们并不陌生,目前已经有600多个城市平台智慧化,拥有空、天、地一体化的基础网络部署,针对城市交通物理实体对象的仿真模拟也有了长足发展。为了更逼真的孪生技术应用于交通出行,ThingJS平台结合物联网专业领域应用经验,构建智慧交通场景,加入定制化特效,让城市交通也有机会展示最好的一面!
体验见demo链接:http://www.thingjs.com/guide/?m=sample
1. 基础图层叠加
动态加载地球组件之后,基于地图Map创建瓦片图层、道路图层,进行图层叠加,主要在业务图层(即ThingLayer)进行更灵活的二次开发。ThingJS将ThingLayer图层命名为roadLayer,指代道路,并将道路图层添加到地图Map。
2. 瓦片图层创建
瓦片图层是基于底图的基础信息,将渲染后的图片,按照一定的规则结合比例尺切成小的瓦片图形,最后动态加载瓦片以提升网络加载效率,利用style参数设置瓦片图层的样式,效果更加炫酷哦!
// 创建一个瓦片图层 var tileLayer = app.create({ type: 'TileLayer', name: 'tileLayer1', url: 'https://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', style: { template: CMAP.TileLayerStyle.DARKBLUE // 设置瓦片图层的样式为DARKBLUE } });
3. ajax开发解析
ThingJS 3D引擎获取道路图层后,利用ajax函数,一种创建交互式、快速动态网页应用的网页开发技术,在道路图层创建不同类型的线要素,如像素线、管状线、片状线,提供不同的道路视觉,快速创建动态线要素。简单来说,主要是通过读取Geojason中的坐标及属性数据开发并渲染所需的线要素。
(1)遍历地理数据
读取geojason中的所有数据,根据线路规划确定对应的线条类型,设置type分类之后,再细化样式的表达方式。
(2)渲染道路图层
通过渲染器renderer进行道路图层渲染,定义贴图材质Type、线类型lineType、贴图路径imageURL,ThingJS的开发逻辑轻松调用不用愁;加入动画特效,设置是否发光以及流动速度,让地图更加生动、好看!
全部代码请参考:http://www.thingjs.com/guide/?m=sample
// 根据不同的type设置不同的GeoLine的样式 if (data.features[i].properties.type == '0') { road = app.create({ type: 'GeoLine', name: 'road' + i, coordinates: data.features[i].geometry.coordinates, renderer: { type: 'image', // 贴图材质 lineType: 'Line', // 普通线 imageUrl: '/guide/image/uGeo/path.png', // 贴图路径 effect: true, // 是否开启发光特效 speed: 0.5 // 流动速度 } }); }
ThingJS之3D场景加载道路融合了api能力,化繁为简,开发思路变得简单!
关于ThingJS
ThingJS平台提供物联网3D可视化组件,让3D开发更轻松!直接Javascript调用3D脚本,基于200个3D开发源码示例,让你全面了解物联网可视化开发逻辑。场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效,同20万个开发者一起成为数字孪生技术创新者!
- 官方示例(十):网页开发3D粒子系统实现降雨效果 ThingJS
- KendoUI 官方示例之 Grid / Initialization from table
- 演示水晶报表设计概念的官方示例报表列表
- python实现的读取网页并分词功能示例
- STM32 USB转串口CDC官方示例程序修正
- Unity3D Shader官方教程翻译(十二)----Shader语法:Pass的标记
- div+css网页布局(示例代码)
- Python使用正则表达式抓取网页图片的方法示例
- CAS 5.1.x 的搭建和使用(三)—— 通过官方示例来熟悉客户端搭建
- Hadoop的单机模式和官方示例
- Java实现的简单网页截屏功能示例
- Oracle Golden Gate 系列十二 -- GG 数据初始化装载二 基于SCN 的初始化 说明 与 示例
- Halcon斑点分析官方示例讲解
- 【Arduino官方教程第一辑】示例程序 1-4 读取数字引脚
- ServiceStack 项目实例 006 通过官方示例总结的项目结构方案
- google官方mvp示例for Android apps
- 苹果官方示例代码《LazyTableImages》异步加载图片的学习记录
- MINA 2.0.7 官方示例
- Java中使用jsoup爬取网页数据简单示例
- [转] geochart 地图控件官方示例