官方示例之地球模块十二:GeoPoint沿路径移动

/**
 * 该示例展示了 GeoPoint 点沿由经纬度数组构成的路径移动
 */
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}'
	});
	// 将瓦片图添加到底图图层中
	map.addLayer(tileLayer1);
	app.camera.earthFlyTo({
		lonlat: [116.45987123250963, 39.98310099140805],
		height: 80
	});

	// 创建一个 ThingLayer
	var thingLayer = app.create({
		type: "ThingLayer",
		name: "thingLayer01"
	});
	// 将ThingLayer添加到地图中
	map.addLayer(thingLayer);

	// 创建一个车
	var geoPoint = app.create({
		type: 'GeoPoint',
		name: '救护车',
		userData: { '类别': '车' },
		coordinates: [116.45987123250963, 39.98310099140805],
		modelAngle: -45, // 模型旋转角度
		renderer: {
			type: 'model', // model 代表创建模型点
			url: 'https://model.3dmomoda.com/models/4385928f07b24d77a523641fe584aa8d/0/gltf/', // 模型地址
			size: 2  // 缩放比例
		}
	});
	thingLayer.add(geoPoint);

	// 路径经纬度坐标
	var path = [[116.45987123250963, 39.98310099140805], [116.45712733268736, 39.98492187410472], [116.45771205425262, 39.98528357865959], [116.4582860469818, 39.985702824724704], [116.45957887172698, 39.98692972122187], [116.46279484033585, 39.98480267559324], [116.46120429039001, 39.98333528377564], [116.46093875169754, 39.98319553053025], [116.46078854799269, 39.983158536976276], [116.4604103565216, 39.98307632900681], [116.46008312702179, 39.98303316978326], [116.45992755889893, 39.98307632900681], [116.45987123250963, 39.98310099140805]];

	new THING.widget.Button('沿路径移动', function () {
		// 沿路径移动
		geoPoint.moveGeoPath({
			path: path,
			time: 10 * 1000
		});
	});

	new THING.widget.Button('显示/隐藏 路径', function () {
		var geoLine = thingLayer.query('路径')[0];
		if (!geoLine) {
			// 创建路径
			geoLine = app.create({
				type: 'GeoLine',
				name: '路径',
				coordinates: path, // 经纬度坐标
				renderer: {
					type: 'image', // 代表贴图渲染
					lineType: 'Line',
					imageUrl: '/guide/image/uGeo/path.png',
					numPass: 3,
					speed: 0.5
				}
			});
			thingLayer.add(geoLine);// 添加到ThingLayer中
		}
		else {
			geoLine.visible = !geoLine.visible;
		}
	});
});
posted @ 2020-10-19 15:06  ThingJS_森友鹿锘  阅读(284)  评论(0编辑  收藏  举报