|
|
@@ -5,40 +5,46 @@
|
|
|
</div>
|
|
|
<div class="mapDetail">
|
|
|
<span class="title">数据详情</span>
|
|
|
- <div class="detailMsg" v-for="(it, index) in drawLayers" :key="index">
|
|
|
- <div class="detailMsgTop">
|
|
|
- <span style="margin-right: 10px">绘制图形：{{ layerTypeFn(it.layerType) }}</span>
|
|
|
- <span>绘制ID：{{ it.layer._leaflet_id }}</span>
|
|
|
- </div>
|
|
|
- <!-- 标记和圆形标记 -->
|
|
|
- <div
|
|
|
- class="detailMsgBot"
|
|
|
- v-if="it.layerType === 'marker' || it.layerType === 'circlemarker'"
|
|
|
- >
|
|
|
- <span style="margin-right: 10px">精度：{{ it.layer._latlng.lat }}</span>
|
|
|
- <span>纬度：{{ it.layer._latlng.lng }}</span>
|
|
|
- </div>
|
|
|
- <!-- 圆形区域 -->
|
|
|
- <div class="detailMsgBot" v-if="it.layerType === 'circle'">
|
|
|
- <span>半径：{{ it.layer._mRadius }}m</span>
|
|
|
- <span style="margin-right: 10px">精度：{{ it.layer._latlng.lat }}</span>
|
|
|
- <span>纬度：{{ it.layer._latlng.lng }}</span>
|
|
|
- </div>
|
|
|
- <!-- 线段 -->
|
|
|
- <div class="detailMsgBot" v-if="it.layerType === 'polyline'">
|
|
|
- <div v-for="(iv, idx) in it.layer._latlngs" :key="idx" style="margin: 5px 0">
|
|
|
- <span style="margin-right: 10px">精度：{{ iv.lat }}</span>
|
|
|
- <span>纬度：{{ iv.lng }}</span>
|
|
|
+ <div v-if="drawLayers.length > 0">
|
|
|
+ <div class="detailMsg" v-for="(it, index) in drawLayers" :key="index">
|
|
|
+ <div class="detailMsgTop">
|
|
|
+ <span style="margin-right: 10px">绘制图形：{{ layerTypeFn(it.layerType) }}</span>
|
|
|
+ <span>绘制ID：{{ it.layer._leaflet_id }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 多边形区域 -->
|
|
|
- <div class="detailMsgBot" v-if="it.layerType === 'polygon'">
|
|
|
- <div v-for="(iv, idx) in it.layer._latlngs[0]" :key="idx" style="margin: 5px 0">
|
|
|
- <span style="margin-right: 10px">精度：{{ iv.lat }}</span>
|
|
|
- <span>纬度：{{ iv.lng }}</span>
|
|
|
+ <!-- 标记和圆形标记 -->
|
|
|
+ <div
|
|
|
+ class="detailMsgBot"
|
|
|
+ v-if="it.layerType === 'marker' || it.layerType === 'circlemarker'"
|
|
|
+ >
|
|
|
+ <span style="margin-right: 10px">精度：{{ it.layer._latlng.lat }}</span>
|
|
|
+ <span>纬度：{{ it.layer._latlng.lng }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 圆形区域 -->
|
|
|
+ <div class="detailMsgBot" v-if="it.layerType === 'circle'">
|
|
|
+ <span>半径：{{ it.layer._mRadius }}m</span>
|
|
|
+ <span style="margin-right: 10px">精度：{{ it.layer._latlng.lat }}</span>
|
|
|
+ <span>纬度：{{ it.layer._latlng.lng }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 线段 -->
|
|
|
+ <div class="detailMsgBot" v-if="it.layerType === 'polyline'">
|
|
|
+ <div v-for="(iv, idx) in it.layer._latlngs" :key="idx" style="margin: 5px 0">
|
|
|
+ <span style="margin-right: 10px">精度：{{ iv.lat }}</span>
|
|
|
+ <span>纬度：{{ iv.lng }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 多边形区域 -->
|
|
|
+ <div class="detailMsgBot" v-if="it.layerType === 'polygon'">
|
|
|
+ <div v-for="(iv, idx) in it.layer._latlngs[0]" :key="idx" style="margin: 5px 0">
|
|
|
+ <span style="margin-right: 10px">精度：{{ iv.lat }}</span>
|
|
|
+ <span>纬度：{{ iv.lng }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="nodata" v-else>
|
|
|
+ <img :src="nodata" alt="" />
|
|
|
+ <p class="nodataText">暂无数据，敬请期待</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -46,6 +52,7 @@
|
|
|
import { ref, nextTick, onMounted, reactive, watch } from 'vue'
|
|
|
import { CanvasLabel } from '@panzhiyue/leaflet-canvaslabel'
|
|
|
import img from '@/assets/mapdarw/images/marker-icon.png'
|
|
|
+import nodata from '@/assets/mapdarw/images/noData.png'
|
|
|
|
|
|
const map = ref(null)
|
|
|
const drawLayerGroup = ref(null)
|
|
|
@@ -249,7 +256,18 @@ onMounted(() => {
|
|
|
font-size: 14px
|
|
|
font-weight: bold
|
|
|
opacity: 0.7
|
|
|
-
|
|
|
+ .nodata
|
|
|
+ width: 70%
|
|
|
+ position: relative
|
|
|
+ left: 30%
|
|
|
+ top: 30%
|
|
|
+ img
|
|
|
+ margin-left: 20px
|
|
|
+ .nodataText
|
|
|
+ line-height: 30px
|
|
|
+ position: relative
|
|
|
+ top: -10px
|
|
|
+ font-size: 14px
|
|
|
#map
|
|
|
width: 100%
|
|
|
height: 100%
|
