官方示例之地球模块八:创建GeoODLine

本文详细讲解如何使用JavaScript创建GeoODLine,通过官方示例深入理解地理信息处理中的线路距离测量方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 * 该示例展示了创建不同样式的 GeoODLine
 */
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.flyTo({
		'position': [2444232.951679011, 4212783.519880975, 5718487.634005925],
		'target': [2035398.0407804989, 3688764.984932529, 4788428.938756701],
		'time': 2000
	});


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

	var startPos = [116.39139175415039, 39.906082185995366];

	new THING.widget.Button('像素线', function () {
		var geoODLine = thingLayer.query('北京-济南')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-济南',
				coordinates: [
					startPos,
					[117.1142578125, 36.63316209558658]
				],
				renderer: {
					type: 'vector', // 代表纯色渲染
					lineType: 'Line',
					color: [255, 0, 0],
					speed: 100, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// opacity:0.2 ,// 设置不透明度 默认是1
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('像素线(贴图)', function () {
		var geoODLine = thingLayer.query('北京-南京')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-南京',
				coordinates: [
					startPos,
					[118.76220703125001, 32.045332838858506]
				],
				renderer: {
					type: 'image', // 代表贴图渲染
					lineType: 'Line',
					imageUrl: '/guide/image/uGeo/path.png',
					numPass: 3,
					speed: 0.5, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('管状线', function () {
		var geoODLine = thingLayer.query('北京-杭州')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-杭州',
				coordinates: [
					startPos,
					[120.21240234375001, 30.240086360983426]
				],
				renderer: {
					type: 'vector', // 代表纯色渲染
					lineType: 'Pipe',
					color: [255, 0, 0],
					width: 1000, // 设置管线半径 单位米
					// opacity:0.2 , // 设置不透明度 默认是1
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('管状线(贴图)', function () {
		var geoODLine = thingLayer.query('北京-武汉')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-武汉',
				coordinates: [
					startPos,
					[114.345703125, 30.56226095049944]
				],
				renderer: {
					type: 'image', // 代表贴图渲染
					lineType: 'Pipe',
					imageUrl: '/guide/image/uGeo/path.png',
					width: 1000, // 设置管线半径 单位米
					numPass: 3,
					speed: 0.5, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('片状线', function () {
		var geoODLine = thingLayer.query('北京-郑州')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-郑州',
				coordinates: [
					startPos,
					[113.66455078125, 34.74161249883172]
				],
				renderer: {
					type: 'vector', // 代表纯色渲染
					lineType: 'Plane',
					color: [255, 0, 0],
					width: 2, // 设置线宽 单位像素
					speed: 100, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// opacity: 0.2,// 设置不透明度 默认是1
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('片状线(贴图)', function () {
		var geoODLine = thingLayer.query('片状线带贴图')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '片状线带贴图',
				coordinates: [
					startPos,
					[104.04052734375, 30.600093873550072]
				],
				renderer: {
					type: 'image', // 代表贴图渲染
					lineType: 'Plane',
					imageUrl: '/guide/image/uGeo/path.png',
					width: 2, // 设置线宽 单位像素
					numPass: 3,
					speed: 0.5, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});

	new THING.widget.Button('开启/关闭 发光', function () {
		var lines = thingLayer.children;
		var cnt = lines.length;
		for (var i = 0; i < cnt; i++) {
			var line = lines[i];
			line.renderer.effect = !line.renderer.effect;
		}
	})
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值