网站怎么做才 吸引人,自己制作电视直播app,微商城网站建设资讯,网站注册页面模板下载场景解决方案实现方案index.vue方案解决效果 场景
ceisum中Entity实例的生成和销毁#xff0c;大部分逻辑和vue代码分离#xff0c;导致不好阅读和维护
解决方案
ceisum 中实例 Entity 的生命周期#xff0c;和vue的生命周期’相似’#xff0c;把两个生命周期结合(把en… 场景解决方案实现方案index.vue方案解决效果 场景
ceisum中Entity实例的生成和销毁大部分逻辑和vue代码分离导致不好阅读和维护
解决方案
ceisum 中实例 Entity 的生命周期和vue的生命周期’相似’把两个生命周期结合(把entity封装为vue组件)
实现方案
vue中 template 中内容可以放置 弹框的内容通过ceisum 获取屏幕坐标进行渲染通过代码逻辑使 vue组件的 mounted 和 beforeDestroy 来和 entity 实例的生成 add和销毁destroy 相关联通过 Cesium.ScreenSpaceEventHandler 关联vue组件的方法实现交互
index.vue
采用原生cesium 实现entity的弹窗并封装为vue组件
!--/*** author: liuk* date: 2023/8/10* describe: 小区视角* email:1229223630qq.com
*/--
templatedivdiv classheat-info v-ifshowPopup :style{top:popupPos.top,left:popupPos.left}div classname小区/div{{showPopup}}div classbottom_divdivdiv classnum20.3nbsp;span℃/span/divdiv stylemargin-top: 6px;均温/div/divdivdiv classnum92.9nbsp;span%/span/divdiv stylemargin-top: 6px;室温/div/div/div/div/div
/templatescript
import communityList from ../data/community.jsonlet heatDatasource, preSelEntity,handler
export default {data(){return {showPopup: false,popupPos: {left: 0,top: 0},}},methods:{addEntity() {let features communityList.features || [];features.forEach(el {let pos Cesium.Cartesian3.fromDegreesArray(el.geometry.coordinates[0].map(el1 {return el1.join(,)}).join(,).split(,).map(Number));let boundingSphere new Cesium.BoundingSphere.fromPoints(pos);let center boundingSphere.center;heatDatasource.entities.add({position: center,customType: communityEntity,label: {text: el.properties.name,disableDepthTestDistance: Number.POSITIVE_INFINITY,horizontalOrigin: Cesium.HorizontalOrigin.Top,scaleByDistance: new Cesium.NearFarScalar(2000, 1, 500000, 0.1)},show: true,polygon: {hierarchy: new Cesium.PolygonHierarchy(pos),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,material: Cesium.Color.fromCssColorString(white).withAlpha(0),},polyline: {show: true,positions: pos,width:1.5,material: Cesium.Color.fromCssColorString(#C0C0C0).withAlpha(0.5),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND}});})},onMouseClick(movement){var preSelEntity window.dasViewer.scene.pick(movement.position);if (!Cesium.defined(preSelEntity) || !Cesium.defined(preSelEntity.id)) return;var entity preSelEntity.id;if (!(entity instanceof Cesium.Entity) || entity.customType ! communityEntity) return;window.dasViewer.camera.flyTo({destination: Cesium.Rectangle.fromCartesianArray(entity.polygon.hierarchy.getValue().positions),complete: () {this.$emit(hideCommunityEntity)}});},onMouseMove(movement){var pickedObject window.dasViewer.scene.pick(movement.endPosition);if (!Cesium.defined(pickedObject) || !Cesium.defined(pickedObject.id)) {this.resetSelectedEntity();return;}var entity pickedObject.id;if (!(entity instanceof Cesium.Entity) || entity.customType ! communityEntity) {this.resetSelectedEntity();return;}if (entity ! preSelEntity) {this.resetSelectedEntity();entity.polygon.material Cesium.Color.fromCssColorString(white).withAlpha(0.1);entity.polyline.material Cesium.Color.fromCssColorString(white).withAlpha(1);}preSelEntity entity;this.showPopupBox(movement.endPosition);},onMouseLeave(){this.showPopup false},resetSelectedEntity(){if (preSelEntity) {this.showPopup falsepreSelEntity.polygon.material Cesium.Color.fromCssColorString(white).withAlpha(0);preSelEntity.polyline.material Cesium.Color.fromCssColorString(#C0C0C0).withAlpha(0.5);preSelEntity null;}},showPopupBox(movement){this.showPopup truethis.popupPos.left ${movement.x 10}px;this.popupPos.top ${movement.y 10}px;}},mounted(){const self thisheatDatasource new Cesium.CustomDataSource(community);window.dasViewer.dataSources.add(heatDatasource);this.addEntity()handler new Cesium.ScreenSpaceEventHandler(window.dasViewer.scene.canvas);handler.setInputAction(self.onMouseClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.setInputAction(self.onMouseMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(self.onMouseLeave, Cesium.ScreenSpaceEventType.MOUSE_LEAVE);},beforeDestroy() {handler.destroy()window.dasViewer.dataSources.remove(heatDatasource);}
}
/scriptstyle langless scoped
.heat-info {position: absolute;width: 196px;min-height: 124px;padding: 12px;border: 1px solid rgba(85, 85, 85, 1);box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);border-radius: 4px;background-color: rgba(0, 0, 0, 0.8);color: #fff;z-index: 9999;pointer-events: none;.name {font-family: PingFangSC-Medium;font-size: 16px;color: #FFFFFF;letter-spacing: 0;font-weight: 500;margin-top: 5px;}.bottom_div {display: flex;position: relative;justify-content: space-between;font-size: 12px;color: #A2A3A3;letter-spacing: 0;font-weight: 400;font-family: PingFangSC-Regular;margin-top: 21px;.num {font-size: 20px;color: #FFFFFF;letter-spacing: 0;line-height: 16px;font-weight: 400;span {font-size: 12px;color: #FFFFFF;letter-spacing: 0;font-weight: 200;color: #A2A3A3;}}}
}
/style方案解决效果
