图表

src/views/daping.vue

@@ -175,7 +175,8 @@
       </div>
       <div class="center">
         <div class="center_div_up">
-          <div ref="map" class="map">
+          <div class="map">
+            <div ref="mapDom" style="width:100%;height:100%" />
             <div class="map_bottom_box">
               <div>该地图上显示所有当前基地（点击选择查看）：</div>
               <div style="padding-top:3px">
@@ -258,6 +259,7 @@ export default {
     return {
       title: '智慧农业综合管理一张图',
       imgSrc: enterpriseImg,
+      mapDom: null,
       vData1: {
         xx: '7896'
       },
@@ -303,6 +305,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
+      this.initMap()
       this.loadData()
     })
   },
@@ -314,6 +317,54 @@ export default {
       this.initChart4()
       this.initChart5()
     },
+    initMap() {
+      /* eslint-disable */
+      if(!this.mapDom){
+        this.mapDom = new AMap.Map(this.$refs.mapDom, {
+          mapStyle: 'amap://styles/e1a69a1f5c54d96190413cf349fa8c1d',
+          resizeEnable: true, // 是否监控地图容器尺寸变化
+          zoom: 13, // 初始化地图层级
+          center: [119.765299, 35.789809] // 初始化地图中心点
+        })
+        let appendMarker = function(arr) {
+          var len = arr.length
+          for (var i = 0; i < len; i++) {
+            var obj = arr[i]
+            var imgName = obj.name.indexOf('大棚') > -1 ? 'pointe_1' : 'pointe_2'
+            var icon = '/static/smartDaping/' + imgName + '.png'
+            var devX = obj.name.indexOf('大棚') > -1 ? -17.5 : -23.5
+            AMapTool.marker && AMapTool.remove(AMapTool.marker)
+            AMapTool.infoWindow && AMapTool.infoWindow.close()
+            // 经度范围[121.138398, 121.728226]
+            var lng = obj.jd
+            // 纬度范围[30.972688, 31.487611]
+            var lat = obj.wd
+            AMapTool.setCenter([lng, lat])
+            AMapTool.marker = new AMap.Marker({
+              map: AMapTool,
+              icon,
+              position: [obj.jd, obj.wd],
+              offset: new AMap.Pixel(devX, devX),
+              title: obj.name,
+              label: {
+                deviceid: obj.deviceid,
+                name: obj.name,
+                online: obj.online
+              }
+            })
+            AMapTool.marker.on('click', e => {
+              let info = '<div class="pop-info1"><div class="dis"><span>' + obj.name + "</span></div><div class='dis'><span>" + obj.deviceid + "</span></div><div class='dis'><strong>设备状态:</strong>" + `<span style='color: #999' >${obj.online}</span>` + '</div></div>'
+              AMapTool.infoWindow = new AMap.InfoWindow({
+                offset: new AMap.Pixel(0, -30),
+                content: info // 使用默认信息窗体框样式，显示信息内容
+              })
+              AMapTool.infoWindow.open(AMapTool, [obj.jd, obj.wd])
+            })
+          }
+        }
+      }
+      /* eslint-enable */
+    },
     initChart1() {
       this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
       const count = 24
@@ -1152,6 +1203,14 @@ export default {
 }
 </script>
 <style lang="scss">
+.amap-logo {
+  display: none !important;
+}
+.amap-copyright {
+  display: none !important;
+}
+</style>
+<style lang="scss">
 @font-face{
   font-family: PangMenZhengDao;
   src: url('~@/assets/home/PangMenZhengDao.ttf');
@@ -1534,7 +1593,7 @@ export default {
   width: 100%;
   height: 50vh;
   position: relative;
-  border: 1px solid rgba(0,0,0,0.65);
+  border: 2px solid rgba(0,0,0,0.65);
   .map_bottom_box {
     width: 100%;
     height: 105px;