推荐 最新
爬虫爬呀爬

cesium 请问如何通过点击车辆模型，实现视角跟随？

let socketInfo = 'xxxxxx' let ws = new WebSocket(socketInfo) let pingInterval = ref(null) // 心跳间隔ID let viewer = null let entity = null let polylineInitialized = false; // 轨迹线是否已初始化的标志 let polylineEntity = null; // 用于存储轨迹线实体 let pointEntity = null; const positionParams = []; // 用于存储所有的位置参数数据 const bufferLimit = 50; // 缓冲区大小限制 // 加载websocket function webValue() { // 初始Websocket const onOpen = () => { const data = JSON.stringify({ command: 1, serializeAlgorithm: 1, token: window.localStorage.getItem('token') }); ws.send(data); // 发送JSON字符串 // 设置心跳间隔为5秒 pingInterval.value = window.setInterval(() => { const pingMessage = JSON.stringify({ command: 2, serializeAlgorithm: 1 }); ws.send(pingMessage); }, 5000); }; // 接收websocket数据 const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { processPositionParams(data.data); updateCarModelPosition(positionParams);// 实时更新车辆移动位置 if (!polylineInitialized) { initializePolyline(positionParams); // 初始化轨迹线 polylineInitialized = true; // 标记轨迹线已初始化 } else { updatePolylinePosition(positionParams); // 更新轨迹线位置 } } }; // 封装处理返回的参数 function processPositionParams(data) { const targetingTypes = { 0x10: 'RTK', 0x11: 'UWB', 0x12: '融合' }; const newPositionParam = { TargetingType: targetingTypes[data.type], UID: data.uid, Angle: data.angle, Height: data.height, longitude: data.longitude, latitude: data.latitude }; positionParams.push(newPositionParam); // 超过缓冲区大小限制时移除最旧的位置参数数据 if (positionParams.length > bufferLimit) { positionParams.shift(); } const labelText = `终端ID:${data.uid},定位类型:${targetingTypes[data.type]}\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${data.height}`; point(positionParams, labelText);// 更新实体点位置信息 } const onClose = () => { window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 console.log('Websocket连接关闭'); webValue(); }; const onError = (error) => { console.log('Websocket连接错误'); ws.close(); window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 webValue(); }; ws.addEventListener('open', onOpen); ws.addEventListener('message', onMessage); ws.addEventListener('close', onClose); ws.addEventListener('error', onError); } ------------------------------------- // 绘制车辆模型和轨迹点、轨迹线 let checkedPoint = ref(true); let checkedLines = ref(false); // 保存checkedPoint和checkedLines的值到LocalStorage function saveCheckedValues() { localStorage.setItem('checkedPoint', JSON.stringify(checkedPoint.value)); localStorage.setItem('checkedLines', JSON.stringify(checkedLines.value)); } // 从LocalStorage中获取checkedPoint和checkedLines的值 function loadCheckedValues() { const storedCheckedPoint = localStorage.getItem('checkedPoint'); const storedCheckedLines = localStorage.getItem('checkedLines'); if (storedCheckedPoint) { checkedPoint.value = JSON.parse(storedCheckedPoint); } if (storedCheckedLines) { checkedLines.value = JSON.parse(storedCheckedLines); } } // 监听checkedPoint和checkedLines的变化，并保存到LocalStorage watch([checkedPoint, checkedLines], saveCheckedValues, { deep: true }); // 在页面加载时加载checkedPoint和checkedLines的值 window.addEventListener('load', loadCheckedValues); // 车辆模型 let carModelData = null; let shouldFollowCar = false; // 标志位 function updateCarModelPosition(positions) { if (positions.length === 0) { return; } const latestPosition = positions[positions.length - 1]; const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4); if (!carModelData) { createCarModel(cartesian3, latestPosition.Angle); } else { carModelData.position = cartesian3; const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(latestPosition.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll); } } function createCarModel(cartesian3, angle) { const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6); const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000); carModelData = viewer.entities.add({ position: cartesian3, orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll), model: { uri: "http://127.0.0.1:5501/car/scene.gltf", scale: 75, scaleByDistance, distanceDisplayCondition, }, id: 'carModel' // 添加id属性 }); } --------------------------------------------------------------- // 轨迹点 和 轨迹线 和 标签文字 let positionsArray = []; let entityList = []; function point(positions, labelText) { const cartesian3Array = []; positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); // 移除之前的实体点 for (const entity of entityList) { viewer.entities.remove(entity); } entityList = []; for (const position of positions) { let entityIndex = entityList.length; const cartesian3 = Cesium.Cartesian3.fromDegrees( position.longitude, position.latitude, 0.02 ); const pointLabel = new Cesium.Entity({ position: cartesian3, point: { pixelSize: 10, color: Cesium.Color.BLUE, show: checkedPoint.value, outlineColor: Cesium.Color.WHITE, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 1, 300, 0.5), outlineWidth: 1, }, // label: { // text: labelText, // font: '14pt monospace', // show: new Cesium.CallbackProperty(() => { // return entityIndex === entityList.length - 1; // }, false), // style: Cesium.LabelStyle.FILL_AND_OUTLINE, // outlineWidth: 2, // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // pixelOffset: new Cesium.Cartesian2(0, -9), // scaleByDistance: new Cesium.NearFarScalar(300, 1, 1000, 0.4), //设置随图缩放距离和比例 // scale: 1, // fillColor: Cesium.Color.WHITE,//标签的文本填充颜色。 // outlineColor: Cesium.Color.WHITE,//标签的文本轮廓颜色。 // }, }); entityList.push(pointLabel); viewer.entities.add(pointLabel); cartesian3Array.push(cartesian3); } } -------------------------------------------------------- // 创建新的轨迹线 let polylineGeometry = null; let geometryInstance = null; function initializePolyline(positions) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry = new Cesium.PolylineGeometry({ positions: positionsInCartesian, width: 5, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 10, 500, 1), }); geometryInstance = new Cesium.GeometryInstance({ geometry: polylineGeometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) } }); const primitive = new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType(Cesium.Material.ColorType) }) }); viewer.scene.primitives.add(primitive); } // 更新轨迹线位置 function updatePolylinePosition(positions) { if (geometryInstance) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry.positions = positionsInCartesian; geometryInstance.geometry = polylineGeometry; geometryInstance.show = checkedLines.value; } } ***

前端 javascript vue3 cesium
24
1
0
浏览量381
ciiiiinema

普通用户绑定了不同的uid，通过模拟器进行不同uid发送websocket，然后管理员用户就可以看见不同uid的车辆在上面跑?

请问大佬们，当不同的普通用户绑定了不同的uid，通过后台模拟器实现发送不同的websocket数据，管理员用户如何实现可以渲染多个车辆模型在cesium地图上面跑？目前我只有一个车辆模型在上面跑动，如果后台发送多个不同的websocket数据的时候，车辆模型渲染就会一闪的一闪的出现车辆模型，求大佬们指教一下，万分谢谢 // 接收websocket数据 const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { if (data.data.state !== undefined) { return; } else { // console.log('=====', data.data); processPositionParams(data.data); updateCarModelPosition(positionParams);// 实时更新车辆移动位置 if (!polylineInitialized) { initializePolyline(positionParams); // 初始化轨迹线 polylineInitialized = true;// 标记轨迹线已初始化 } else { updatePolylinePosition(positionParams); // 更新轨迹线位置 } } } }; // 车辆模型渲染 let carModelData = null; function updateCarModelPosition(positions) { if (positions.length === 0) { return; } const latestPosition = positions[positions.length - 1]; const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4); if (!carModelData) { createCarModel(cartesian3, latestPosition.Angle); } else { carModelData.position = cartesian3; const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(latestPosition.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll); } } function createCarModel(cartesian3, angle) { const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6); const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000); carModelData = viewer.entities.add({ position: cartesian3, orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll), model: { uri: "http://127.0.0.1:5501/car/scene.gltf", scale: 75, scaleByDistance, distanceDisplayCondition, }, id: 'carModel' // 添加id属性 }); } 更新后的代码------------------------------------ // 从服务器获取用户角色名 const userRole = computed(() => { return window.localStorage.getItem('roles') }) ------------------------------------------------ const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { if (data.data.state !== undefined) { return; } else { // console.log('=====', data.data); processPositionParams(data.data); updateCarModelPosition(positionParams);// 实时更新车辆移动位置 if (!polylineInitialized) { initializePolyline(positionParams); // 初始化轨迹线 polylineInitialized = true;// 标记轨迹线已初始化 } else { updatePolylinePosition(positionParams); // 更新轨迹线位置 } } } }; // 车辆模型渲染 let carModels = {}; // 存储车辆模型的对象 function updateCarModelPosition(positions) { positions.forEach(position => { const uid = position.UID; // 获取车辆的唯一标识符 if (!carModels[uid]) { createCarModel(position); } else { updateCarModel(carModels[uid], position); } }); } function createCarModel(position) { const cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4); const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(position.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6); const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000); const carModel = viewer.entities.add({ position: cartesian3, orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll), model: { uri: "http://127.0.0.1:5501/car/scene.gltf", scale: 75, scaleByDistance, distanceDisplayCondition, }, id: `carModel-${position.UID}` // 使用唯一标识符添加id属性 }); carModels[position.UID] = carModel; // 将车辆模型存储到对象中 } function updateCarModel(carModel, position) { const cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4); carModel.position = cartesian3; const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(position.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); carModel.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll); }

javascript 前端 cesium
17
1
0
浏览量253
来自武功山的爱

websocket会实时发送大量数据，导致页面卡顿？

websocket会实时发送大量数据时，我目前写的这些代码，会导致页面卡顿，性能优化我不知道怎么下手了，求大佬指教一下， 有偿。谢谢大佬们 let socketInfo = 'xxxx' let ws = new WebSocket(socketInfo) let pingInterval = ref(null) // 心跳间隔ID let viewer = null let entity = null let polylineInitialized = false; // 轨迹线是否已初始化的标志 let polylineEntity = null; // 用于存储轨迹线实体 let pointEntity = null; const bufferLimit = 50; // 缓冲区大小限制，可以根据需求调整 // 从服务器获取用户角色名 const userRole = computed(() => { return window.localStorage.getItem('roles') }) const dropdown1 = ref() // 点击地图获取经纬度 let longitude = ref(null); let latitude = ref(null); onMounted(() => { init() //加载3d地图, bindUid()//判断是否绑定uid LocusModel()//3D地图模型 }) // 地图的基础配置 function init() { viewer = new Cesium.Viewer('cesiumContainer', { //cesium的查看器的基本属性 baseLayerPicker: false,//配置图层底图的图标 //加载谷歌影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口 imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ // url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer", url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' //卫星地图 }) } // 判断是否绑定uid function bindUid(params) { if (window.localStorage.getItem('CardUID') === '') { return ElMessage({ message: '车辆终端ID未绑定,请点击右上角的“设置”图标进行绑定。', type: 'warning', showClose: true }); } else { webValue() } } // 加载websocket function webValue() { let oldPositionParams = [];//初始化一个变量来存储旧数据 let positionParams = []; // 用于存储所有的位置参数数据 // 初始Websocket const onOpen = () => { const data = JSON.stringify({ command: 1, serializeAlgorithm: 1, token: window.localStorage.getItem('token') }); ws.send(data); // 发送JSON字符串 // 设置心跳间隔为5秒 pingInterval.value = window.setInterval(() => { const pingMessage = JSON.stringify({ command: 2, serializeAlgorithm: 1 }); ws.send(pingMessage); }, 5000); }; // 接收websocket数据 const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { processPositionParams(data.data); updateCarModelPosition(positionParams);// 实时更新车辆移动位置 if (!polylineInitialized) { initializePolyline(positionParams); // 初始化轨迹线 polylineInitialized = true;// 标记轨迹线已初始化 } else { updatePolylinePosition(positionParams); // 更新轨迹线位置 } updateEntityPositions(positionParams); // 更新实体点的位置和标签文本。 } }; function processPositionParams(data) { const targetingTypes = { 0x10: 'RTK', 0x11: 'UWB', 0x12: '融合' }; const newPositionParam = { TargetingType: targetingTypes[data.type], UID: data.uid, Angle: data.angle, Height: data.height, longitude: data.longitude, latitude: data.latitude }; if (oldPositionParams.length > 0) { const oldPosition = oldPositionParams[oldPositionParams.length - 1]; if (isNewDataDifferent(newPositionParam, oldPosition)) { positionParams.push(newPositionParam); if (positionParams.length > bufferLimit) { positionParams.shift(); } } } else { positionParams.push(newPositionParam); } oldPositionParams.push(newPositionParam); if (oldPositionParams.length > bufferLimit) { oldPositionParams.shift(); } } function isNewDataDifferent(newData, oldData) { // 比较各个参数是否不同，如果有任何一个参数不同，就返回 true 表示数据不同 if ( newData.TargetingType !== oldData.TargetingType || newData.UID !== oldData.UID || newData.Angle !== oldData.Angle || newData.Height !== oldData.Height || newData.longitude !== oldData.longitude || newData.latitude !== oldData.latitude ) { return true; // 数据不同 } return false; // 数据相同 } const onClose = () => { window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 console.log('Websocket连接关闭'); webValue(); }; const onError = (error) => { console.log('Websocket连接错误'); ws.close(); window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 webValue(); }; ws.addEventListener('open', onOpen); ws.addEventListener('message', onMessage); ws.addEventListener('close', onClose); ws.addEventListener('error', onError); } // 点击按钮是否显示轨迹点和轨迹线 let checkedPoint = ref(true); let checkedLines = ref(false); // 保存checkedPoint和checkedLines的值到LocalStorage function saveCheckedValues() { localStorage.setItem('checkedPoint', JSON.stringify(checkedPoint.value)); localStorage.setItem('checkedLines', JSON.stringify(checkedLines.value)); } // 从LocalStorage中获取checkedPoint和checkedLines的值 function loadCheckedValues() { const storedCheckedPoint = localStorage.getItem('checkedPoint'); const storedCheckedLines = localStorage.getItem('checkedLines'); if (storedCheckedPoint) { checkedPoint.value = JSON.parse(storedCheckedPoint); } if (storedCheckedLines) { checkedLines.value = JSON.parse(storedCheckedLines); } } // 监听checkedPoint和checkedLines的变化，并保存到LocalStorage watch([checkedPoint, checkedLines], saveCheckedValues, { deep: true }); // 在页面加载时加载checkedPoint和checkedLines的值 window.addEventListener('load', loadCheckedValues); // 车辆模型 let carModelData = null; let shouldFollowCar = false; // 标志位 function updateCarModelPosition(positions) { if (positions.length === 0) { return; } const latestPosition = positions[positions.length - 1]; const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4); if (!carModelData) { createCarModel(cartesian3, latestPosition.Angle); } else { carModelData.position = cartesian3; const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(latestPosition.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll); } } function createCarModel(cartesian3, angle) { const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6); const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000); carModelData = viewer.entities.add({ position: cartesian3, orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll), model: { uri: "http://127.0.0.1:5501/car/scene.gltf", scale: 75, scaleByDistance, distanceDisplayCondition, }, id: 'carModel' // 添加id属性 }); } // 轨迹点 and 标签文字 let positionsArray = []; let entityList = []; function updateEntityPositions(positions) { for (let i = 0; i { return entityIndex === entityList.length - 1; }, false), style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -9), scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4), scale: 1, fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.WHITE, }, }); entityList.push(pointLabel); viewer.entities.add(pointLabel); } } // 移除多余的实体点（如果有的话） if (entityList.length > positions.length) { for (let i = positions.length; i [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry = new Cesium.PolylineGeometry({ positions: positionsInCartesian, width: 5, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 10, 500, 1), }); geometryInstance = new Cesium.GeometryInstance({ geometry: polylineGeometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) } }); const primitive = new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType(Cesium.Material.ColorType) }) }); viewer.scene.primitives.add(primitive); } // 更新轨迹线位置 function updatePolylinePosition(positions) { if (geometryInstance) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry.positions = positionsInCartesian; geometryInstance.geometry = polylineGeometry; geometryInstance.show = checkedLines.value; } } // 获取父组件传递的停车场信息的经纬度 let props = defineProps({ cesiumData: Object, }) // 3D地图模型 function LocusModel() { let modelMatrix = new Cesium.Transforms.eastNorthUpToFixedFrame(new Cesium.Cartesian3.fromDegrees(104.2255077, 30.57514052)); // gltf数据加载位置（自定义） let heading = Cesium.Math.toRadians(66); // 设置旋转角度 let orientation = Cesium.Matrix4.fromRotationTranslation( Cesium.Matrix3.fromRotationZ(heading), Cesium.Cartesian3.ZERO ); modelMatrix = Cesium.Matrix4.multiply(modelMatrix, orientation, new Cesium.Matrix4()); viewer.scene.primitives.add( new Cesium.Model.fromGltf({ url: 'http://127.0.0.1:5501/parking/lq_parking_space.gltf', //gltf文件的URL modelMatrix: modelMatrix, scale: 1, maximumSize: 1, minimumPixelSize: 0.1, scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.5), //设置随图缩放距离和比例 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), //设置可见距离 10000米可见 })); }

前端 javascript vue.js cesium
9
1
0
浏览量348
编程界菜niao

请问为什么出现多个uid的时候，不同的uid生成的数据，轨迹线会连接在一起？

请教一下大佬们，我这么写会出现不同uid的数据，轨迹线会出现连接，要求的是不同的uid的连接是单独的。求大佬们帮忙解答一下~谢谢！ "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241219/1ff1e5898314852bdafd391c4464f6f6.png) const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined || data.data.state !== undefined) { console.log('未响应'); return; } else { const uid = data.data.uid; // if (!polylineEntities[uid]) { initializePolyline(uid, positionParams); // 初始化轨迹线 } else { updatePolylinePosition(uid, positionParams); // 更新轨迹线位置 } } }; // 初始化创建新的轨迹线 let polylineEntities = {}; function initializePolyline(uid, positions) { polylineEntities[uid] = viewer.entities.add({ polyline: { positions: new Cesium.CallbackProperty(() => { return Cesium.Cartesian3.fromDegreesArray(positions.flatMap(pos => [pos.longitude, pos.latitude])); }, false), width: 5, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), //设置可见距离 1000米可见 scaleByDistance: new Cesium.NearFarScalar(100, 100, 500, 100), //设置随图缩放距离和比例 material: Cesium.Color.RED, }, }); } // 更新轨迹线位置 function updatePolylinePosition(uid, positions) { const polylineEntity = polylineEntities[uid]; if (polylineEntity) { polylineEntity.polyline.positions = new Cesium.CallbackProperty(() => { return Cesium.Cartesian3.fromDegreesArray(positions.flatMap(pos => [pos.longitude, pos.latitude])); }, false); polylineEntity.polyline.show = checkedLines.value; } }

前端 javascript cesium vue3
9
1
0
浏览量336
刘一抗二二

Cesium OSM Buildings 显示有问题？

// 添加 Cesium OSM Buildings。 const buildingsTileSet = await Cesium.createOsmBuildingsAsync(); viewer.scene.primitives.add(buildingsTileSet); 会显示不正常，如下图 https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241222/ac3fe707fbc9dc5d9df8179de74cd790.png

cesium
8
1
0
浏览量221
编程界菜niao

获取div容器在本地能打印出来，打包部署之后就变成null了？

请问大佬们，我在本地获取div容器是可以获取到的，但是打包运行之后，就会出现获取的div容器变为null的结果？导致cesium底图不会显示出来。求大佬们指点一下，谢谢 let viewer = null onMounted(() => { nextTick(() => { init() //加载3d地图, // webValue()//加载websocket bindUid()//判断是否绑定uid LocusModel()//3D地图模型 AdmainInfo()//基站设备显示 getautoDrive()//获取申请路径规划 }) }) function init() { const cesiumContainer = document.getElementById('cesiumContainer'); console.log('获取容器', cesiumContainer); viewer = new Cesium.Viewer('cesiumContainer', { //cesium的查看器的基本属性 baseLayerPicker: false,//配置图层底图的图标 //加载谷歌影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口 imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ // url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer", url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' //卫星地图 }) }) } 这是本地运行的时候能够获取容器 "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241215/0a2a2789c99623090f399e3862b980fa.png) "71d3fd17800206e1f111a3f9865f33c.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241215/13cd727cc3a77aaf1da6792c90209738.png) 这是打包之后运行的时候，获取不到容器了，并且报错“找不到 id 为 “cesiumContainer” 的元素”。 "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241215/e16d0f9a4fca41ee33a483ed9bdd755f.png) "a5503c5887788e2d1c59543370922f5.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241215/e4a04e9e3285f2069bf05e684540108d.png)

vue.js vue3 webpack cesium
0
1
0
浏览量28
周舟莫UI设计

Cesium 为什么label的eyeOffset设置的距离会有偏差 相比于圆？

总共四个entity，有一辆车三个圆且都在一个位置。在三个圆的右侧边缘显示一个label，我用的eyeOffset来偏移label的位置到右侧边缘（因为position在圆心），往右偏移会有明显的误差，往上偏移就没多少误差。 往右偏移： "12f6b5e07c218f455cf3332c53ad591.jpg" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241215/a03d7038cdfd12bb69901d381c5922d2.png) 往上偏移： "3520dad610e73b4d484c0a92adae914.jpg" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241215/42e040e965046a0977b2a06cea194599.png) 一辆车： const position = Cesium.Cartesian3.fromDegrees(123, 23, 0) const color = Cesium.Color.fromCssColorString('#fff') entities.add({ position, billboard: { image: icon, scale: 0.2, color } }) 三个圈附带label for (let i = 1; i <= 3; i++) { entities.add({ position, ellipse: { fill: false, outline: true, outlineColor: new Ceisum.Color(1, 1, 1, 0.5), semiMinorAxis: 100000 * i, // 半径 semiMajorAxis: 100000 * i, // 半径 height: 0 }, label: { test: 100 * i + 'km', font: '14px sans-serif', fillColor: new Cesium.Color(1, 1, 1, 0.5), eyeOffset: new Cesium.Cartesian3(100000 * i, 0, 0) // eyeOffset相对圆心偏移 } }) }

cesium 前端
0
1
0
浏览量24
编程界菜niao

在vue项目中的建模问题？

用网上的城市模型数据经过cesiumlab3.1转成b3dm格式后出现下面黑色建筑模型，用qgis删除黑色模型，重新画模型之后上面的是正常的，下面还是黑色的是什么原因https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241024/dda82962ae1761dc78e015db82de37bc.pnghttps://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241024/76f87d91002319c6ac7ac6c8cd0431aa.png 如问题所描述的一样

vue.js cesium
0
1
0
浏览量25