ifame.html
5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!--<iframe src="https://www.thingjs.com/pp/eb1ef62559ddf908beadaddd" height="100%" width="100%"></iframe>-->
<script>
let city_points = [
{
"name": "CGO",
"point": [113.84857177734375, 34.52692430140103]
},
{
name: "ICN",
point: [126.44439697265624,37.45741810262938]
},
{
name: "CGN",
point: [7.126007080078125,50.875311142200765]
},
{
name: "ANC",
point: [210.00915527343747,61.16841084497744]
},
{
name: "ZAZ",
point: [-1.0074806213378906, 41.664448551062456]
},
{
name: "HKG",
point: [113.91448974609375,22.314507734511825]
},
{
name: "LUX",
point: [6.217231750488281,49.63517499335973]
},
{
name: "LGG",
point: [5.443210601806641,50.63901028125873]
},
{
name: "TBS",
point: [44.962921142578125,41.66778269875833]
}
];
city_points.forEach(function (obj) {
var airport = obj["name"];
var airport_point = obj["point"];
//渲染航线
let airgeoODLine = app.create({
type: 'GeoFlyLine',
name: airport,
coordinates: [
airport_point,
startPos
],
renderer: {
type: 'image', // 代表贴图渲染
lineType: 'Plane',
imageUrl: '/guide/image/uGeo/path.png',
width: 5, // 设置线宽 单位像素
numPass: 5,
speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
effect: true // 线发光效果 默认为 false 不开启
}
});
//渲染机场坐标
let geoPoint = app.create({
type: 'GeoPoint',
name: airport,
coordinates: airport_point,
offsetHeight: 2, //离地高度 单位:米
userData: { 'cityName': '郑州' },
pivot:[0.5,1], //指定轴心点位置为图片x方向中点y方向最下
label: {
text: '{{cityName}}', //使用cityName字段的值进行标注
offset: [0, 30],
fontColor: [255, 0, 0],
fontSize: 20
},
infoWindow:
{
'title': '标题',
'displayMode': 'clickShow', //点击弹出
'type': 'standard', //标准模式
'style': 'default', //默认样式
'fieldData': [
{
'field': 'cityName',
'alias': '名称'
}]
},
renderer: {
type: "image", //type有'image','model','vector'三种
//url: 'image/uGeo/pop.png',//针对image和model 代表资源的路径
url: 'https://www.thingjs.com/citybuilder_console/upload/mapIcons/systemIcons/27.png',
size: 2,// 对于image,vector 是一个数字 代表缩放倍数 对于model 是一个数组 代表xyz轴向的缩放比例
}
});
});
THING.Utils.dynamicLoad(['https://gallerybox.echartsjs.com/dep/echarts/latest/echarts.min.js'], function () {
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'// 场景地址
});
// 创建图表
createChart();
function createChart(echartOptions) {
var bottomBackground = document.createElement('div');
}
//创建背景块
var bottomDom = document.createElement('div');
//创建图表块
// 设置两个块的样式
var backgroundStyle = 'bottom:0px; position: absolute;right:0px;height:400px;width:600px;background: rgba(41,57,75,0.74);';
var chartsStyle = 'position: absolute;top:80px;right:0px;width:600px;height:300px;';
// 设置样式
bottomBackground.setAttribute('style', backgroundStyle);
bottomDom.setAttribute('style', chartsStyle);
// echarts 初始化
var bottomCharts = window.echarts.init(bottomDom);
//数据部分
bottomCharts.setOption(echartOptions);
bottomBackground.appendChild(bottomDom);
app.domElement.appendChild(bottomBackground);
var bottomCharts = window.echarts.init(bottomDom);// echarts 初始化
bottomCharts.setOption(option);
bottomCharts.on('click', function (params) {
cancelOutline();
reset();
clearUiAnchorArr();
if(params.name == "空置车位"){
for(var i = 0; i < app.query("空置车位").length; i++){
app.query("空置车位")[i].style.outlineColor = "#00ff00"
}
}else if(params.name == "占用车位"){
for(var i = 0; i < app.query("占用车位").length; i++){
app.query("占用车位")[i].style.outlineColor = "#ff0000"
}
}
})
}});
</script>