你可以使用
Cesium的Entity API来实现在
地图上添加
点并做标注，具体步骤如下：
1. 安装
cesium和
vue-
cesium
```bash
npm install
cesium vue-
cesium --save
```
2. 在
Vue组件中引入
cesium和
vue-
cesium
```js
import
VueCesium from '
vue-
cesium'
import '
cesium/Build/
Cesium/Widgets/widgets.css'
export default {
name: 'Map',
components: {
VueCesium
},
data () {
return {
viewer: null,
entities: null
}
},
mounted () {
this.viewer = this.$refs.
vueCesium.get
CesiumViewer()
this.entities = this.viewer.entities
}
}
```
3. 在mounted钩子函数中获取
Cesium Viewer对象和Entity集合对象
4. 创建一个Entity对象，设置其位置和标注信息
```js
var point = this.entities.add({
position:
Cesium.Cartesian3.fromDegrees(longitude, latitude),
point: {
pixelSize: 10,
color:
Cesium.Color.RED
},
label: {
text: '这是
一个点',
font: '12pt Arial',
style:
Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor:
Cesium.Color.YELLOW,
outlineColor:
Cesium.Color.BLACK,
outlineWidth: 2,
horizontalOrigin:
Cesium.HorizontalOrigin.CENTER,
verticalOrigin:
Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new
Cesium.Cartesian2(0, -9)
}
})
```
5. 将Entity对象添加到Entity集合中
```js
this.entities.add(point)
```
完整代码示例：
```
vue
<template>
<div>
<
vue-
cesium ref="
vueCesium" />
</div>
</template>
<script>
import
VueCesium from '
vue-
cesium'
import '
cesium/Build/
Cesium/Widgets/widgets.css'
export default {
name: 'Map',
components: {
VueCesium
},
data () {
return {
viewer: null,
entities: null
}
},
mounted () {
this.viewer = this.$refs.
vueCesium.get
CesiumViewer()
this.entities = this.viewer.entities
var longitude = 116.39
var latitude = 39.90
var point = this.entities.add({
position:
Cesium.Cartesian3.fromDegrees(longitude, latitude),
point: {
pixelSize: 10,
color:
Cesium.Color.RED
},
label: {
text: '这是
一个点',
font: '12pt Arial',
style:
Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor:
Cesium.Color.YELLOW,
outlineColor:
Cesium.Color.BLACK,
outlineWidth: 2,
horizontalOrigin:
Cesium.HorizontalOrigin.CENTER,
verticalOrigin:
Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new
Cesium.Cartesian2(0, -9)
}
})
this.entities.add(point)
}
}
</script>
```
超级会员免费看
订阅专栏 解锁全文
5099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
