更新地图

src/assets/mapjson/Chaangshazhen/myxiuanlufeiji1.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "road-line",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": 1, "name": "线路1" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 121.165324006652625, 32.450238797041074 ], [ 121.165556312331091, 32.456975661716854 ], [ 121.166485535044998, 32.46440944342806 ], [ 121.171596259971452, 32.472307836496213 ], [ 121.187393046107758, 32.466500194534333 ], [ 121.21341128209697, 32.457440273073807 ], [ 121.23246034773193, 32.446289600507001 ], [ 121.257084749650289, 32.437926596081894 ], [ 121.276133815285249, 32.431654342763068 ] ] ] } }
+]
+}

src/views/Map/Map_Dikong/leftrightEcahts/index.vue

@@ -19,38 +19,76 @@
           一号无人机
         </div>
         <div class="Echarts" ref="EchartsTop">
-          <el-steps :active="1" >
+          <!-- <el-steps :active="1">
-            <el-step v-for="(step, index) in steps" :key="index"  :icon="step.icon">
+            <el-step v-for="(step, index) in steps" :key="index" :icon="step.icon">
               <template #icon>
                 <img :src="step.image" alt="步骤图标" class="custom-icon" />
               </template>
-            </el-step>
+</el-step>
-          </el-steps>
+</el-steps> -->
+          <el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="myxiuanlu.features[0].geometry.coordinates[0][0]" :zoom="zoom"
+            :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
+            :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
+
+            <el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
+              @click="JSONclick" />
+
 
+            <el-amap-polyline :editable="false" :visible="true" :draggable="false"
+              :path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
+              lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4" geodesic />
+
+
+          </el-amap>
         </div>
         <div class="rightleft-title">
           二号无人机
         </div>
         <div class="Echarts" ref="EchartsTopTow">
-          <el-steps :active="2" >
+          <!-- <el-steps :active="2">
-            <el-step v-for="(step, index) in steps" :key="index"  :icon="step.icon">
+            <el-step v-for="(step, index) in steps" :key="index" :icon="step.icon">
               <template #icon>
                 <img :src="step.image" alt="步骤图标" class="custom-icon" />
               </template>
             </el-step>
-          </el-steps>
+          </el-steps> -->
+          <el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="roadline2.features[0].geometry.coordinates[0][0]" :zoom="zoom"
+            :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
+            :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
+
+            <el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
+              @click="JSONclick" />
+
+
+            <el-amap-polyline :editable="false" :visible="true" :draggable="false"
+              :path="roadline2.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
+              lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4" geodesic />
+
+          </el-amap>
         </div>
         <div class="rightleft-title">
           三号无人机
         </div>
         <div class="Echarts" ref="EchartsTopTow">
-          <el-steps :active="3" >
+          <!-- <el-steps :active="3">
-            <el-step v-for="(step, index) in steps" :key="index"  :icon="step.icon">
+            <el-step v-for="(step, index) in steps" :key="index" :icon="step.icon">
               <template #icon>
                 <img :src="step.image" alt="步骤图标" class="custom-icon" />
               </template>
             </el-step>
-          </el-steps>
+          </el-steps> -->
+          <el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="roadline.features[0].geometry.coordinates[0][0]" :zoom="zoom"
+            :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
+            :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
+            <el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
+              @click="JSONclick" />
+
+            <el-amap-polyline :editable="false" :visible="true" :draggable="false"
+              :path="roadline.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
+              lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4" geodesic />
+
+
+          </el-amap>
         </div>
       </div>
     </div>
@@ -59,6 +97,11 @@
 </template>
 <script>
 import titleBox from '@/views/components/title/index.vue'
+import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
+import myxiuanlu from "@/assets/mapjson/Chaangshazhen/myxiuanlufeiji1.geojson"
+import roadline from "@/assets/mapjson/Chaangshazhen/road-line.geojson"
+import roadline2 from "@/assets/mapjson/Chaangshazhen/road-line2.geojson"
+
 export default {
   name: 'mapLeftContent',
   components: { titleBox, },
@@ -75,13 +118,50 @@ export default {
       itemTwo: {
         height: '',
       },
+      changshazhen: changshazhen,
+      myxiuanlu: myxiuanlu,
+      roadline:roadline,
+      roadline2:roadline2,
+
+      polygonOptions: {
+        strokeColor: '#00C5EC',
+        fillColor: '#00AEFF'
+      },
+      zoom: 10,
+      zooms: [3, 20],
+      center: [121.298563, 32.451807],
+      map: null,
+      draggable: false,
+      visible: true,
 
 
     }
   },
 
   methods: {
+    init(map) {
+      this.map = map;
+      // o.setMapStyle('amap://styles/darkblue')
+      map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
+      console.log(this.map.getCenter())
+      console.log(this.$refs.map.$$getInstance())
+    },
+    click() {
+      alert('click map')
+    },
+    // 面图层样式
+    JSONclick: (e) => {
+      console.log('click event: ', e);
+    },
+    polylineclick(e, type) {
+      if (type == "线1") {
+
 
+
+      }
+      if (type == "线2") {
+      }
+    },
     next() {
       if (this.active < this.steps.length - 1) {
         this.active++;
@@ -120,15 +200,18 @@ export default {
       padding: 0 20px;
       margin: 30px 0;
       width: 100%;
+      height: 120px;
     }
   }
 
 
 }
-.custom-icon{
+
+.custom-icon {
   width: 30px;
 }
-::v-deep .el-step__icon.is-text{
+
+::v-deep .el-step__icon.is-text {
   background: transparent;
   border: none;
 }

src/views/Map/Map_ZhongDahuodong/index.vue

@@ -13,10 +13,10 @@
         <!-- 线 -->
         <el-amap-polyline :editable="false" :visible="true" :draggable="false"
           :path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
-          lineCap="round" @click="(e) => { polylineclick(e, '线1') }" />
+          lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4"/>
         <el-amap-polyline :editable="false" :visible="true" :draggable="false"
-          :path="roadline2.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
+          :path="roadline2.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="green" isOutline
-          lineCap="round" @click="(e) => { polylineclick(e, '线2') }" />
+          lineCap="round" @click="(e) => { polylineclick(e, '线2') }" :strokeWeight="4"/>
         <!-- 人员 -->
         <el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="index" :position="marker.position"
           @click="(e) => { clickArrayMarker(marker, e) }">

src/views/Map/Map_Zhongdianrenyuan/index.vue

@@ -20,7 +20,7 @@
             <!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
             <img :src="marker.imgSrc" alt="">
             <el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="greenyellow" :zIndex="500"
-            :strokeDasharray="[10,10]" strokeStyle="dashed" />
+            :strokeDasharray="[10,10]" strokeStyle="dashed" :strokeWeight="4"/>
           </div>
         </el-amap-marker>
 
@@ -31,6 +31,7 @@
             <img :src="marker.imgSrc" alt="">
             <el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="red" :zIndex="500"
             :strokeDasharray="[10,10]" strokeStyle="dashed"
+            :strokeWeight="4"
             />
           </div>
         </el-amap-marker>

src/views/Zhongdahuodong/quanzhendaolu/index.vue

@@ -40,12 +40,12 @@
 
       <el-amap-polyline :editable="false" :visible="true" :draggable="false"
         :path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="red" isOutline lineCap="round"
-        @click="(e) => { polylineclick(e, '线') }" />
+        @click="(e) => { polylineclick(e, '线') }" :strokeWeight="4"/>
 
 
       <el-amap-polyline :editable="false" :visible="true" :draggable="false"
         :path="roadline2.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="green" isOutline
-        lineCap="round" @click="(e) => { polylineclick(e, '线') }" />
+        lineCap="round" @click="(e) => { polylineclick(e, '线') }":strokeWeight="4" />
 
       <el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
         :position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">

src/views/components/MapWrenjidialog/index.vue

@@ -60,7 +60,7 @@
                                 :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-person">
                                 <el-amap-polyline :editable="false" :visible="true" :draggable="false"
                                     :path="roadline1.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red"
-                                    isOutline lineCap="round" />
+                                    isOutline lineCap="round" :strokeWeight="4"/>
 
                                 <el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions"
                                     :draggable="true" />

src/views/components/Mapdialog/index.vue

@@ -75,7 +75,7 @@
                                 :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-person">
                                 <el-amap-polyline :editable="false" :visible="true" :draggable="false"
                                     :path="roadline1.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red"
-                                    isOutline lineCap="round" />
+                                    isOutline lineCap="round" :strokeWeight="4"/>
 
                                 <el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions"
                                     :draggable="true" />