后端坐标

  const graphic = new mars3d.graphic.BillboardEntity({
    position: {
      type: "ajax",
      url: "http://studio-api.mars3d.cn/api/gap/open/random/point",
      dataColumn: "data", // 接口返回数据中,对应的属性数据所在的读取字段名称,支持多级(用.分割);如果数据直接返回时可以不配置。
      latColumn: "lat",
      lngColumn: "lng",
      altColumn: "alt",
      time: 4 // 无配置时仅取值一次,有值时间隔time秒后不断取
    },
    style: {
      image: "https://data.mars3d.cn/img/marker/point-red.png",
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    },
    attr: { remark: "点状数据position" }
  })

  graphicLayer.addGraphic(graphic)

在这里插入图片描述

添加动态数据

<script setup>
const initWs = () => {
	const ws = new WebSocket("");
	ws.onopen = () => {
		sendMsg(JSON.stringify({
			deviceId: 'ship_001'
		}));
		sendMsg(JSON.stringify({
			deviceId: 'ship_002'
		}));
		sendMsg(JSON.stringify({
			deviceId: 'missile_001'
		}));
		sendMsg(JSON.stringify({
			deviceId: 'missile_002'
		}))
	};
	ws.onmessage = (event) => {
		try {
			const res = JSON.parse(event.data);
			processWsData(res);
		} catch(err) {
			console.log("ws解析错误", err)
		}
	};
	ws.onclose = () => {
		setTimout(()=>initWs, 3000)
	}
}

const sendMsg = (value) => {
	if(ws.value && ws.value.readyState === WebSocket.OPEN) {
		ws.value.send(value)
	} else {
		console.log("发送失败", err)
	}
}

const processWsData = (res) => {
	if(!res || !res.type || !res.data) return;
	const entityId = res.data.deviceId;
	
	const position = [
		res.data.longitude,
		res.data.latitude,
		res.data.altitude
	];
	
	switch(res.type) {
		case "SHIP":
			addShipToMap(res.data, entityId, position);
			break;
		case "MISSILE":
			addMissileToMap(res.data, entityId, position);
			break;
		default: 
			console.log(data.type)
	}
}

const addShipToMap = (res, entityId, position) => {
	const graphic = mapModelRef.value.graphicLayer.getGraphiceById(entityId);
	if(!graphic) {
		mapModelRef.value.addShipEntity(res, entityId, position);
	} else {
		graphic.addDynamicPosition(position, 0)
	}
}
</script>

创建标签对象

const addShipEntity = (res, entityId, position) => {
	graphic.value = new mars3d.graphic.DivGif({
		id: entityId,
		position: position,
		attr: res
	});
	
	graphicLayer.value.addGraphic(graphic.value)
}

更多推荐