底图

src/components/easyMap/index.vue

@@ -6,153 +6,7 @@
       :baseMapView="baseMapViewCpt"
       @olZoomChange="(zoom) => $emit('zoomChange', zoom)"
       @olMapLoad="(map) => handleOlMapLoad(map)"
-      :layout="layout"
     />
-    <template v-if="drawEditsConfig.show">
-      <div class="draw-edits-config">
-        <div class="draw-edits-config_feature-type">
-          <el-select v-model="drawEditsConfig.featureType" @change="drawEditsSwitchFeatureType">
-            <el-option label="点" value="Point" :disabled="!drawEditsConfig.isPoint"/>
-            <el-option label="线" value="LineString" :disabled="!drawEditsConfig.isLineString"/>
-            <el-option label="多边形" value="Polygon" :disabled="!drawEditsConfig.isPolygon"/>
-          </el-select>
-        </div>
-        <div class="draw-edits-config_position __hover">
-          <el-popover
-              width="500px"
-              placement="top"
-              title="经纬度"
-              trigger="click"
-              v-model:visible="drawEditsConfig.showPosition"
-          >
-            <div class="popover">
-              <CusForm ref="ref_drawEditsForm" labelWidth="0">
-                <CusFormColumn
-                    ref="ref_drawEditsWkt"
-                    required
-                    :span="24"
-                    type="textarea"
-                    :rows="4"
-                    v-model:param="drawEditsConfig.wkt"
-                    :placeholder="drawEditsWktPlaceholderCpt"
-                    :rules="[
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'Point' || (drawEditsConfig.featureType === 'Point' && $easyMap.validWkt.Point(val)),
-                        message: '点位WKT坐标格式错误'
-                      },
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'LineString' || (drawEditsConfig.featureType === 'LineString' && $easyMap.validWkt.LineString(val)),
-                        message: '线段WKT坐标格式错误'
-                      },
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'Polygon' || (drawEditsConfig.featureType === 'Polygon' && $easyMap.validWkt.Polygon(val)),
-                        message: '区域WKT坐标格式错误'
-                      },
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'Polygon' || (drawEditsConfig.featureType === 'Polygon' && $easyMap.validWkt.PolygonKinks(val)),
-                        message: '区域坐标不可自相交'
-                      },
-                    ]"
-                />
-              </CusForm>
-
-<!--              <el-input-->
-<!--                  v-model="drawEditsConfig.wkt"-->
-<!--                  type="textarea"-->
-<!--                  :rows="4"-->
-<!--                  placeholder="请输入经纬度"-->
-<!--              ></el-input>-->
-              <div class="footer">
-                <el-button size="small" type="primary" @click="changeWkt">保存</el-button>
-                <el-button size="small" @click="drawEditsConfig.showPosition = false">取消</el-button>
-              </div>
-            </div>
-            <template #reference>
-              <div class="reference">
-                <img src="./images/draw-edits-position.png" alt />
-                <span>经纬度</span>
-              </div>
-            </template>
-          </el-popover>
-        </div>
-        <template v-if="drawEditsConfig.featureType === 'Point'">
-          <div class="draw-edits-config_icon">
-            <img v-if="drawEditsConfig.pointIcon" class="icon" :src="drawEditsConfig.pointIcon"/>
-            <div class="text"><CusEllipsis :value="drawEditsConfig.text || '点位'"/></div>
-          </div>
-        </template>
-        <template v-if="drawEditsConfig.featureType === 'LineString'">
-          <div class="draw-edits-config_split"/>
-          <div class="draw-edits-config_line">
-            <div class="text">线段</div>
-            <el-input-number
-                class="width"
-                v-model="drawEditsConfig.lineWidth"
-                :min="1"
-                :max="100"
-                controls-position="right"
-                step-strictly
-                @change="drawEditsConfig.refreshStyleFunc()"
-            />
-            <el-color-picker v-model="drawEditsConfig.lineColor" show-alpha @change="drawEditsConfig.refreshStyleFunc()"/>
-            <el-select class="type" v-model="drawEditsConfig.lineType" @change="drawEditsConfig.refreshStyleFunc()">
-              <el-option label="—————" :value="0"/>
-              <el-option label="— — — —" :value="1"/>
-              <el-option label="- - - - - -  - -" :value="2"/>
-            </el-select>
-          </div>
-        </template>
-        <template v-if="drawEditsConfig.featureType === 'Polygon'">
-          <div class="draw-edits-config_split"/>
-          <div class="draw-edits-config_line">
-            <div class="text">边框</div>
-            <el-input-number
-                class="width"
-                v-model="drawEditsConfig.polyBorderWidth"
-                :min="1"
-                :max="100"
-                controls-position="right"
-                step-strictly
-                @change="drawEditsConfig.refreshStyleFunc()"
-            />
-            <el-color-picker v-model="drawEditsConfig.polyBorderColor" show-alpha @change="drawEditsConfig.refreshStyleFunc()"/>
-            <el-select class="type" v-model="drawEditsConfig.polyBorderType" @change="drawEditsConfig.refreshStyleFunc()">
-              <el-option label="—————" :value="0"/>
-              <el-option label="— — — —" :value="1"/>
-              <el-option label="- - - - - -  - -" :value="2"/>
-            </el-select>
-          </div>
-          <div class="draw-edits-config_split"/>
-          <div class="draw-edits-config_poly">
-            <div class="text">填充</div>
-            <el-color-picker v-model="drawEditsConfig.polyColor" show-alpha @change="drawEditsConfig.refreshStyleFunc()"/>
-          </div>
-        </template>
-      </div>
-    </template>
-    <div class="base-switch">
-      <el-popover
-          placement="left"
-          trigger="hover"
-          popper-class="easy-map-base-switch"
-      >
-        <template #reference>
-          <div style="width: 200px; height: 200px; background-color: red;"/>
-        </template>
-        <div class="base-switch-item" v-if="ref_olMap">
-          <template v-for="[k, v] in ref_olMap.baseLayersMap">
-            <div
-                class="base-item __hover"
-                :class="{active: judgeBaseLayerActive(k)}"
-                @click="ref_olMap.switchBaseLayer(k)"
-            >
-              <div class="label">{{ v.get("_label") }}</div>
-              <img :src="v.get('_img')" />
-            </div>
-          </template>
-        </div>
-      </el-popover>
-    </div>
   </div>
   <ToolsLocationCom v-model:show="toolsShow.location" :mapFuncToLocation="toLocation"/>
 </template>
@@ -190,7 +44,6 @@ export default defineComponent({
   props: {
     baseMapLayers: {},
     baseMapView: {},
-    layout: {}
   },
   emits: ['easyMapLoad', 'zoomChange'],
   setup(props, { emit }) {
@@ -349,87 +202,5 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   position: relative;
-  .draw-edits-config {
-    height: 54px;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    z-index: 2000;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    padding: 0 10px;
-    border-top-right-radius: 6px;
-    $mR: 10px;
-    .draw-edits-config_feature-type {
-      width: 90px;
-    }
-    .draw-edits-config_position {
-      border: 1px solid #eee;
-      border-radius: 25px;
-      padding: 5px 15px;
-      margin-left: $mR;
-      color: #255fef;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .reference {
-        width: 70px;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-      }
-    }
-    .draw-edits-config_icon {
-      border: 1px solid #eee;
-      border-radius: 25px;
-      padding: 5px 15px;
-      color: #255fef;
-      margin-left: $mR;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .icon {
-        margin-right: 6px;
-        width: 20px;
-        height: 20px;
-      }
-      .text {
-        max-width: 100px;
-      }
-    }
-    .draw-edits-config_split {
-      background-color: #eee;
-      margin: 0 $mR;
-      width: 1px;
-      height: 100%;
-    }
-    .draw-edits-config_line, .draw-edits-config_poly {
-      display: flex;
-      align-items: center;
-      .text {
-        font-size: 14px;
-        color: #333333;
-        word-break: keep-all;
-        margin-right: $mR;
-      }
-      .width {
-        width: 80px;
-        margin-right: $mR;
-      }
-      .type {
-        width: 94px;
-        margin-left: $mR;
-      }
-    }
-  }
-}
-
-
-.base-switch {
-  position: absolute;
-  top: 0;
-  right: 0;
 }
 </style>

src/components/easyMap/initMapInfo.ts

@@ -1,8 +1,7 @@
 import * as layer from 'ol/layer'
 import * as source from 'ol/source'
+// @ts-ignore
 import HaituImg from './images/bg-ocean.png'
-import LutuImg from './images/bg-land.png'
-import WeixingImg from './images/bg-sky.png'
 import store from '@/store/index'
 
 const isInternet = true
@@ -16,7 +15,6 @@ const baseMapView = {
 const initBaseLayer = (obj: any) => {
   const layers: any = []
   obj.layersUrl.forEach((v: any) => {
-
     const s = new source.XYZ({
       projection: "EPSG:4326",
       url: v.url,

src/components/easyMap/ol-map.vue

@@ -1,40 +1,20 @@
 <template>
   <div class="easy-map-ol">
     <div class="map" ref="ref_easyMapOl"/>
-    <template v-if="layout === 'info'">
-      <div class="easy-map_ol-info_tips">
-        <div class="easy-map_ol-info-scaleLine" ref="ref_easyMap_scaleLine"></div>
-        <div class="easy-map_ol-info-info">
-          <div @click="controlMousePosition.format = !controlMousePosition.format">经度：{{controlMousePosition.format ? controlMousePosition.formatLongitude : controlMousePosition.longitude}}</div>
-          <div @click="controlMousePosition.format = !controlMousePosition.format">纬度：{{controlMousePosition.format ? controlMousePosition.formatLatitude : controlMousePosition.latitude}}</div>
-          <div>层级：
-            <div class="easy-map_ol-info-zoom">
-              <div class="easy-map_ol-info-zoom-button easy-map_ol-info-zoom-button_min __hover" @click="zoomChange(false)">-</div>
-              <div class="easy-map_ol-info-zoom-num">{{Math.floor(interactionZoom)}}</div>
-              <div class="easy-map_ol-info-zoom-button easy-map_ol-info-zoom-button_max __hover" @click="zoomChange(true)">+</div>
-            </div>
+    <div class="easy-map_ol-info_tips">
+      <div class="easy-map_ol-info-scaleLine" ref="ref_easyMap_scaleLine"></div>
+      <div class="easy-map_ol-info-info">
+        <div @click="controlMousePosition.format = !controlMousePosition.format">经度：{{controlMousePosition.format ? controlMousePosition.formatLongitude : controlMousePosition.longitude}}</div>
+        <div @click="controlMousePosition.format = !controlMousePosition.format">纬度：{{controlMousePosition.format ? controlMousePosition.formatLatitude : controlMousePosition.latitude}}</div>
+        <div>层级：
+          <div class="easy-map_ol-info-zoom">
+            <div class="easy-map_ol-info-zoom-button easy-map_ol-info-zoom-button_min __hover" @click="zoomChange(false)">-</div>
+            <div class="easy-map_ol-info-zoom-num">{{Math.floor(interactionZoom)}}</div>
+            <div class="easy-map_ol-info-zoom-button easy-map_ol-info-zoom-button_max __hover" @click="zoomChange(true)">+</div>
           </div>
         </div>
       </div>
-    </template>
-    <template v-else>
-      <div class="easy-map_ol-default-mouse-position" ref="ref_easyMap_olMousePosition" @click="controlMousePosition.format = !controlMousePosition.format">
-        <template v-if="controlMousePosition.format">
-          {{controlMousePosition.formatLongitude}}<br/>
-          {{controlMousePosition.formatLatitude}}
-        </template>
-        <template v-else>
-          {{controlMousePosition.longitude}}<br/>
-          {{controlMousePosition.latitude}}
-        </template>
-      </div>
-      <div class="easy-map_ol-default-zoom" ref="ref_easyMap_olZoom">
-        <div class="easy-map_ol-default-zoom-button" @click="zoomChange(true)">+</div>
-        <div class="easy-map_ol-default-zoom-num">{{Math.floor(interactionZoom)}}</div>
-        <div class="easy-map_ol-default-zoom-button" @click="zoomChange(false)">-</div>
-      </div>
-      <div class="easy-map_ol-default-scaleLine" ref="ref_easyMap_scaleLine"></div>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -70,7 +50,6 @@
     props: {
       baseMapLayers: { default: () => [] },
       baseMapView: {},
-      layout: {}
     },
     setup(props, { emit }) {
       const store = useStore();
@@ -267,8 +246,8 @@
     bottom: 10px;
     display: flex;
     .easy-map_ol-info-info {
-      background-color: rgba(255, 255, 255, 0.5);
-      border-radius: 6px;
+      background-color: rgba(255, 255, 255, 0.7);
+      border-radius: 8px;
       color: #333333;
       font-size: 12px;
       padding: 6px;
@@ -293,57 +272,8 @@
       }
     }
     .easy-map_ol-info-scaleLine {
-      width: 160px;
+      width: 180px;
     }
   }
-  .easy-map_ol-default-mouse-position {
-    cursor: pointer;
-    position: absolute;
-    z-index: 1;
-    color: #000;
-    top: unset;
-    font-size: 14px;
-    right: 10px;
-    bottom: 10px;
-    height: 50px;
-    padding: 5px 10px;
-    background-color: #fff;
-    border-radius: 2px;
-    line-height: 22px;
-    opacity: .8;
-  }
-  .easy-map_ol-default-zoom {
-    position: absolute;
-    bottom: 70px;
-    right: 10px;
-    >div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0;
-      padding: 0;
-      color: #000;
-      font-size: 12px;
-      font-weight: 700;
-      height: 20px;
-      width: 20px;
-      background-color: #fff;
-    }
-    .easy-map_ol-default-zoom-num {
-      border-top: 1px solid rgba(153, 153, 153, 0.32);
-      border-bottom: 1px solid rgba(153, 153, 153, 0.32);
-    }
-    .easy-map_ol-default-zoom-button {
-      cursor: pointer;
-      &:hover {
-        opacity: 0.7;
-      }
-    }
-  }
-  .easy-map_ol-default-scaleLine {
-    position: absolute;
-    bottom: 20px;
-    left: 20px;
-  }
 }
 </style>