|
@@ -2,58 +2,123 @@
|
|
|
<div id="pick-coordinate-panel" class="sm-panel" v-drag>
|
|
<div id="pick-coordinate-panel" class="sm-panel" v-drag>
|
|
|
<div class="sm-function-module-sub-section" style="margin:0" v-stopdrag>
|
|
<div class="sm-function-module-sub-section" style="margin:0" v-stopdrag>
|
|
|
<div class="sm-half-L">
|
|
<div class="sm-half-L">
|
|
|
- <label>状态:</label>
|
|
|
|
|
- <span :class="{ active: isPicking }">{{ isPicking ? '拾取中...' : '已停止' }}</span>
|
|
|
|
|
|
|
+ <label>拾取模式:</label>
|
|
|
|
|
+ <el-select v-model="pickMode" size="small" style="width: 100px;">
|
|
|
|
|
+ <el-option label="点拾取" value="point" />
|
|
|
|
|
+ <el-option label="区域" value="polygon" />
|
|
|
|
|
+ </el-select>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="sm-half-L" v-if="lastPosition">
|
|
|
|
|
- <label>经度:</label>
|
|
|
|
|
- <span class="coord-value">{{ lastPosition.longitude }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="sm-half-L" v-if="lastPosition">
|
|
|
|
|
- <label>纬度:</label>
|
|
|
|
|
- <span class="coord-value">{{ lastPosition.latitude }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="sm-half-L" v-if="lastPosition">
|
|
|
|
|
- <label>高度:</label>
|
|
|
|
|
- <span class="coord-value">{{ lastPosition.height }} m</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="sm-half-L flex-between">
|
|
|
|
|
- <el-button
|
|
|
|
|
- :type="isPicking ? 'danger' : 'primary'"
|
|
|
|
|
- size="small"
|
|
|
|
|
- @click="togglePicking"
|
|
|
|
|
- class="pick-btn"
|
|
|
|
|
- >
|
|
|
|
|
- {{ isPicking ? '停止拾取' : '开始拾取' }}
|
|
|
|
|
- </el-button>
|
|
|
|
|
- <el-button
|
|
|
|
|
- size="small"
|
|
|
|
|
- @click="copyCoordinate"
|
|
|
|
|
- :disabled="!lastPosition"
|
|
|
|
|
- >
|
|
|
|
|
- 复制
|
|
|
|
|
- </el-button>
|
|
|
|
|
- <el-button
|
|
|
|
|
- size="small"
|
|
|
|
|
- @click="clearPosition"
|
|
|
|
|
- >
|
|
|
|
|
- 清空
|
|
|
|
|
- </el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="history-section" v-if="positionHistory.length > 0">
|
|
|
|
|
- <label>历史记录</label>
|
|
|
|
|
- <div class="history-list">
|
|
|
|
|
- <div
|
|
|
|
|
- class="history-item"
|
|
|
|
|
- v-for="(pos, index) in positionHistory"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- @click="copyHistoryCoordinate(pos)"
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <template v-if="pickMode === 'point'">
|
|
|
|
|
+ <div class="sm-half-L">
|
|
|
|
|
+ <label>状态:</label>
|
|
|
|
|
+ <span :class="{ active: isPicking }">{{ isPicking ? '拾取中...' : '已停止' }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sm-half-L" v-if="lastPosition">
|
|
|
|
|
+ <label>经度:</label>
|
|
|
|
|
+ <span class="coord-value">{{ lastPosition.longitude }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sm-half-L" v-if="lastPosition">
|
|
|
|
|
+ <label>纬度:</label>
|
|
|
|
|
+ <span class="coord-value">{{ lastPosition.latitude }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sm-half-L" v-if="lastPosition">
|
|
|
|
|
+ <label>高度:</label>
|
|
|
|
|
+ <span class="coord-value">{{ lastPosition.height }} m</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sm-half-L flex-between">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ :type="isPicking ? 'danger' : 'primary'"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ @click="togglePicking"
|
|
|
|
|
+ class="pick-btn"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ isPicking ? '停止拾取' : '开始拾取' }}
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ @click="copyCoordinate"
|
|
|
|
|
+ :disabled="!lastPosition"
|
|
|
>
|
|
>
|
|
|
- <span class="history-index">{{ index + 1 }}.</span>
|
|
|
|
|
- <span class="history-coord">{{ pos.longitude }}, {{ pos.latitude }}</span>
|
|
|
|
|
|
|
+ 复制
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ @click="clearPosition"
|
|
|
|
|
+ >
|
|
|
|
|
+ 清空
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="history-section" v-if="positionHistory.length > 0">
|
|
|
|
|
+ <label>历史记录</label>
|
|
|
|
|
+ <div class="history-list">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="history-item"
|
|
|
|
|
+ v-for="(pos, index) in positionHistory"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ @click="copyHistoryCoordinate(pos)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span class="history-index">{{ index + 1 }}.</span>
|
|
|
|
|
+ <span class="history-coord">{{ pos.longitude }}, {{ pos.latitude }}</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <div class="sm-half-L">
|
|
|
|
|
+ <label>状态:</label>
|
|
|
|
|
+ <span :class="{ active: isDrawing }">{{ isDrawing ? '绘制中...' : (polygonPositions.length > 0 ? '已绘制' : '未开始') }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sm-half-L" v-if="polygonPositions.length > 0">
|
|
|
|
|
+ <label>顶点数:</label>
|
|
|
|
|
+ <span class="coord-value">{{ polygonPositions.length }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sm-half-L" v-if="polygonPositions.length >= 3">
|
|
|
|
|
+ <label>面积:</label>
|
|
|
|
|
+ <span class="coord-value">{{ areaText }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sm-half-L flex-between">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ :type="isDrawing ? 'danger' : 'primary'"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ @click="toggleDrawing"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ isDrawing ? '完成绘制' : '开始绘制' }}
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ @click="clearPolygon"
|
|
|
|
|
+ :disabled="polygonPositions.length === 0"
|
|
|
|
|
+ >
|
|
|
|
|
+ 清空
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="polygon-info" v-if="polygonPositions.length > 0">
|
|
|
|
|
+ <label>顶点坐标</label>
|
|
|
|
|
+ <div class="vertex-list">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="vertex-item"
|
|
|
|
|
+ v-for="(pt, index) in polygonPositions"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span class="vertex-index">{{ index + 1 }}</span>
|
|
|
|
|
+ <span class="vertex-coord">{{ pt.longitude }}, {{ pt.latitude }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="export-section" v-if="polygonPositions.length >= 3">
|
|
|
|
|
+ <label>导出</label>
|
|
|
|
|
+ <div class="flex-between">
|
|
|
|
|
+ <el-button size="small" @click="exportToTxt" class="export-btn">
|
|
|
|
|
+ 导出TXT
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button size="small" @click="exportToGeoJson" class="export-btn">
|
|
|
|
|
+ 导出GeoJSON
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -66,18 +131,36 @@ export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
isPicking: false,
|
|
isPicking: false,
|
|
|
|
|
+ isDrawing: false,
|
|
|
|
|
+ pickMode: 'point',
|
|
|
handler: null,
|
|
handler: null,
|
|
|
|
|
+ handlerArea: null,
|
|
|
lastPosition: null,
|
|
lastPosition: null,
|
|
|
- positionHistory: []
|
|
|
|
|
|
|
+ positionHistory: [],
|
|
|
|
|
+ polygonPositions: [],
|
|
|
|
|
+ areaText: '',
|
|
|
|
|
+ doubleClickHandler: null
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
this.initHandler()
|
|
this.initHandler()
|
|
|
- this.startPicking()
|
|
|
|
|
|
|
+ if (this.pickMode === 'point') {
|
|
|
|
|
+ this.startPicking()
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
beforeUnmount() {
|
|
beforeUnmount() {
|
|
|
this.destroyPick()
|
|
this.destroyPick()
|
|
|
},
|
|
},
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ pickMode(newMode) {
|
|
|
|
|
+ if (newMode === 'point') {
|
|
|
|
|
+ this.stopDrawing()
|
|
|
|
|
+ this.startPicking()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.stopPicking()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
initHandler() {
|
|
initHandler() {
|
|
|
if (!this.handler) {
|
|
if (!this.handler) {
|
|
@@ -86,19 +169,19 @@ export default {
|
|
|
},
|
|
},
|
|
|
startPicking() {
|
|
startPicking() {
|
|
|
this.initHandler()
|
|
this.initHandler()
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
this.handler.setInputAction((movement) => {
|
|
this.handler.setInputAction((movement) => {
|
|
|
if (typeof viewer === 'undefined' || !viewer || !viewer.scene) {
|
|
if (typeof viewer === 'undefined' || !viewer || !viewer.scene) {
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
let cartesian = viewer.scene.pickPosition(movement.position)
|
|
let cartesian = viewer.scene.pickPosition(movement.position)
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (!cartesian) {
|
|
if (!cartesian) {
|
|
|
const ray = viewer.camera.getPickRay(movement.position)
|
|
const ray = viewer.camera.getPickRay(movement.position)
|
|
|
cartesian = viewer.scene.globe.pick(ray, viewer.scene)
|
|
cartesian = viewer.scene.globe.pick(ray, viewer.scene)
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (cartesian) {
|
|
if (cartesian) {
|
|
|
const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
|
|
const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
|
|
|
if (cartographic) {
|
|
if (cartographic) {
|
|
@@ -127,7 +210,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
this.isPicking = true
|
|
this.isPicking = true
|
|
|
},
|
|
},
|
|
|
updatePosition(longitude, latitude, height, cartesian) {
|
|
updatePosition(longitude, latitude, height, cartesian) {
|
|
@@ -136,12 +219,12 @@ export default {
|
|
|
latitude,
|
|
latitude,
|
|
|
height
|
|
height
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (this.positionHistory.length >= 10) {
|
|
if (this.positionHistory.length >= 10) {
|
|
|
this.positionHistory.shift()
|
|
this.positionHistory.shift()
|
|
|
}
|
|
}
|
|
|
this.positionHistory.push({ ...this.lastPosition })
|
|
this.positionHistory.push({ ...this.lastPosition })
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (typeof viewer !== 'undefined' && viewer && viewer.entities) {
|
|
if (typeof viewer !== 'undefined' && viewer && viewer.entities) {
|
|
|
viewer.entities.removeById('pick-point-marker')
|
|
viewer.entities.removeById('pick-point-marker')
|
|
|
viewer.entities.add({
|
|
viewer.entities.add({
|
|
@@ -202,12 +285,161 @@ export default {
|
|
|
viewer.entities.removeById('pick-point-marker')
|
|
viewer.entities.removeById('pick-point-marker')
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ initAreaHandler() {
|
|
|
|
|
+ if (!this.handlerArea) {
|
|
|
|
|
+ this.handlerArea = new Cesium.MeasureHandler(
|
|
|
|
|
+ viewer,
|
|
|
|
|
+ Cesium.MeasureMode.Area,
|
|
|
|
|
+ Cesium.ClampMode.Space
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handlerArea = this.handlerArea
|
|
|
|
|
+
|
|
|
|
|
+ handlerArea.activeEvt.addEventListener(isActive => {
|
|
|
|
|
+ if (isActive == true) {
|
|
|
|
|
+ viewer.enableCursorStyle = false
|
|
|
|
|
+ viewer._element.style.cursor = ''
|
|
|
|
|
+ } else {
|
|
|
|
|
+ viewer.enableCursorStyle = true
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ handlerArea.measureEvt.addEventListener(result => {
|
|
|
|
|
+ const area = Number(result.area)
|
|
|
|
|
+ if (area > 1000000) {
|
|
|
|
|
+ this.areaText = (area / 1000000).toFixed(2) + ' km²'
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.areaText = area.toFixed(2) + ' m²'
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ this.polygonPositions = result.positions.map(pos => {
|
|
|
|
|
+ const cartographic = Cesium.Cartographic.fromCartesian(pos)
|
|
|
|
|
+ return {
|
|
|
|
|
+ longitude: Cesium.Math.toDegrees(cartographic.longitude).toFixed(6),
|
|
|
|
|
+ latitude: Cesium.Math.toDegrees(cartographic.latitude).toFixed(6),
|
|
|
|
|
+ height: cartographic.height.toFixed(2)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ startDrawing() {
|
|
|
|
|
+ this.clearPolygon()
|
|
|
|
|
+ this.initAreaHandler()
|
|
|
|
|
+
|
|
|
|
|
+ if (this.handlerArea) {
|
|
|
|
|
+ this.handlerArea.activate()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ this.isDrawing = true
|
|
|
|
|
+ },
|
|
|
|
|
+ stopDrawing() {
|
|
|
|
|
+ if (this.handlerArea) {
|
|
|
|
|
+ this.handlerArea.deactivate()
|
|
|
|
|
+ }
|
|
|
|
|
+ this.isDrawing = false
|
|
|
|
|
+ },
|
|
|
|
|
+ toggleDrawing() {
|
|
|
|
|
+ if (this.isDrawing) {
|
|
|
|
|
+ this.finishDrawing()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.startDrawing()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ finishDrawing() {
|
|
|
|
|
+ this.stopDrawing()
|
|
|
|
|
+ if (this.polygonPositions.length >= 3) {
|
|
|
|
|
+ ElMessage.success('区域绘制完成')
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ clearPolygon() {
|
|
|
|
|
+ this.stopDrawing()
|
|
|
|
|
+ this.polygonPositions = []
|
|
|
|
|
+ this.areaText = ''
|
|
|
|
|
+
|
|
|
|
|
+ if (this.handlerArea) {
|
|
|
|
|
+ this.handlerArea.clear()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ exportToTxt() {
|
|
|
|
|
+ if (this.polygonPositions.length < 3) {
|
|
|
|
|
+ ElMessage.warning('请先绘制至少3个顶点')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ let content = 'Polygon Coordinates Export\n'
|
|
|
|
|
+ content += '==========================\n\n'
|
|
|
|
|
+ content += `Total Vertices: ${this.polygonPositions.length}\n`
|
|
|
|
|
+ content += `Area: ${this.areaText}\n\n`
|
|
|
|
|
+ content += 'Vertex Data:\n'
|
|
|
|
|
+ content += '------------------------\n'
|
|
|
|
|
+
|
|
|
|
|
+ this.polygonPositions.forEach((pt, index) => {
|
|
|
|
|
+ content += `Point ${index + 1}: ${pt.longitude}, ${pt.latitude}, ${pt.height}\n`
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ content += '\nPolygon WKT:\n'
|
|
|
|
|
+ content += `POLYGON ((${this.polygonPositions.map(p => `${p.longitude} ${p.latitude}`).join(', ')}, ${this.polygonPositions[0].longitude} ${this.polygonPositions[0].latitude}))\n`
|
|
|
|
|
+
|
|
|
|
|
+ const blob = new Blob(['\ufeff' + content], { type: 'text/plain;charset=utf-8' })
|
|
|
|
|
+ const url = URL.createObjectURL(blob)
|
|
|
|
|
+ const link = document.createElement('a')
|
|
|
|
|
+ link.href = url
|
|
|
|
|
+ link.download = `polygon_coordinates_${Date.now()}.txt`
|
|
|
|
|
+ document.body.appendChild(link)
|
|
|
|
|
+ link.click()
|
|
|
|
|
+ document.body.removeChild(link)
|
|
|
|
|
+ URL.revokeObjectURL(url)
|
|
|
|
|
+
|
|
|
|
|
+ ElMessage.success('TXT文件导出成功')
|
|
|
|
|
+ },
|
|
|
|
|
+ exportToGeoJson() {
|
|
|
|
|
+ if (this.polygonPositions.length < 3) {
|
|
|
|
|
+ ElMessage.warning('请先绘制至少3个顶点')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const coordinates = this.polygonPositions.map(p => [parseFloat(p.longitude), parseFloat(p.latitude)])
|
|
|
|
|
+ coordinates.push([...coordinates[0]])
|
|
|
|
|
+
|
|
|
|
|
+ const geoJson = {
|
|
|
|
|
+ type: 'FeatureCollection',
|
|
|
|
|
+ features: [{
|
|
|
|
|
+ type: 'Feature',
|
|
|
|
|
+ properties: {
|
|
|
|
|
+ name: `polygon_${Date.now()}`
|
|
|
|
|
+ },
|
|
|
|
|
+ geometry: {
|
|
|
|
|
+ type: 'Polygon',
|
|
|
|
|
+ coordinates: [coordinates]
|
|
|
|
|
+ }
|
|
|
|
|
+ }]
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const blob = new Blob([JSON.stringify(geoJson, null, 2)], { type: 'application/geo+json;charset=utf-8' })
|
|
|
|
|
+ const url = URL.createObjectURL(blob)
|
|
|
|
|
+ const link = document.createElement('a')
|
|
|
|
|
+ link.href = url
|
|
|
|
|
+ link.download = `polygon_${Date.now()}.geojson`
|
|
|
|
|
+ document.body.appendChild(link)
|
|
|
|
|
+ link.click()
|
|
|
|
|
+ document.body.removeChild(link)
|
|
|
|
|
+ URL.revokeObjectURL(url)
|
|
|
|
|
+
|
|
|
|
|
+ ElMessage.success('GeoJSON文件导出成功')
|
|
|
|
|
+ },
|
|
|
destroyPick() {
|
|
destroyPick() {
|
|
|
this.stopPicking()
|
|
this.stopPicking()
|
|
|
|
|
+ this.stopDrawing()
|
|
|
|
|
+ this.clearPolygon()
|
|
|
if (this.handler) {
|
|
if (this.handler) {
|
|
|
this.handler.destroy()
|
|
this.handler.destroy()
|
|
|
this.handler = null
|
|
this.handler = null
|
|
|
}
|
|
}
|
|
|
|
|
+ if (this.handlerArea) {
|
|
|
|
|
+ this.handlerArea.deactivate()
|
|
|
|
|
+ this.handlerArea = null
|
|
|
|
|
+ }
|
|
|
if (typeof viewer !== 'undefined' && viewer && viewer.entities) {
|
|
if (typeof viewer !== 'undefined' && viewer && viewer.entities) {
|
|
|
viewer.entities.removeById('pick-point-marker')
|
|
viewer.entities.removeById('pick-point-marker')
|
|
|
}
|
|
}
|
|
@@ -273,11 +505,14 @@ export default {
|
|
|
margin-top: 5px;
|
|
margin-top: 5px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.history-section > label {
|
|
|
|
|
|
|
+.history-section > label,
|
|
|
|
|
+.polygon-info > label,
|
|
|
|
|
+.export-section > label {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
color: #606266;
|
|
color: #606266;
|
|
|
margin-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
|
|
|
+ display: block;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.history-list {
|
|
.history-list {
|
|
@@ -311,4 +546,50 @@ export default {
|
|
|
color: #303133;
|
|
color: #303133;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+
|
|
|
|
|
+.polygon-info {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.vertex-list {
|
|
|
|
|
+ max-height: 180px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.vertex-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 4px 8px;
|
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.vertex-index {
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ margin-right: 8px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ min-width: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.vertex-coord {
|
|
|
|
|
+ font-family: monospace;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.export-section {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.export-btn {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|