1.添加点位置信息,添加点位的同时可以加一些图片,cesium这里我用的就是广告牌了
/*******
* @description: 添加点
* @param {*} lng 点的经度
* @param {*} lat 点的纬度
* @param {*} Viewer 地图实例化对象
* @param {*} Cesium 地图实例化对象
* @param {*} sid 点的id
* @param {*} type 点的类型
* @return {*}
*/
addPoint(lng, lat, Viewer, Cesium, sid,) {
let point = Viewer.entities.add({
id: sid,//这里是点的id保证唯一性
name: '点',
position: Cesium.Cartesian3.fromDegrees(lng, lat),//经纬度转世界坐标
// point: {
// show: true,
// color: new Cesium.Color.fromCssColorString('#19E1C2'),
// pixelSize: 20,
// outlineColor: Cesium.Color.YELLOW,
// outlineWidth: 3,
// }
billboard: {
//图像地址,UR或Canvas的属性就是
image: url,
// 设置颜色和透明度
color: Cesium.Color.WHITE.withAlpha(0.8),
// 高度(以像素为单位)
height: 20,
//宽度(以像素为单位)
width: 20,
//逆时针旋转
// rotation: 20,
//大小是否以米为单位
sizelnMeters: false,
//相对于坐标的垂直位置
verticalOrigin: Cesium.VerticalOrigin.CENTER,
//相对于坐标的水平位置
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
//该属性指定标签在屏幕空间中距此标签原点的像素偏移量
// pixelOffset: new Cesium.Cartesian2(10, 0),
//应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
scale: 1.0,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
//是否显示
show: true
}
});
},
点添加完之后如果要进行编辑我的做法是先找到当前这个点删掉,然后把编辑后的点在添加到地图上。
/*******
* @description: 添加当前数据
* @param {*} item 当前数据
* @return {*}
*/
addTransmissionTower(item) {
const radar = this.$_viewer.entities.getById(`lineid${item.line_id}`)
if (radar) {
this.$_viewer.entities.remove({ id: `lineid${item.line_id}` })
this.getTSLinePointList()
}
},
当然了this.$_viewer.entities.getById()这个方法一定要保证数据在地图的唯一性
2.同样的道理线条的添加删除编辑也是一样的道理同样需要数据的唯一性,所以添加之前id要拼接一个唯一的字符串什么的,当然了线条的一些属性你也可以去添加,线条的编辑与删除也可以用上面的方法进行操作,先找到当前的线然后删除再去加载一条修改过的线,具体要怎么操作看个人的习惯就行
addLine(msg, Viewer, Cesium, lineid) {
// console.log(lineid)
//点
//线
let line = Viewer.entities.add({
id: lineid,
name: '线',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(msg),//经纬度数组转世界坐标,带高度的话是fromDegreesArrayHeights
width: 2,
material: Cesium.Color.fromCssColorString('#19E1C2'), //线的颜色
clampToGround: true, //贴地
}
});
// Viewer.flyTo(line)
},
addTransmissionTower(item) {
const radar = this.$_viewer.entities.getById(`lineid${item.line_id}`)
if (radar) {
this.$_viewer.entities.remove({ id: `lineid${item.line_id}` })
this.getTSLinePointList()
}
},
这样点线的操作就完成
3.电线操作完大家如果想要点击数据定位到当前的点位或线上 需要用到flyTo()或者 Viewer.camera.flyToBoundingSphere()但是两者使用不一样,一个是定位当前实体上,一个是定位到当前的经纬度上,所以需要的数据也是不一样的。
首先这个方法需要的是具体的经纬度,和一些角度指向的参数:
Viewer.camera.flyToBoundingSphere()
cesiumLocation(Cesium, Viewer, location, config) {
if (!location) return
const { lng, lat, height } = location
const position = this.GetDKRFromWGS84(Cesium, { lng, lat, height: height * 1 || 2000 })//笛卡尔坐标转换
const boundingSphere = new Cesium.BoundingSphere(position, 100)
const heading = Cesium.Math.toRadians(config ? config.heading : 0.0)
const pitch = Cesium.Math.toRadians(config ? config.pitch : -90.0)
const range = config ? config.range : 10.0
Viewer.camera.flyToBoundingSphere(boundingSphere, {
duration: 2,
offset: new Cesium.HeadingPitchRange(heading, pitch, range)
// orientation: {
// // 指向
// heading: heading,
// // 视角
// pitch: pitch,
// roll: 0.0,
// range: 5000,
// },
})
},
然后flyTo()需要先找到当前的实体才行这里的id就是上面的数据的唯一的id:
let findModel = this.$_viewer.entities.getById(id)
if (findModel) {
this.$_viewer.flyTo(findModel)
}