官方示例之地球模块十:拔高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;
		}
	});
});
posted @ 2020-10-19 15:04  ThingJS_森友鹿锘  阅读(171)  评论(0编辑  收藏  举报