| | |
| | | <template> |
| | | <div class="height-100 width-100 cesium" id="cesiumContainer"></div> |
| | | <div v-if="centerConfig.type && !centerConfig.latitude" class="pointLongitude">在地图上点击绘制项目中心点</div> |
| | | <div class="switch"> |
| | | <!-- <div class="switch"> |
| | | <div class="2d" v-if="dimension === 3" @click="switchModel('2D')">2D</div> |
| | | <div class="3d" v-else @click="switchModel('3D')">3D</div> |
| | | </div> |
| | | </div> --> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | |
| | | }) |
| | | viewer?.imageryLayers.addImageryProvider(annotation) |
| | | } |
| | | const Point = (longitude: number, latitude: number) => { |
| | | // 移除地图所有点 重新绘制 |
| | | viewer?.entities.removeAll() |
| | | const entity = viewer?.entities.add({ |
| | | position: Cesium.Cartesian3.fromDegrees(longitude, latitude), |
| | | point: { |
| | | pixelSize: 24, |
| | | color: Cesium.Color.GREEN, |
| | | outlineColor: Cesium.Color.WHITE, |
| | | outlineWidth: 2, |
| | | } |
| | | }) |
| | | // // 将相机定位到标记点的位置 |
| | | // viewer.value?.camera.flyTo({ |
| | | // destination: entity.position, |
| | | // duration: 2 |
| | | // }) |
| | | } |
| | | |
| | | // 切换为二三维模式 |
| | | const switchModel = (type: string) => { |
| | | switch (type) { |
| | |
| | | dimension.value = 3 |
| | | } |
| | | } |
| | | |
| | | // 设置项目中所有的项目中心坐标 |
| | | watch(() => store.state.map.pointList, (newVal) => { |
| | | if (newVal) { |
| | | pointCenter(viewer, newVal) |
| | | clickPoint(viewer, newVal) |
| | | } |
| | | }, { |
| | | deep: true |
| | | }) |
| | | // 点击地图生成项目中心点 |
| | | watch(() => store.state.map.centerConfig.type, (newVal) => { |
| | | if (newVal === false || !store.state.map.centerConfig.type) { |
| | | viewer?.entities.removeAll() |
| | | handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) |
| | | } else { |
| | | handler.setInputAction(function (e: any) { |
| | | const cartesian = viewer?.camera.pickEllipsoid(e.position, viewer?.scene.globe.ellipsoid) |
| | | if (cartesian) { |
| | | const cartographic = Cesium.Cartographic.fromCartesian(cartesian) |
| | | const longitude = Cesium.Math.toDegrees(cartographic.longitude) |
| | | const latitude = Cesium.Math.toDegrees(cartographic.latitude) |
| | | const data = { |
| | | longitude, |
| | | latitude, |
| | | } |
| | | store.commit('SET_CENTER_CONFIG_LATITUDE', data) |
| | | Point(longitude, latitude) |
| | | } |
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK |
| | | ) |
| | | } |
| | | }, { |
| | | deep: true |
| | | }) |
| | | onMounted(() => { |
| | | console.log('=====执行=====') |
| | | init() |
| | | }) |
| | | // 销毁地图模型 |