openlayers 实现点位报警和点位报警动画

追风少儿狼
623 阅读2分钟

效果展示

GIF.gif

css部分


.point_animation {
  border-radius: 50%;
  position: absolute;
  z-index: 10000;
}

.point_animation p,
.point_animation span {
  position: absolute;
  width: 15px;
  height: 15px;
  animation: point_animation 1.5s infinite;
  box-shadow: 0px 0px 1px #ff9900;
  margin: 0px;
  border-radius: 50%;
}

.point_animation span {
  animation-delay: 0.8s;
}

@keyframes point_animation {
  10% {
    transform: scale(1);
  }

  100% {
    transform: scale(8);
  }
}

.css_animation {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 0, 0, 0.9);
  transform: scale(0);
  animation: mypoint 3s;
  animation-iteration-count: infinite;
  position: absolute;
  z-index: 10000;
}

@keyframes mypoint {
  to {
    transform: scale(2);

    background: rgba(0, 0, 0, 0);
  }
}
@keyframes im_icon {
  0% {
    opacity: 0.8;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: translate(0, 10px);
  }
  100% {
    opacity: 0.8;
    transform: translate(0, 0);
  }
}
.im {
  width: 19px;
  height: 33px;
  background-image: url("../../assets/mark.png");
  background-size: 19px 33px;
  background-repeat: no-repeat;
  animation: im_icon 1s linear infinite;
  position: absolute;
  z-index: 10000;
}

.common_overly {
  background-color: rgba(3, 60, 127, 0.454901960784314);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(151, 228, 255, 1);
  border-radius: 4px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #ffffff;
  text-align: left;
  line-height: 18px;
  width: 125px;
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
}
.overly_icon_triangle {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 10px solid rgba(3, 60, 127, 0.454901960784314);

  transform: translateX(-50%);
}

.overly_name {
  padding: 2px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
}
.allDiv {
  position: relative;
  top: 0;
  left: 0;
}
.overview_Data {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  transform: translate(-50%);
}
.abnormal {
  width: 120px;
  height: 43px;
  line-height: 43px;
  background: rgb(22, 166, 247);
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #fff;
  text-align: center;
  margin-right: 30px;
}

HTML结构


  <div class="allDiv">
    <div id="animationMap" class="dynamic-component-demo"></div>
    <div :ref="item.id" class="im" v-for="item in general_array"></div>
    <div class="common_overly" id="popupOverlay">
      <div class="overly_name">{{ common_overly_val.name }}</div>
      <div class="overly_name">流量：2560Nm³/h</div>
      <div class="overly_name">压力：156MPa</div>
      <div class="overly_icon_triangle"></div>
    </div>
    <div :ref="item.id" class="point_animation" v-for="item in larger_array">
      <p></p>
      <span></span>
    </div>
    <div :ref="item.id" class="css_animation" v-for="item in major_array"></div>
    <div class="overview_Data">
      <div class="abnormal">报警总数<span>{{major_array.length}}</span></div>
      <div class="abnormal">异常总数<span>{{larger_array.length+general_array.length}}</span></div>
    </div>
  </div>

VueScript 代码


import Map from "ol/Map";
import View from "ol/View";
import { defaults } from "ol/control";
import { gaodeMapLayer, gaodeMapLayer3 } from "@/utils/MapLayer.js";
import { defaults as defaultControls, ScaleLine, FullScreen } from "ol/control";
import Overlay from "ol/Overlay";
import {
  GAS_POINT_TYPE, 
  areaLayer,
  centerPoint,
  centerMark,
  equipmentLayer,
  monitoring,
  type_Array,
} from "@/utils/showPage.js";

export default {
  name: "pointAnimation",
  data() {
    return {
      common_overly_val: {},
      map: null,
      FeaturesMesg: [],
      larger_array: [],
      major_array: [],
      general_array: [],
      typeData: [
        {
          name: "设备",
          type: "all",
          children: [
            {
              type: "0",
              name: "燃气管道",
            },
            ...GAS_POINT_TYPE(),
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  computed:{

  },
  created() {
    this.init_special();
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let map = new Map({
        controls: defaultControls({
          attribution: false,
          attributionOptions: {
            collapsible: false,
            collapsed: false,
          },
          rotate: false,
          zoom: false,
        }).extend([
          //实例化比例尺控件（ScaleLine）
          new ScaleLine({
            //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
            units: "metric",
          }),
        ]),
        // 设置地图图层
        layers: [gaodeMapLayer3, gaodeMapLayer, areaLayer],
        // 设置显示地图的视图
        view: new View({
          center: centerPoint,
          zoom: 12,
          minZoom: 8,
          maxZoom: 21,
          projection: "EPSG:4326",
          rotation: 0,
        }),
        // 让id为map的div作为地图的容器
        target: "animationMap",
      });
      this.init_popupOverlay(map);
    },
    init_popupOverlay(map) {
      let popupOverlay = new Overlay({
        element: document.getElementById("popupOverlay"),
        positioning: "bottom-center",
        offset: [-63, -79],
      });
      popupOverlay.setPosition(undefined);
      map.addOverlay(popupOverlay);
      this.init_special_Overlay(map);
      this.addEventListenerMap(map, popupOverlay);
    },
    addEventListenerMap(map, popupOverlay) {
      let _this = this;
      map.on("click", (evt) => {
        map.forEachFeatureAtPixel(evt.pixel, (feature, layer) => {
          if (feature && layer.get("name") == "monitoring") {
            console.log(feature.getProperties());
            _this.common_overly_val = feature.getProperties();
            let coordinate = feature.getGeometry().getCoordinates();
            popupOverlay.setPosition(coordinate);
          }
        });
      });
      map.on("pointermove", (e) => {
        let pixel = map.getEventPixel(e.originalEvent);
        let hit = map.hasFeatureAtPixel(pixel);
        
        map.getTargetElement().style.cursor = hit ? "pointer" : "";
      });
    },
    init_special_Overlay(map) {
      let { larger_array, major_array, general_array } = this;

      // major_popup = this.$refs[`major_${properties.devId}`],
      // general_popup = this.$refs[`general_${properties.devId}`];
      //larger
      for (let i = 0; i < larger_array.length; i++) {
        let larger_popup = this.$refs[larger_array[i].id],
          feature = larger_array[i].featrue,
          coordinate = feature.getGeometry().getCoordinates();
        //   console.log(larger_array[i], larger_popup, coordinate);
        var larger_overlay = new Overlay({
          element: larger_popup["0"],
          positioning: "center-center",
          offset: [-7, 8],
          stopEvent: false,
        });
        larger_overlay.setPosition(coordinate);
        map.addOverlay(larger_overlay);
      }
      //major
      for (let j = 0; j < major_array.length; j++) {
        let major_popup = this.$refs[major_array[j].id],
          feature = major_array[j].featrue,
          coordinate = feature.getGeometry().getCoordinates();
        var major_overlay = new Overlay({
          element: major_popup["0"],
          positioning: "center-center",
          offset: [-25, -8],
          stopEvent: false,
        });
        major_overlay.setPosition(coordinate);
        map.addOverlay(major_overlay);
      }
      //general
      for (let m = 0; m < general_array.length; m++) {
        let general_popup = this.$refs[general_array[m].id],
          feature = general_array[m].featrue,
          coordinate = feature.getGeometry().getCoordinates();
        var general_overlay = new Overlay({
          element: general_popup["0"],
          positioning: "center-center",
          offset: [-10, -18],
          stopEvent: false,
        
        });
        general_overlay.setPosition(coordinate);
        map.addOverlay(general_overlay);
      }
      map.addLayer(monitoring);
    },
    init_special() {
      let Features = monitoring.getSource().getFeatures();
      for (let i = 0; i < Features.length; i++) {
        const featrue = Features[i],
          type = featrue.getGeometry().getType(),
          properties = featrue.getProperties();
        if (type === "Point" && properties.name != "节点") {
          let Num = Number(properties.devId.slice(-2)),
            key = type_Array[Num % 8];
          if (key === "larger") {
            this.larger_array.push({
              id: `larger_${properties.devId}`,
              featrue,
            }); //larger点
          }
          if (key == "major") {
            this.major_array.push({ id: `major_${properties.devId}`, featrue }); //major点
          }
          if (key == "general") {
            this.general_array.push({
              id: `general_${properties.devId}`,
              featrue,
            }); //general点
          }
        }
      }
    },
    
  },
};
avatar
文章
阅读
粉丝