有人说我一个前端工程师,只懂怎么写页面,如何能开发企业可视化应用?近几年可视化应用已经渗透到各行各业中,科技园、医院、学校、工厂、消防、安保、仓储无不涉猎!作为一个前端开发人员,你有必要再往前迈一步,多了解webgl技术,再沉淀一下Javascript。thingjs是一个面向物联网的3D可视化开发平台,可在线开发、对接数据、项目部署、实际应用~如果你想进步不妨一步哦!
建筑拔高(ThingLayer).js
/**
* 该示例主要展示了根据底面坐标轮廓和高度进行拔楼的功能
* 该示例中的插值功能主要用到了Tween.js
* 该示例用到的数据地址为:https://www.thingjs.com/uearth/uGeo/chaoyang_building.geojson
* 其中建筑的高度为随机值,无特殊意义
*/
var app = new THING.App();
app.background = [0, 0, 0];
var map;
THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () {
map = app.create({
type: 'Map',
attribution: 'Google'
});
// 创建一个瓦片图层
var tileLayer1 = app.create({
type: 'TileLayer',
name: 'tileLayer1',
url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
style: {
template: CMAP.TileLayerStyle.DARKGREEN // 设置瓦片图层的样式为DARKGREEN
}
});
// 将瓦片图添加到地图中
map.addLayer(tileLayer1);
// 创建一个建筑物图层
var buildingLayer = app.create({
type: 'ThingLayer',
name: 'buildingLayer'
});
// 将 buildingLayer 添加到 map 中
map.addLayer(buildingLayer);
// 飞到地理位置和高度
app.camera.earthFlyTo({
lonlat: [116.4488, 39.9187],
height: 4000,
time: 2000,
lerp: THING.LerpType.Linear.None,
complete: function () {
app.camera.curOrbit.setState();
setTimeout(createBuilding, 1000);
}
});
var createBuilding = function () {
$.ajax({
type: 'GET',
url: 'https://www.thingjs.com/uearth/uGeo/chaoyang_building.geojson',
dataType: 'json',