• 官方示例之地球模块十:拔高GeoPolygon


    /**
     * 该示例展示了如何设置 GeoPolygon 的高度
     */
    var app = new THING.App();
    app.background = [0, 0, 0]
    
    THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () {
    	// 创建一个地图
    	var map = app.create({
    		type: 'Map',
    		attribution: 'Google',
    		style: {
    			night: false
    		}
    	});
    	// 创建一个瓦片图层
    	var tileLayer1 = app.create({
    		type: 'TileLayer',
    		name: '卫星影像图层',
    		// Google WGS84 卫星影像服务
    		url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}',
    		style: {
    			template: CMAP.TileLayerStyle.DARKBLUE // 设置瓦片图层滤镜为 深蓝滤镜
    		}
    	});
    	// 将瓦片图添加到底图图层中
    	map.addLayer(tileLayer1);
    
    	app.camera.earthFlyTo({
    		lonlat: [116.3902759552002, 39.92428465665397],
    		height: 2000
    	});
    
    	// 创建一个 ThingLayer
    	var thingLayer = app.create({
    		type: "ThingLayer",
    		name: "thingLayer01"
    	});
    	// 将ThingLayer添加到地图中
    	map.addLayer(thingLayer);
    
    	new THING.widget.Button('根据height', function () {
    		var geoPolygon = thingLayer.query('多边形01')[0];
    		if (!geoPolygon) {
    			geoPolygon = app.create({
    				type: 'GeoPolygon',
    				name: '多边形01',
    				height: 100,
    				coordinates: [[
    					[116.38774394989012, 39.926703608137295],
    					[116.38801217079163, 39.921997270172746],
    					[116.39319419860838, 39.92214537664713],
    					[116.3927972316742, 39.92680233903546],
    					[116.38774394989012, 39.926703608137295]
    				]], // 支持Polygon和MultiPolygon,格式可参考geoJson规范
    				renderer: {
    					type: 'vector', // 纯色填充
    					color: [255, 0, 0], // 面填充颜色
    					opacity: 0.8, // 填充不透明度
    					outlineColor: [255, 255, 0], // 边框色
    					outlineWidth: 2, // 边框宽度
    				}
    			});
    			thingLayer.add(geoPolygon);
    		}
    		else {
    			geoPolygon.visible = !geoPolygon.visible;
    		}
    	});
    
    	new THING.widget.Button('根据userData字段', function () {
    		var geoPolygon = thingLayer.query('多边形02')[0];
    		if (!geoPolygon) {
    			geoPolygon = app.create({
    				type: 'GeoPolygon',
    				name: '多边形02',
    				userData: { '高度': 150 },
    				coordinates: [[
    					[116.39652013778687, 39.921882076026726],
    					[116.40259265899658, 39.921882076026726],
    					[116.40259265899658, 39.92695043511577],
    					[116.39652013778687, 39.92695043511577],
    					[116.39652013778687, 39.921882076026726]
    				]], // 支持Polygon和MultiPolygon,格式可参考geoJson规范
    				renderer: {
    					type: 'vector', // 纯色填充
    					color: [255, 0, 0], // 面填充颜色
    					opacity: 0.8, // 填充不透明度
    					outlineColor: [255, 255, 0], // 边框色
    					outlineWidth: 2, // 边框宽度
    					extrudeField: '高度'
    				}
    			});
    			thingLayer.add(geoPolygon);
    		}
    		else {
    			geoPolygon.visible = !geoPolygon.visible;
    		}
    	});
    
    
    	new THING.widget.Button('拔高倍数', function () {
    		var geoPolygon = thingLayer.query('多边形03')[0];
    		if (!geoPolygon) {
    			geoPolygon = app.create({
    				type: 'GeoPolygon',
    				name: '多边形03',
    				coordinates: [[
    					[116.39795780181885, 39.91580942453449],
    					[116.40368700027466, 39.91580942453449],
    					[116.40368700027466, 39.92087823312308],
    					[116.39795780181885, 39.92087823312308],
    					[116.39795780181885, 39.91580942453449]
    				]], // 支持Polygon和MultiPolygon,格式可参考geoJson规范
    				userData: { '高度': 150 },
    				renderer: {
    					type: 'vector', // 纯色填充
    					color: [255, 0, 0], // 面填充颜色
    					opacity: 0.8, // 填充不透明度
    					outlineColor: [255, 255, 0], // 边框色
    					outlineWidth: 2, // 边框宽度
    					extrudeField: '高度', // 设置拔高字段
    					extrudeFactor: 2 // 设置高度拔高倍数 默认是1
    				}
    			});
    			thingLayer.add(geoPolygon);
    		}
    		else {
    			geoPolygon.visible = !geoPolygon.visible;
    		}
    	});
    });
    
  • 相关阅读:
    反正切函数atan与atan2的区别
    旋转变换(一)旋转矩阵
    最常用的三角函数值和三角变形公式
    关于齐次坐标的理解
    opencv Mat类型矩阵的变量值的方法
    何为南墙
    C#窗体之间传递参数
    C# 属性(Property)
    C# 如何重写ToString函数及重写的意义
    vs2019 c# 台式电脑与笔记本电脑显示界面问题问题
  • 原文地址:https://www.cnblogs.com/thingjs/p/13840333.html
Copyright © 2020-2023  润新知