/**
* 该示例展示了创建不同样式的 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;
}
})
});
官方示例之地球模块八:创建GeoODLine
最新推荐文章于 2024-01-18 15:37:11 发布
本文详细讲解如何使用JavaScript创建GeoODLine,通过官方示例深入理解地理信息处理中的线路距离测量方法。

3万+

被折叠的 条评论
为什么被折叠?



