epmet-oper-gov/src/views/modules/visual/components/screen-map/index.vue

<template>
  <div class="div_content_map">
    <div class="div_map"
         id="map"
         ref="map">
      <!-- <div id="map"
             class="map"></div> -->
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature.js";
import Overlay from 'ol/Overlay';
import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
import { getCenter, boundingExtent } from 'ol/extent.js';
import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
import { altKeyOnly, click, pointerMove } from 'ol/events/condition';

import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";



let loading;//加载动画

let map;
let mapView;
let gaodeMapLayer;//背景地图图层
let polygonLayer;//区域多边形标注图层
let polygonSource;//标注多边形

let polIconLayer; // 区域icon标注图层
let polIconSource; // icon

let iconLayer; // icon图层
let iconSource; // icon

let select;//选中标注


//url图标



let polygonColorArray = [
  'rgba(210, 2, 2, 0.24)',
  'rgba(43, 231, 253, 0.25)',
  'rgba(183, 185, 0, 0.16)'
];


//变电站标注样式

var polygonStyleFunction = (function () {
  return function (feature) {
    return new Style({
      fill: new Fill({
        // color: [255, 255, 255, 0.3]
        color: polygonColorArray[feature.values_.index - 1]
      }),
      stroke: new Stroke({
        color: polygonColorArray[feature.values_.index - 1],
        width: 3
      }),

      text: createTextStyle(feature)
    });;
  };
})()

const vueGis = {
  name: 'HomeMap',
  data () {
    return {
      centerPoint: [],//中心点位置
      zoom: 14,//缩放范围：区14
      minZoom: 1,//最小缩放

      mapInfo: {

      },

      polygonArray: [
        {
          agencyLevel: "grid",
          coordinates: "120.37421528296863,36.085017737014525,120.37551227771064,36.08181339174796,120.38108173804676,36.08303409283569,120.3852397566111,36.08318668276358,120.38539234391965,36.090816077003794,120.37410084117755,36.09096866431234,120.37421528296863,36.085017737014525",
          id: "2a278c0ceb863359d263fda7aabf6752",
          latitude: 36.072227,
          level: "grid",
          longitude: 120.389455,
          name: "第三网格",
        },
        {
          agencyLevel: "grid",
          coordinates: "120.38577111171519,36.095762169637716,120.38544318588274,36.08317796726519,120.39339541546589,36.08080049372144,120.40122467708379,36.08026761565102,120.40188052874869,36.08276805856732,120.39929810296697,36.086990119140545,120.39757648953199,36.08981849070392,120.39901116927089,36.0943274884915,120.3977404524482,36.096418022709926,120.38577111171519,36.095762169637716",
          id: "94227891bc4ad5f40cb95081761592d9",
          latitude: 36.072227,
          level: "grid",
          longitude: 120.389455,
          name: "南宁第二网格",
        },
        {
          agencyLevel: "grid",
          coordinates: "120.3736430792519,36.09505039184175,120.373948253869,36.09119754789451,120.38543049205646,36.09115940106737,120.38577381481036,36.0960803587938,120.3736430792519,36.09505039184175",
          id: "a772a325e022484ef53e4a7d679726f1",
          latitude: 36.072227,
          level: "grid",
          longitude: 120.389455,
          name: "南宁第一网格",
        },
      ],

      iconArrays: [

      ],
      iconTextStyle: {},

      //policon图标样式
      polIconUrlArray: [
        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
      ],
      //icon图标样式
      iconUrlArray: [],
      iconTextColor: '#ffffff',

    }
  },
  async mounted () {


  },
  methods: {
    //加载地图
    loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle) {
      this.mapInfo = mapInfo
      this.polygonArray = polygonArray
      this.polIconUrlArray = polIconUrlArray
      this.iconArrays = iconArrays
      this.iconUrlArray = iconUrlArray
      this.iconTextStyle = iconTextStyle

      //初始化地图
      this.initMap()

      if (this.showPolygonLayer) {
        //初始化多边形标注图层
        this.initPolygonLayer()
        //加载当前园区的标注
        this.loadPolygon()
      }
      if (this.showPolIconLayer) {

        //初始化多边形标注图层
        this.initPolygonLayer()
        //加载当前园区的标注
        this.loadPolIcon()
      }

      if (this.showIconLayer) {
        //初始化icon图层
        this.initIconLayer()
        this.loadIcon()
      }


    },

    //刷新地图
    async refreshMap (polygonArray, iconArrays) {
      this.polygonArray = polygonArray
      this.iconArrays = iconArrays

      if (this.showPolygonLayer) {

        //加载当前园区的标注
        this.loadPolygon()
      }
      if (this.showPolIconLayer) {

        //加载当前园区的标注
        this.loadPolIcon()
      }

      if (this.showIconLayer) {

        this.loadIcon()
      }


    },

    //加载多边形
    loadPolygon () {
      polygonSource.clear()//清空多边形标注

      let featureData = []//多边形数据数据
      if (polygonArray && polygonArray.length > 0) {//判断是否存在下级标注
        let oneData = {}

        polygonArray.forEach(polygonItem => {

          if (polygonItem.coordinates && polygonItem.coordinates !== '') {//如果有坐标
            let urlNum = this.getRndBetween(1, 3)

            oneData = {
              type: 'Feature',
              id: polygonItem.id,
              properties: {
                id: polygonItem.id,
                level: polygonItem.level,
                name: polygonItem.name,
                index: urlNum//颜色随机的索引
              },
              geometry: {
                type: 'Polygon',
                coordinates: [],
              },
            }
            let coorArray = polygonItem.coordinates.split(',')//坐标数组

            let itemArray = []//单个点位的[lon,lat]，数组
            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item)
              if (index % 2 == 0) {//偶

              } else {//奇
                polygonArray.push(itemArray)
                itemArray = []
              }

            });
            oneData.geometry.coordinates.push(polygonArray)
            featureData.push(oneData)
          }
        });
      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          'type': 'FeatureCollection',
          'features': featureData
        };
        let feature = (new GeoJSON()).readFeatures(geojsonObject)

        polygonSource.addFeatures(feature)

        if (this.showPolIconLayer) {
          this.loadPolIcon(feature)
        }

      }

    },

    //加载多边形的icon
    loadPolIcon (feature) {
      let polyIconFeatures = [];
      feature.forEach(oneIcon => {

        var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
        // var center = getCenter(extent);   //获取边界区域的中心位置
        //添加标注
        let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
        let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2

        let polyIcon = new Feature({
          geometry: new Point([x, y]),
          id: oneIcon.id_,
          properties: {
            type: "icon",
            id: oneIcon.id_
          }
        });

        let polyIconStyle = new Style({
          image: new Icon({
            // anchor: [0.5, 0.5],
            // imgSize: [32, 32],
            scale: 0.5,
            src: polIconUrlArray[oneIcon.values_.index - 1]
          })
        });

        polyIcon.setStyle(polyIconStyle);
        polyIconFeatures.push(polyIcon);

      });

      polIconSource.addFeatures(polyIconFeatures);
    },

    //加载icon图标
    loadIcon () {
      iconSource.clear()//清空多边形标注
      if (this.iconArrays && this.iconArrays.length > 0) {

        let iconFeatures = [];
        this.iconArrays.forEach((oneIcon, index) => {
          let urlNum = this.getRndBetween(1, 3)
          //添加标注
          let iconItem = new Feature({
            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
            id: oneIcon.id,
            properties: {
              type: "icon",
              info: { ...oneIcon }
            }
          });

          let iconStyle = new Style({
            image: new Icon({
              // anchor: [0.5, 0.5],
              // imgSize: [32, 32],
              // scale: 0.5,
              src: this.iconUrlArray[oneIcon.urlIndex]
            }),
            text: this.createTextStyle(oneIcon)
          });

          iconItem.setStyle(iconStyle);
          iconFeatures.push(iconItem);

        });

        iconSource.addFeatures(iconFeatures);
      }
    },

    //icon文字样式
    createTextStyle (feature) {

      let iconTextStyle = { ...this.iconTextStyle }
      iconTextStyle.text = feature.values_.name
      return new Text({ ...iconTextStyle })

    },

    //初始化地图
    initMap () {
      this.setMapLocation()
      gaodeMapLayer = new TileLayer({
        title: "地图",
        source: new XYZ({
          //指定url瓦片
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: true//x方向平铺，也可以选择false
        }),
        zIndex: 20
      });

      mapView = new View({
        //中心点坐标
        center: this.centerPoint,
        // projection: 'EPSG:3857',
        projection: 'EPSG:4326',
        zoom: this.zoom,
        minZoom: this.minZoom
      })

      //初始化map和地图底图
      //创建地图容器
      map = new Map({
        layers: [gaodeMapLayer],
        //加载瓦片图层数据
        view: mapView,
        target: 'map'
        //目标加载到map中
      })

      let that = this
      map.on('singleclick', function (e) {
        const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
          return feature;
        });
        if (feature) {
          console.log(feature)
          that.$emit('clickFeature', feature)

        }



      })

      //去除双击放大效果
      const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find(interaction => {
          return interaction instanceof DoubleClickZoom;
        });
      map.removeInteraction(dblClickInteraction);

    },
    //设置地图定位的中心点和缩放级别
    setMapLocation () {
      this.centerPoint = []

      if (this.mapInfo.longitude && this.mapInfo.latitude) {
        this.centerPoint.push(this.mapInfo.longitude)
        this.centerPoint.push(this.mapInfo.latitude)
      }

      this.setZoom(this.mapInfo.level)
    },

    //根据组织层级设置缩放级别
    setZoom (level) {
      if (level === 'district') {
        this.zoom = 14
      } else if (level === 'street') {
        this.zoom = 15
      } else if (level === 'community') {
        this.zoom = 16
      }

    },


    //初始化多边形标注图层
    initPolygonLayer () {
      polygonSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      polygonLayer = new VectorLayer({
        source: polygonSource,
        style: polygonStyleFunction,
        zIndex: 50
      });

      //选中多边形后的样式
      var overlayStyle = (function () {

        return function (feature) {
          var styles = {};
          styles['Polygon'] = [
            new Style({
              stroke: new Stroke({
                color: '#ec9000',
                width: 2
              })
            }),

            new Style({
              fill: new Fill({
                color: 'rgba(0, 0, 255, 0.1)'
              })
            }),
            new Style({
              text: createTextStyle(feature)
            })
          ];
          styles['MultiPolygon'] = styles['Polygon'];
          return styles[feature.getGeometry().getType()];
        };
      })();

      select = new Select({
        style: overlayStyle
      });


      map.addLayer(polygonLayer)
      map.addInteraction(select);


    },

    //初始化多边形icon图层
    initPolIconLayer () {
      polIconSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      polIconLayer = new VectorLayer({
        source: polIconSource,
        zIndex: 70
      });

      map.addLayer(polIconLayer);

    },

    //初始化icon图层
    initIconLayer () {

      iconSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      iconLayer = new VectorLayer({
        source: iconSource,
        zIndex: 90
      });

      map.addLayer(iconLayer);
      // select = new Select({ condition: click, });

      // map.addInteraction(select);

      // select.on('select', e => {
      //   this.$emit('clickFeature', e)
      // });
    },


    //取随机数
    getRndBetween (lowerLimit, upperLimit) {
      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
    },

    //开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, //是否锁定
        text: '正在加载……', //加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' //背景颜色
      });

    },

    //结束加载动画
    endLoading () {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  props: {
    //是否显示多边形图层
    showPolygonLayer: {
      type: Boolean,
      default: false
    },
    //是否显示多边形icon图层
    showPolIconLayer: {
      type: Boolean,
      default: false
    },

    //是否显示标注
    showIconLayer: {
      type: Boolean,
      default: false
    }

  },
  computed: {

    mapHeight () {
      return this.clientHeight - 120;

    },

    ...mapGetters(["clientHeight"])

  },
  components: {},
}
export default vueGis;
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style lang="scss" >
.div_content_map {
  .ol-viewport {
    border-radius: 5px;
  }
  .div_map {
    box-sizing: border-box;
    width: 100%;
    // padding: 10px 5px 13px;
    // margin-top: 8px;
    height: 100%;
    color: #fff;
  }
}
.ol-overlaycontainer-stopevent {
  display: none;
}
</style>