#前端开发# #交通可视化# #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万个开发者一起成为数字孪生技术创新者！
简介：智慧城市对于我们并不陌生，目前已经有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万个开发者一起成为数字孪生技术创新者！
