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'

let map
let mapView
let gaodeMapLayer // 背景地图图层
let markerSource
let markerLayer

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)'
]
var createTextStyle = function (feature) {
  return new Text({
    textAlign: undefined,
    font: "18px Arial",
    text: feature.values_.properties.name,
    backgroundFill: new Fill({
      color: textColorArray[0]
    }),
    padding: [4, 10, 4, 10],
    fill: new Fill({ color: "#ffffff" }),
    offsetY: -30,
    offsetX: -50,
    overflow: true,
  })
}
export default {
  name: "screen-org-map",
  data() {
    return {
      centerPoint: [120.38945519, 36.0722275], // 中心点位置
      zoom: 15, // 缩放范围：区14
      minZoom: 1, // 最小缩放
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap () {
      gaodeMapLayer = new TileLayer({
        title: "地图",
        source: new XYZ({
          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:4326',
        zoom: this.zoom,
        minZoom: this.minZoom
      })
      map = new Map({
        layers: [gaodeMapLayer],
        view: mapView,
        target: 'map'
      })

      map.on('singleclick', function (e) {
        // console.log(e.coordinate)
        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
      })
    },
    addMarker (list, icon=iconArray[0], scale=1) {
      markerSource = new VectorSource({
        // features: new GeoJSON().readFeatures(geojsonObject)
      })
      markerLayer = new VectorLayer({
        source: markerSource,
        zIndex: 50
      })
      let features = []
      list.forEach((item, index) => {
        const point = [parseFloat(item.longitude), parseFloat(item.latitude)]
        let marker = new Feature({
          geometry: new Point(point),
          properties: {
            ...item
          }
        })
        let iconStyle = new Style({
          image: new Icon({
            scale: scale,
            src: icon
          })
        })
        marker.setStyle(iconStyle)
        features.push(marker)
      })
      var overlayStyle = (function () {
        return function (feature) {
          var styles = {}
          styles['Point'] = [
            new Style({
              image: new Icon({
                scale: scale,
                src: iconArray[0] // feature.values_.properties.index
              })
            }),
            new Style({
              text: createTextStyle(feature)
            })
          ]
          return styles[feature.getGeometry().getType()]
        }
      })()
      let select = new Select({
        style: overlayStyle
      })
      map.addInteraction(select)
      select.on('select', e => {
        if (e.selected.length > 0) {
          console.log('------', e.selected[0].values_.properties.id)
        }
      })
      markerSource.addFeatures(features)
      map.addLayer(markerLayer)
    },
  },
}
</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>