修改地图

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json

@@ -0,0 +1,161 @@
+[
+  {"code":"K54","lng":116.864504,"lat":36.580292},
+  {"code":"K55","lng":116.857721,"lat":36.580915},
+  {"code":"K56","lng":116.84603,"lat":36.582315},
+  {"code":"K57","lng":116.835372,"lat":36.583456},
+  {"code":"K58","lng":116.823809,"lat":36.582523},
+  {"code":"K59","lng":116.813668,"lat":36.578892},
+  {"code":"K60","lng":116.805077,"lat":36.57303},
+  {"code":"K61","lng":116.798876,"lat":36.565715},
+  {"code":"K62","lng":116.794871,"lat":36.55731},
+  {"code":"K63","lng":116.791447,"lat":36.5488},
+  {"code":"K64","lng":116.786995,"lat":36.540406},
+  {"code":"K65","lng":116.781607,"lat":36.532641},
+  {"code":"K66","lng":116.774733,"lat":36.525493},
+  {"code":"K67","lng":116.767455,"lat":36.51867},
+  {"code":"K68","lng":116.760581,"lat":36.511521},
+  {"code":"K69","lng":116.754112,"lat":36.504046},
+  {"code":"K70","lng":116.747238,"lat":36.497221},
+  {"code":"K71","lng":116.739556,"lat":36.49072},
+  {"code":"K72","lng":116.731874,"lat":36.483893},
+  {"code":"K73","lng":116.725809,"lat":36.476416},
+  {"code":"K74","lng":116.71934,"lat":36.469262},
+  {"code":"K75","lng":116.714648,"lat":36.460906},
+  {"code":"K76","lng":116.709238,"lat":36.453097},
+  {"code":"K77","lng":116.704245,"lat":36.444952},
+  {"code":"K78","lng":116.699945,"lat":36.436583},
+  {"code":"K78","lng":116.696894,"lat":36.428437},
+  {"code":"K80","lng":116.694674,"lat":36.419397},
+  {"code":"K81","lng":116.691207,"lat":36.410914},
+  {"code":"K82","lng":116.683856,"lat":36.403992},
+  {"code":"K83","lng":116.674701,"lat":36.398969},
+  {"code":"K84","lng":116.664021,"lat":36.396401},
+  {"code":"K85","lng":116.653895,"lat":36.392381},
+  {"code":"K86","lng":116.644645,"lat":36.38743},
+  {"code":"K87","lng":116.634658,"lat":36.383633},
+  {"code":"K88","lng":116.623839,"lat":36.381065},
+  {"code":"K89","lng":116.613991,"lat":36.37738},
+  {"code":"K90","lng":116.604421,"lat":36.372466},
+  {"code":"K91","lng":116.596376,"lat":36.366212},
+  {"code":"K92","lng":116.588952,"lat":36.359622},
+  {"code":"K93","lng":116.58166,"lat":36.35263},
+  {"code":"K94","lng":116.572283,"lat":36.348155},
+  {"code":"K95","lng":116.561518,"lat":36.345358},
+  {"code":"K96","lng":116.5511,"lat":36.342001},
+  {"code":"K97","lng":116.543113,"lat":36.335847},
+  {"code":"K98","lng":116.535473,"lat":36.329413},
+  {"code":"K99","lng":116.530959,"lat":36.321019},
+  {"code":"K100","lng":116.524816,"lat":36.313313},
+  {"code":"K101","lng":116.517853,"lat":36.30658},
+  {"code":"K102","lng":116.50741,"lat":36.303214},
+  {"code":"K103","lng":116.498011,"lat":36.298164},
+  {"code":"K104","lng":116.492789,"lat":36.290588},
+  {"code":"K105","lng":116.487915,"lat":36.282451},
+  {"code":"K106","lng":116.48513,"lat":36.273751},
+  {"code":"K107","lng":116.484434,"lat":36.26477},
+  {"code":"K108","lng":116.482346,"lat":36.256068},
+  {"code":"K109","lng":116.479909,"lat":36.247085},
+  {"code":"K110","lng":116.480953,"lat":36.238381},
+  {"code":"K111","lng":116.474687,"lat":36.220971},
+  {"code":"K112","lng":116.474687,"lat":36.220971},
+  {"code":"K113","lng":116.468073,"lat":36.213388},
+  {"code":"K114","lng":116.462155,"lat":36.206085},
+  {"code":"K1150","lng":116.456585,"lat":36.198501},
+  {"code":"K116","lng":116.454844,"lat":36.189511},
+  {"code":"K117","lng":116.454322,"lat":36.18052},
+  {"code":"K118","lng":116.453278,"lat":36.171489},
+  {"code":"K119","lng":116.450073,"lat":36.163385},
+  {"code":"K120","lng":116.447643,"lat":36.154871},
+  {"code":"K121","lng":116.442917,"lat":36.146339},
+  {"code":"K122","lng":116.441756,"lat":36.137402},
+  {"code":"K123","lng":116.440466,"lat":36.128509},
+  {"code":"K124","lng":116.438119,"lat":36.119675},
+  {"code":"K125","lng":116.43906,"lat":36.110446},
+  {"code":"K126","lng":116.441559,"lat":36.10191},
+  {"code":"K127","lng":116.442922,"lat":36.093098},
+  {"code":"K128","lng":116.4419,"lat":36.084075},
+  {"code":"K129","lng":116.440991,"lat":36.075077},
+  {"code":"K130","lng":116.441446,"lat":36.065987},
+  {"code":"K131","lng":116.444513,"lat":36.057446},
+  {"code":"K132","lng":116.445182,"lat":36.048615},
+  {"code":"K133","lng":116.443483,"lat":36.039641},
+  {"code":"K134","lng":116.439746,"lat":36.031215},
+  {"code":"K135","lng":116.433857,"lat":36.023613},
+  {"code":"K136","lng":116.431252,"lat":36.014834},
+
+  {"code":"K137","lng":116.431365,"lat":36.014834},
+
+  {"code":"K138","lng":116.431139,"lat":36.015009},
+  {"code":"K139","lng":116.431139,"lat":36.005848},
+  {"code":"K140","lng":116.428873,"lat":35.996948},
+  {"code":"K141","lng":116.42302,"lat":35.989299},
+  {"code":"K142","lng":116.416678,"lat":35.981876},
+  {"code":"K143","lng":116.412148,"lat":35.973628},
+  {"code":"K144","lng":116.40875,"lat":35.96492},
+  {"code":"K145","lng":116.407618,"lat":35.955936},
+  {"code":"K146","lng":116.406938,"lat":35.946886},
+  {"code":"K147","lng":116.409203,"lat":35.937992},
+  {"code":"K148","lng":116.412261,"lat":35.929188},
+  {"code":"K149","lng":116.415192,"lat":35.920454},
+  {"code":"K150","lng":116.416236,"lat":35.911326},
+  {"code":"K151","lng":116.415818,"lat":35.902197},
+  {"code":"K152","lng":116.413314,"lat":35.893405},
+  {"code":"K153","lng":116.409974,"lat":35.884612},
+  {"code":"K154","lng":116.403712,"lat":35.877171},
+  {"code":"K155","lng":116.397451,"lat":35.869729},
+  {"code":"K156","lng":116.390771,"lat":35.862527},
+  {"code":"K157","lng":116.384802,"lat":35.854733},
+  {"code":"K158","lng":116.381264,"lat":35.846193},
+  {"code":"K159","lng":116.375815,"lat":35.838318},
+  {"code":"K160","lng":116.370209,"lat":35.830526},
+  {"code":"K161","lng":116.366206,"lat":35.822089},
+  {"code":"K162","lng":116.361747,"lat":35.814167},
+  {"code":"K163","lng":116.356086,"lat":35.806346},
+  {"code":"K164","lng":116.348957,"lat":35.799374},
+  {"code":"K165","lng":116.341619,"lat":35.792402},
+  {"code":"K166","lng":116.3347,"lat":35.785089},
+  {"code":"K167","lng":116.326943,"lat":35.778456},
+  {"code":"K168","lng":116.317299,"lat":35.773863},
+  {"code":"K169","lng":116.309751,"lat":35.767229},
+  {"code":"K170","lng":116.30388,"lat":35.759573},
+  {"code":"K171","lng":116.298219,"lat":35.751746},
+  {"code":"K172","lng":116.290881,"lat":35.74494},
+  {"code":"K173","lng":116.282076,"lat":35.739154},
+  {"code":"K174","lng":116.272431,"lat":35.734389},
+  {"code":"K175","lng":116.264045,"lat":35.728432},
+  {"code":"K176","lng":116.257545,"lat":35.720943},
+  {"code":"K177","lng":116.252886,"lat":35.71273},
+  {"code":"K178","lng":116.247407,"lat":35.704879},
+  {"code":"K179","lng":116.241238,"lat":35.697371},
+  {"code":"K180","lng":116.234196,"lat":35.6904},
+  {"code":"K181","lng":116.226049,"lat":35.684243},
+  {"code":"K182","lng":116.217362,"lat":35.678514},
+  {"code":"K183","lng":116.208758,"lat":35.672627},
+  {"code":"K184","lng":116.200902,"lat":35.666283},
+  {"code":"K185","lng":116.194434,"lat":35.658863},
+  {"code":"K186","lng":116.189724,"lat":35.650712},
+  {"code":"K187","lng":116.183941,"lat":35.642973},
+  {"code":"K188","lng":116.176385,"lat":35.636248},
+  {"code":"K189","lng":116.167679,"lat":35.63058},
+  {"code":"K190","lng":116.158725,"lat":35.625216},
+  {"code":"K191","lng":116.151916,"lat":35.617975},
+  {"code":"K192","lng":116.1452,"lat":35.610178},
+  {"code":"K193","lng":116.140303,"lat":35.602095},
+  {"code":"K194","lng":116.137598,"lat":35.593248},
+  {"code":"K195","lng":116.136944,"lat":35.584263},
+  {"code":"K196","lng":116.137909,"lat":35.575207},
+  {"code":"K197","lng":116.139862,"lat":35.566291},
+  {"code":"K198","lng":116.140001,"lat":35.557251},
+  {"code":"K199","lng":116.139095,"lat":35.548242},
+  {"code":"K200","lng":116.136445,"lat":35.539503},
+  {"code":"K201","lng":116.132262,"lat":35.531164},
+  {"code":"K202","lng":116.126964,"lat":35.523226},
+  {"code":"K203","lng":116.120062,"lat":35.516206},
+  {"code":"K204","lng":116.112765,"lat":35.509378},
+  {"code":"K205","lng":116.106769,"lat":35.501773},
+  {"code":"K206","lng":116.101471,"lat":35.493727},
+  {"code":"K207","lng":116.096033,"lat":35.485894},
+  {"code":"K208","lng":116.088962,"lat":35.478935},
+  {"code":"K209","lng":116.08151,"lat":35.472134},
+  {"code":"K210","lng":116.074572,"lat":35.465123}
+]

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue

@@ -1,30 +1,39 @@
 <template>
-  <div class='AMapContainer' v-loading="loading" element-loading-text="地图加载中..." element-loading-spinner="el-icon-place"
+  <div
-    element-loading-background="rgba(0, 0, 0, 0.42)" ref="mapContainerRef"
+    class="AMapContainer"
-    :style="{ ...this.size, ...getReverseStyle }" />
+    v-loading="loading"
+    element-loading-text="地图加载中..."
+    element-loading-spinner="el-icon-place"
+    element-loading-background="rgba(0, 0, 0, 0.42)"
+    ref="mapContainerRef"
+    :style="{ ...this.size, ...getReverseStyle }"
+  />
 </template>
 
 <script lang="ts">
 import { onceObserver } from "@screen/utils/resizeObserver";
-import { loadAMap } from "./loadAMap"
+import { loadAMap } from "./loadAMap";
+
+const acData = require("./data/ac.json");
+const lczData = require("./data/lcz.json");
 
 export default {
-  name: 'AMapContainer',
+  name: "AMapContainer",
-  inject: [
+  inject: ["adpScale"],
-    'adpScale'
-  ],
   data() {
     return {
       size: null,
-      loading: true
+      loading: true,
-    }
+    };
   },
   computed: {
     getReverseStyle() {
       return {
-        transform: `scale(${1 / this.adpScale.scaleX}, ${1 / this.adpScale.scaleY})`,
+        transform: `scale(${1 / this.adpScale.scaleX}, ${
-      }
+          1 / this.adpScale.scaleY
-    }
+        })`,
+      };
+    },
   },
   async mounted() {
     // console.log(this.$refs.mapContainerRef);
@@ -32,18 +41,24 @@ export default {
 
     if (!this.AMap) return;
 
-    onceObserver.call(this, this.$refs.mapContainerRef.parentElement, ({ width, height }) => this.size = {
+    onceObserver.call(
-      width: `${width}px`,
+      this,
-      height: `${height + 24}px`,
+      this.$refs.mapContainerRef.parentElement,
-    });
+      ({ width, height }) =>
+        (this.size = {
+          width: `${width}px`,
+          height: `${height + 24}px`,
+        })
+    );
 
     this.aMapIns = new this.AMap.Map(this.$refs.mapContainerRef, {
       resizeEnable: true, //是否监控地图容器尺寸变化
       mapStyle: "amap://styles/blue",
       zoom: 9,
+      center: [116.629514, 35.794168],
     });
 
-    this.aMapIns.on('complete', () => {
+    this.aMapIns.on("complete", () => {
       this.loading = false;
 
       // var polyline1 = new this.AMap.Polyline({
@@ -55,7 +70,54 @@ export default {
       //   bubble: true,
       // })
       // this.aMapIns.add([polyline1])
-    })
+
+      // this.initPolygon(this.AMap);
+
+      //各市边界线
+      let acPolylines = [];
+      for (let i = 0; i < acData.length; i++) {
+        let datas = [];
+        var poly = acData[i].polyline.split(";");
+        for (let j = 0; j < poly.length; j++) {
+          datas.push(poly[j].split(","));
+        }
+
+        let pl = drawingLine(this.AMap, datas);
+        acPolylines.push(pl);
+
+        // polyline.setMap(this.aMapIns)
+      }
+      this.aMapIns.add(acPolylines);
+
+      //济菏高速
+      let lczDatas = [];
+      for (let i = 0; i < lczData.length; i++) {
+        lczDatas.push([lczData[i].lng, lczData[i].lat]);
+      }
+
+      let jhgsPl = drawingLine(this.AMap, lczDatas, 3);
+      this.aMapIns.add(jhgsPl);
+    });
+
+    //画线
+    function drawingLine(AMap, datas, bWeight = 1, olColor = "#00B3CC") {
+      return new AMap.Polyline({
+        path: datas,
+        isOutline: true,
+        outlineColor: olColor,
+        borderWeight: bWeight,
+        strokeColor: "#3366FF",
+        strokeOpacity: 1,
+        strokeWeight: 0,
+        // 折线样式还支持 'dashed'
+        strokeStyle: "solid",
+        // strokeStyle是dashed时有效
+        strokeDasharray: [10, 5],
+        lineJoin: "round",
+        lineCap: "round",
+        zIndex: 50,
+      });
+    }
 
     // this.aMapIns.enableAutoResize();
   },
@@ -64,14 +126,14 @@ export default {
       return {
         AMap: this.AMap,
         mapIns: this.aMapIns,
-      }
+      };
-    }
+    },
   },
   unmounted() {
     if (!this.aMapIns) return;
     this.aMapIns.destroyed();
   },
-}
+};
 </script>
 
 <style lang='scss' scoped>
@@ -82,7 +144,7 @@ export default {
   height: 100%;
   transform-origin: left top;
   background-color: #103253 !important;
-  transition: all .15s linear;
+  transition: all 0.15s linear;
 
   ::v-deep {
     .el-loading-mask {
@@ -94,10 +156,9 @@ export default {
         justify-content: center;
         flex-direction: column;
 
-
         .el-loading-text,
         .el-icon-place {
-          color: #59D1FE;
+          color: #59d1fe;
           font-size: 15px;
         }
 
@@ -111,7 +172,6 @@ export default {
 }
 
 @keyframes jump {
-
   0%,
   20%,
   50%,