地图组件

app/src/components/Camera.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="camera-continer">
+
+  </div>
+</template>
+<script>
+
+export default {
+  name: "CameraContainer",
+  components: {},
+  data() {
+    return {
+        url: null
+    };
+  },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    getData() {
+        
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+.camera-continer {
+    width: 100%;
+    height: 100%;
+}
+</style>

app/src/components/Map.vue

@@ -0,0 +1,391 @@
+<template>
+  <div class="map">
+    <div id="map-container"></div>
+    <!-- 信息弹窗 -->
+    <div class="info-window" ref="infoWindow" v-if="firePoint">
+      <div class="info-content">
+        <div class="title">
+          <div class="txt">重点部位提醒</div>
+          <div class="close" @click="closeInfoWindow"></div>
+        </div>
+        <div class="content">
+          <div class="row blue">
+            {{ firePoint.buildName }}存在{{ firePoint.depts.length }}个重点部位
+          </div>
+          <div class="row" v-for="(item, i) in firePoint.depts" :key="i">
+            {{ item }}
+          </div>
+        </div>
+        <div class="l-t"></div>
+        <div class="r-t"></div>
+        <div class="l-b"></div>
+        <div class="r-b"></div>
+        <div class="c-b"></div>
+      </div>
+      <div class="info-bottom"></div>
+    </div>
+  </div>
+</template>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import mapIconBuild from "../assets/images/map-icon-build.png";
+import mapIconPressure from "../assets/images/map-icon-pressure.png";
+import mapIconCar from "../assets/images/map-icon-car.png";
+import mapIconCamera from "../assets/images/map-icon-camera.png";
+import mapIconMicstation from "../assets/images/map-icon-micstation.png";
+import mapIconStation from "../assets/images/map-icon-119.png";
+import mapIconFire from "../assets/images/map-icon-fire.png";
+
+export default {
+  name: "MapContainer",
+  components: {},
+  data() {
+    return {
+      center: [],
+      markers: [],
+      firePoint: null,
+      icons: {
+        build: {
+          image: mapIconBuild,
+          size: [43, 60],
+          imageSize: [43, 60],
+        },
+        pressure: {
+          image: mapIconPressure,
+          size: [43, 60],
+          imageSize: [43, 60],
+        },
+        car: {
+          image: mapIconCar,
+          size: [70, 46],
+          imageSize: [70, 46],
+        },
+        camera: {
+          image: mapIconCamera,
+          size: [69, 69],
+          imageSize: [69, 69],
+        },
+        micstation: {
+          image: mapIconMicstation,
+          size: [99, 107],
+          imageSize: [99, 107],
+        },
+        station: {
+          image: mapIconStation,
+          size: [99, 107],
+          imageSize: [99, 107],
+        },
+      },
+    };
+  },
+  props: {
+    id: {
+      type: Number,
+      default: 1,
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(this.id);
+      // to-do
+      // 通过id调用接口获取数据
+      // 地图中心
+      this.center = [105.602725, 37.076636];
+      // 标志物
+      this.markers = [
+        {
+          icon: "build",
+          position: [105.582725, 37.076636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "pressure",
+          position: [105.612725, 37.06636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "car",
+          position: [105.602725, 37.079636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "camera",
+          position: [105.604725, 37.089636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "micstation",
+          position: [105.605725, 37.069636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "station",
+          position: [105.606725, 37.079636],
+          anchor: "bottom-center",
+        },
+      ];
+      // 着火点
+      this.firePoint = {
+        position: [105.602725, 37.076636],
+        buildName: "地矿大厦1栋",
+        depts: ["1楼：存在大量氧气罐", "2楼：存在乙醇、乙丙等可燃物品"],
+      };
+
+      if (this.firePoint) {
+        this.center = this.firePoint.position;
+      }
+
+      this.initMap();
+    },
+    initMap() {
+      AMapLoader.load({
+        key: "4776c927b5ebe35e9e33e5b14ec78b8f", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      })
+        .then((AMap) => {
+          this.map = new AMap.Map("map-container", {
+            //设置地图容器id
+            // viewMode: "3D", //是否为3D地图模式
+            zoom: 15, //初始化地图级别
+            center: this.center, //初始化地图中心点位置
+            mapStyle: "amap://styles/grey",
+          });
+
+          // 设置覆盖物
+          if (this.markers && this.markers.length > 0) {
+            this.markers.forEach((p) => {
+              const icon = this.icons[p.icon];
+              icon.size = new AMap.Size(icon.size[0], icon.size[1]);
+              icon.imageSize = new AMap.Size(
+                icon.imageSize[0],
+                icon.imageSize[1]
+              );
+              p.icon = new AMap.Icon(icon);
+              var marker = new AMap.Marker(p);
+              this.map.add(marker);
+            });
+          }
+
+          // 设置着火点
+          if (this.firePoint) {
+            this.addFirePoint();
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    addFirePoint() {
+      if (!this.firePoint) {
+        return;
+      }
+      const self = this;
+      // 着火点
+      var markerFire = new AMap.Marker({
+        icon: mapIconFire,
+        position: this.firePoint.position,
+        anchor: "center",
+      });
+      markerFire.on("click", function () {
+        self.addInfoWindow();
+      });
+      this.map.add(markerFire);
+
+      // 范围
+      var circle = new AMap.Circle({
+        center: new AMap.LngLat(
+          this.firePoint.position[0],
+          this.firePoint.position[1]
+        ), // 圆心位置
+        radius: 800, // 半径
+        strokeColor: "rgba(255, 0, 61)", // 线颜色
+        strokeOpacity: 0.6, // 线透明度
+        strokeWeight: 1, // 线粗细度
+        fillColor: "rgba(255, 0, 61)", // 填充颜色
+        fillOpacity: 0.08, // 填充透明度
+      });
+      this.map.add(circle);
+
+      // 信息窗口
+      this.addInfoWindow();
+    },
+    addInfoWindow() {
+      if (!this.firePoint) {
+        return;
+      }
+      // 弹窗
+      var infoWindow = new AMap.InfoWindow({
+        isCustom: true,
+        content: this.$refs.infoWindow,
+        offset: new AMap.Pixel(0, -45),
+        position: this.center,
+      });
+      infoWindow.open(
+        this.map,
+        new AMap.LngLat(this.firePoint.position[0], this.firePoint.position[1])
+      );
+    },
+    closeInfoWindow() {
+      this.map.clearInfoWindow();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.map {
+  width: 100%;
+  height: 100%;
+
+  #map-container {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+  .info-window {
+    width: 434px;
+    height: auto;
+
+    .info-content {
+      width: 100%;
+      height: auto;
+      background: rgba(0, 0, 0, 0.82);
+      border: 1px solid rgba(61, 115, 255, 0.72);
+      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
+      position: relative;
+
+      .title {
+        width: 100%;
+        height: 56px;
+        background: url("../assets/images/map-infowindow-title-bg.png") center
+          center no-repeat;
+        background-size: cover;
+        border-bottom: 1px solid rgba(61, 115, 255, 0.5);
+        padding: 16px 16px 16px 32px;
+        display: flex;
+        box-sizing: border-box;
+
+        .txt {
+          flex-grow: 1;
+          font-family: "Abel";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 24px;
+          line-height: 24px;
+          color: #ffb800;
+        }
+
+        .close {
+          width: 24px;
+          height: 24px;
+          background: url(../assets/images/map-icon-close.png) center center
+            no-repeat;
+          background-size: 24px 24px;
+          cursor: pointer;
+        }
+      }
+
+      .content {
+        width: 100%;
+        height: auto;
+        min-height: 50px;
+        padding: 14px 32px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+
+        .row {
+          width: 100%;
+          height: 24px;
+          margin-bottom: 8px;
+          font-family: "Abel";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+
+          &.blue {
+            color: #7ea2ff;
+          }
+        }
+      }
+
+      .border-bottom {
+        width: 100%;
+        height: 2px;
+        display: flex;
+        background: linear-gradient(
+          90deg,
+          #2d53dd 0.62%,
+          #5c80ff 47.56%,
+          #355ce9 94.62%
+        );
+        position: relative;
+      }
+
+      .l-t {
+        width: 16px;
+        height: 2px;
+        left: 0;
+        top: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .r-t {
+        width: 16px;
+        height: 2px;
+        right: 0;
+        top: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .l-b {
+        width: 16px;
+        height: 2px;
+        left: 0;
+        bottom: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .r-b {
+        width: 16px;
+        height: 2px;
+        right: 0;
+        bottom: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .c-b {
+        width: calc(100% - 32px);
+        height: 2px;
+        left: 16px;
+        bottom: 0;
+        background: linear-gradient(
+          90deg,
+          #2d53dd 0.62%,
+          #5c80ff 47.56%,
+          #355ce9 94.62%
+        );
+        position: absolute;
+      }
+    }
+
+    .info-bottom {
+      width: 100%;
+      height: 24px;
+      margin-top: -2px;
+      background: url(../assets/images/map-infowindow-arrow.png) center center
+        no-repeat;
+      background-size: 39px 23px;
+    }
+  }
+}
+</style>

app/src/router/index.js

@@ -9,6 +9,7 @@ import Risk from '../views/Risk/index.vue'
 import PoliceSituation from '../views/PoliceSituation/index.vue'
 import FireCondition from '../views/FireCondition/index.vue'
 import Iot from '../views/Iot/index.vue'
+import Test from '../views/Test/index.vue'
 Vue.use(VueRouter);
 const router = new VueRouter({
   mode: "history",
@@ -83,6 +84,12 @@ const router = new VueRouter({
           meta: {
             id: 7,
           }
+        },
+        {
+          path: '/test',
+          name: 'test',
+          component: Test,
+          meta: {}
         }
       ],
     },

app/src/views/Test/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <!-- 地图 -->
+    <div class="map-exp">
+      <div style="font-size: 20px">地图调用示例：</div>
+      <Map :id="1" />
+    </div>
+
+    <!-- 监控 -->
+    <div class="camrea-exp">
+      <div style="font-size: 20px">监控调用示例：</div>
+      <Camera id="50015200001310000010" />
+    </div>
+  </div>
+</template>
+<script>
+import Map from "@/components/Map.vue";
+import Camera from "@/components/Camera.vue";
+export default {
+  name: "Test",
+  components: {
+    Map,
+    Camera,
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="less">
+.map-exp {
+  width: 1000px;
+  height: 500px;
+}
+.camrea-exp {
+  margin-top: 100px;
+  width: 500px;
+  height: 500px
+}
+</style>

package.json

@@ -29,6 +29,7 @@
     "prettier": "^2.5.1"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "echarts": "^5.4.2",
     "element-ui": "^2.15.9",
     "vue": "^2.7.8"