# cesium-添加标签
# 实现效果
# 完整代码
这里使用vue代码实现
<template>
<div class="home">
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<el-breadcrumb separator="/">
<el-breadcrumb-item>cesium</el-breadcrumb-item>
<el-breadcrumb-item>效果</el-breadcrumb-item>
<el-breadcrumb-item>高亮标签</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-col>
</el-row>
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<cesiumComponent id="cesium" ref="refCesium"/>
</div>
</el-col>
</el-row>
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<el-button type="primary" @click="toggleModel()">开关模型</el-button>
<el-button type="primary" @click="addLabel()">添加标签</el-button>
<el-button type="primary" @click="removeLabel()">移除标签</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import cesiumComponent from '../cesium.vue'
export default {
name: "labels",
data() {
return {
_viewer: undefined,
_camera: undefined,
model: undefined,
};
},
components: {
cesiumComponent
},
mounted() {
this.init();
},
methods: {
init() {
let that = this;
that.$refs.refCesium.initMap();
that._viewer = that.$refs.refCesium._viewer;
that._camera = that._viewer.camera;
that._viewer.scene.globe.depthTestAgainstTerrain = true;
},
/**
* 添加3dTiles模型
*/
toggleModel() {
let that = this;
// if (this.model) {
// this._viewer.scene.primitives.remove(that.model);
// }
let tileset = this._viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
id: '天街',
url: '../tianjie/tileset.json',
modelMatrix: Cesium.Matrix4.fromArray(
[0.9972458032561666, 0.04372029028528979, 0.05991113506964879, 0,
-0.03623787897545647, 0.9920229449104262, -0.12073646051879428, 0,
-0.06471185374661931, 0.11823287609043515, 0.9908750491338749, 0,
-663.0794944260269, 1211.490494620055, 2974.1003134818748, 1]),
}));
this.model = tileset;
this._viewer.flyTo(tileset, {
offset: {
heading: Cesium.Math.toRadians(20.0),//方向
pitch: Cesium.Math.toRadians(-25),//倾斜角度
range: 1000
}
});
},
/**
* 添加文本标签
*/
addLabel(){
let datas = [
{'lon':118.69291952888493, 'lat':32.16083347458605,'height':200,'minheight':47,'name':'龙湖天街'},
{'lon':118.6954401065247, 'lat':32.15652854592443,'height':200,'minheight':0,'name':'北斗大厦'},
{'lon':118.68933373748472, 'lat':32.1617522442184,'height':200,'minheight':0,'name':'星悦城'},
{'lon':118.68678061231758, 'lat':32.16365662332771,'height':200,'minheight':0,'name':'广场'},
{'lon':118.6901641232935, 'lat':32.16546310032038,'height':200,'minheight':0,'name':'自动化有限公司'},
{'lon':118.6921379024329, 'lat':32.16457214434654,'height':200,'minheight':0,'name':'软件大厦'},
{'lon':118.68622709354443, 'lat':32.16046331826695,'height':200,'minheight':0,'name':'工地'},
];
let labels = this._viewer.entities.add(new Cesium.Entity());
this.putLabels( datas, labels );
labels.show = true;
},
/**
* 添加label的方法
* @param _datas
* @param _parent
*/
putLabels(_datas, _parent) {
let _this = this;
for (let i = 0; i < _datas.length; i++) {
let data = _datas[i];
let entity = _this._viewer.entities.add({
id:data.name,
name:data.name,
//参数顺序：经度、纬度
position: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, data.height),//标签的位置
parent: _parent,
polyline: {//竖线
show: true,
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
data.lon, data.lat, data.height-2,
data.lon, data.lat, data.minheight
]),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 15000000),//高于多少m的时候，不可见
width: 1,
material: Cesium.Color.fromCssColorString('#fdeb13'),
outlineColor: Cesium.Color.fromCssColorString('#3ab70b'),
outlineWidth: 2
},
label: {
text: data.name,
font: '14pt monospace',
// showBackground:true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.fromCssColorString('#c4feb2'),
outlineColor: Cesium.Color.fromCssColorString('#67360d'),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 15000000),
// scaleByDistance : new Cesium.NearFarScalar(100, 2, 500, 0.0),
outlineWidth: 3,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(0, 0)//此属性为设置偏移量
},
type: 'text'//自定义属性
});
}
},
/**
* 移除文本标签
*/
removeLabel(){
let datas = [
{'lon':118.69291952888493, 'lat':32.16083347458605,'height':200,'minheight':47,'name':'龙湖天街'},
{'lon':118.6954401065247, 'lat':32.15652854592443,'height':200,'minheight':0,'name':'北斗大厦'},
{'lon':118.68933373748472, 'lat':32.1617522442184,'height':200,'minheight':0,'name':'星悦城'},
{'lon':118.68678061231758, 'lat':32.16365662332771,'height':200,'minheight':0,'name':'广场'},
{'lon':118.6901641232935, 'lat':32.16546310032038,'height':200,'minheight':0,'name':'自动化有限公司'},
{'lon':118.6921379024329, 'lat':32.16457214434654,'height':200,'minheight':0,'name':'软件大厦'},
{'lon':118.68622709354443, 'lat':32.16046331826695,'height':200,'minheight':0,'name':'工地'},
];
for(let i=0;i<datas.length;i++){
let id = datas[i].name;
let entity = this._viewer.entities.getById(id);
this._viewer.entities.remove(entity);
}
},
},
created() {
},
}
</script>
<style scoped>
.home {
height: 100%;
margin: 0;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
.el-breadcrumb {
margin: 10px;
font-size: 15px;
}
#cesium {
max-height: 700px;
}
</style>
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
# 核心代码
/**
* 添加文本标签
*/
addLabel(){
let datas = [
{'lon':118.69291952888493, 'lat':32.16083347458605,'height':200,'minheight':47,'name':'龙湖天街'},
{'lon':118.6954401065247, 'lat':32.15652854592443,'height':200,'minheight':0,'name':'北斗大厦'},
{'lon':118.68933373748472, 'lat':32.1617522442184,'height':200,'minheight':0,'name':'星悦城'},
{'lon':118.68678061231758, 'lat':32.16365662332771,'height':200,'minheight':0,'name':'广场'},
{'lon':118.6901641232935, 'lat':32.16546310032038,'height':200,'minheight':0,'name':'自动化有限公司'},
{'lon':118.6921379024329, 'lat':32.16457214434654,'height':200,'minheight':0,'name':'软件大厦'},
{'lon':118.68622709354443, 'lat':32.16046331826695,'height':200,'minheight':0,'name':'工地'},
];
let labels = this._viewer.entities.add(new Cesium.Entity());
this.putLabels( datas, labels );
labels.show = true;
},
/**
* 添加label的方法
* @param _datas
* @param _parent
*/
putLabels(_datas, _parent) {
let _this = this;
for (let i = 0; i < _datas.length; i++) {
let data = _datas[i];
let entity = _this._viewer.entities.add({
id:data.name,
name:data.name,
//参数顺序：经度、纬度
position: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, data.height),//标签的位置
parent: _parent,
polyline: {//竖线
show: true,
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
data.lon, data.lat, data.height-2,
data.lon, data.lat, data.minheight
]),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 15000000),//高于多少m的时候，不可见
width: 1,
material: Cesium.Color.fromCssColorString('#fdeb13'),
outlineColor: Cesium.Color.fromCssColorString('#3ab70b'),
outlineWidth: 2
},
label: {
text: data.name,
font: '14pt monospace',
// showBackground:true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.fromCssColorString('#c4feb2'),
outlineColor: Cesium.Color.fromCssColorString('#67360d'),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 15000000),
// scaleByDistance : new Cesium.NearFarScalar(100, 2, 500, 0.0),
outlineWidth: 3,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(0, 0)//此属性为设置偏移量
},
type: 'text'//自定义属性
});
}
},
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
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