epmet-oper-gov/src/views/modules/visual/plugin/power/components/screen-org-map.vue

<template>
    <div class="div_map" id="map" ref="map"></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 { 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 { getDistance } from 'ol/sphere'
import MousePosition from 'ol/control/MousePosition'
import { createStringXY } from 'ol/coordinate'
import { defaults as defaultControls } from 'ol/control'
import { mapGetters } from "vuex"
import { Loading } from 'element-ui'
import { getPolygonGeoJSON, getGridGeoJSON } from './geojson.js'

let map
let mapView
let gaodeMapLayer // 背景地图图层
let gridLayer // 网格组织图层
let gridSource // 网格组织多边形
let pointsLayer // 打点图层
let pointsSource // 打点

const iconArray = [
    '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'
]
const textColorArray = [
  'rgba(236, 69, 4, 0.66)',
  'rgba(0, 146, 238, 0.75)',
  'rgba(238, 151, 0, 0.8)'
]
const polygonColorArray = [
  'rgba(210, 2, 2, 0.24)',
  'rgba(43, 231, 253, 0.25)',
  'rgba(183, 185, 0, 0.16)'
]
var createTextStyle = function (feature) {
  return new Text({
    textAlign: undefined,
    font: "18px Arial",
    //fontFamily: "Courier New, monospace",
    // fontWeight: "bold",
    text: feature.values_.name,
    backgroundFill: new Fill({
      // color: 'rgba(0, 146, 238, 0.75)'
      color: textColorArray[feature.values_.index]
    }),
    padding: [4, 10, 4, 10],
    //text: "变电站名称",
    fill: new Fill({ color: "#ffffff" }),
    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
    offsetY: -30,
    offsetX: -50,
    overflow: true,
  })
}
var polygonStyleFunction = (function () {
  return function (feature) {
    return new Style({
      fill: new Fill({
        // color: [255, 255, 255, 0.3]
        color: polygonColorArray[feature.values_.index]
      }),
      stroke: new Stroke({
        color: polygonColorArray[feature.values_.index],
        width: 3
      }),
      text: createTextStyle(feature)
    })
  }
})()
export default {
  name: "screen-org-map",
  components: {
  },
  data() {
    return {
      centerPoint: [120.38945519, 36.0722275], // 中心点位置
      zoom: 12, // 缩放范围：区14
      minZoom: 1, // 最小缩放
    }
  },
  mounted() {
    this.initMap()
    this.addAreaLayer()
    this.addGridLayer()
  },
  methods: {
    initMap () {
      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中
      })

      map.on('singleclick', function (e) {
        // console.log(e.coordinate)
        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
      })

      //去除双击放大效果
      const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find(interaction => {
          return interaction instanceof DoubleClickZoom
        })
      map.removeInteraction(dblClickInteraction)
    },
    // 绘制区域
    addAreaLayer () {
      let feature = new GeoJSON().readFeatures(getPolygonGeoJSON())
      gridSource = new VectorSource({
        features: feature
      })
      // gridSource.clear() // 清空网格标注
      // let features = new GeoJSON().readFeatures(getPolygonGeoJSON())
      // gridSource.addFeatures(features)
      gridLayer = new VectorLayer({
        source: gridSource,
        style: new Style({
          stroke: new Stroke({
            color: 'blue',
            width: 2
          }),
          // fill: new Fill({
          //   color: 'rgba(255, 255, 0, 0.4)'
          // })
        }),
        zIndex: 50
      })
      map.addLayer(gridLayer)
    },
    // 绘制网格区域
    addGridLayer () {
      let feature = new GeoJSON().readFeatures(getGridGeoJSON())
      pointsSource = new VectorSource({
        features: feature
      })
      pointsLayer = new VectorLayer({
        source: pointsSource,
        style: polygonStyleFunction,
        zIndex: 70
      })

      //选中多边形后的样式
      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()]
        }
      })()

      let select = new Select({
        style: overlayStyle
      })
      this.addGridMarker(feature)
      map.addLayer(pointsLayer)
      map.addInteraction(select)
      select.on('select', e => {
        if (e.selected.length > 0) {
          console.log(e.selected[0].values_.name)
        }
      })
    },
    // 打点
    addGridMarker (feature) {
      let iconFeatures = []
      feature.forEach((oneIcon, index) => {
        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
        // 地图icon样式
        let pointIcon = new Feature({
          geometry: new Point([x, y]),
          properties: {
            type: "icon",
            name: oneIcon.values_.name
          }
        })
        let iconStyle = new Style({
          image: new Icon({
            // anchor: [0.5, 0.5],
            // imgSize: [32, 32],
            scale: 0.5,
            src: iconArray[index]
          })
        })

        pointIcon.setStyle(iconStyle)
        iconFeatures.push(pointIcon)
      })
      pointsSource.addFeatures(iconFeatures)
    }
  },
}
</script>

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

<style lang="scss" >
.div_map {
    box-sizing: border-box;
    // width: 100%;
    height: 100%;
    color: #fff;
}
</style>