vue-cdutDigitalMap/src/components/map.vue

<template>
  <div id="mapbox">
    <!-- 地图 -->
    <div id="mapview" class="map" @click="basemapShow = false">
    </div>

    <!-- 图层 和 消息选择 -->
    <layer-selector
      @getCheckedMap = 'getCheckedMap'
      @getCheckedTag = 'getCheckedTag'
    ></layer-selector>

    <!-- 绘图 控件 -->
    <div
      id='div-draw'
      v-if="isDraw"
      class='float-right'
    >
      <b-form inline>
        <!-- <b-form-group label="绘制类型:" label-for="input-draw-type">
          <b-form-select
            id="input-draw-type"
            class= "mb-2 mr-3 ml-2 mb-sm-0"
            v-model="drawType"
            :options="drawTypeOption"
            required
          ></b-form-select>
        </b-form-group> -->
        <b-button variant="danger" @click="drawEnd" >结束绘制</b-button>
      </b-form>
    </div>

    <!-- popup -->
    <div>
      <!-- PC端popup -->
      <div id="pcPopup" class="ol-popup" v-if="this.$store.state.isMobile === false">
          <PhoneCard
         :title="popupData.info.title"
         :time="popupData.info.time"
         :info="popupData.info.content"
         :url="popupData.info.url"
         :img="popupData.info.img"
         :isMobile = "false"
         >
         </PhoneCard>
      </div>

      <!-- Mobile端popup -->
      <div id="mobilePopup" v-else v-show="isShow">
        <PhoneCard
         :title="popupData.info.title"
         :time="popupData.info.time"
         :info="popupData.info.content"
         :url="popupData.info.url"
         :img="popupData.info.img"
         :isMobile = 'true'
         >
         </PhoneCard>
      </div>
    </div>

    <!-- slogan -->
    <div v-if="this.$store.state.isMobile === true">
      <Slogan v-show="slogan.isShow" :slogan="slogan.content"></Slogan>
    </div>
  </div>
</template>

<script>
import util from '../util'

// openlayer
import 'ol/ol.css'
import {Map, View} from 'ol'
import * as Extent from 'ol/extent'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import * as olProj from 'ol/proj'
import {Point, MultiLineString} from 'ol/geom'
import {defaults as defaultInteractions} from 'ol/interaction'
import Feature from 'ol/Feature'
import * as control from 'ol/control'
import {Style, Icon, Stroke} from 'ol/style'
import {Cluster, Vector as VectorSource} from 'ol/source'
import TileSource from 'ol/source/TileWMS'
import XYZ from 'ol/source/XYZ'
import Overlay from 'ol/Overlay'
// import OSM from 'ol/source/OSM'

// eventBus公共实例
import bus from '../../static/js/eventBus'

// icon
import culture from '../assets/icon/culture.svg'
import info from '../assets/icon/info.svg'
import report from '../assets/icon/report.svg'
import more from '../assets/icon/more.svg'

// draw shape
import DrawShape from '../../static/js/startDrawShape'

// card
import phoneCard from './card.vue'

// slogan
import slogan from './slogan.vue'

// 地图对象
// eslint-disable-next-line
var map = null
export default {
  name: 'Map',
  components: {
    PhoneCard: phoneCard,
    Slogan: slogan,
    LayerSelector: () => import('./LayerSelector.vue') // 消息和底图选择
  },
  data () {
    return {
      noticeStyles: { //  通知标注 样式
        Point: new Style({
          image: new Icon({
            crossOrigin: 'anonymous',
            src: info,
            scale: 0.225
          })
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: '#ff8c42',
            width: 6
          })
        })
      },

      reportStyles: { //  报道/新闻 标注 样式
        Point: new Style({
          image: new Icon({
            crossOrigin: 'anonymous',
            src: report,
            scale: 0.25
          })
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: '#2953a5',
            width: 6
          })
        })
      },

      cultureStyles: { //  文化标注 样式
        Point: new Style({
          image: new Icon({
            crossOrigin: 'anonymous',
            src: culture,
            scale: 0.225
          })
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: '#f51a51',
            width: 6
          })
        })
      },

      otherStyles: { // 更多 标注 样式
        Point: new Style({
          image: new Icon({
            crossOrigin: 'anonymous',
            src: more,
            scale: 0.2
          })
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: '#f51a51',
            width: 6
          })
        })
      },

      // popup的overlay对象
      popup: null,
      popupData: { //  PC端 地图弹出框信息
        type: '',
        info: ''
      },
      // mobile端popup控制
      isShow: false,
      // 绘制状态
      isDraw: false,
      // 绘制选项
      drawTypeOption: ['线', '点'],
      // 绘制类型
      drawType: '线',
      // 绘制颜色
      drawColor: '#585eaa',
      // 信息显示列表(LayerSelector)
      checkTagList: [],
      checkMapList: [],
      // slogan
      slogan: {
        isShow: true,
        content: ''
      }
    }
  },
  methods: {
    /**
     * @description:构建地图
     * @returns {void}
     */
    initMap: function () {
      // PNG范围
      let leftTop = [11592187.538105225, 3592590.111732335]
      let rightBottom = [11594513.693708975, 3587420.877057335]
      // 经纬度
      // let leftTop = [104.13439162531515, 30.690273107307597]
      // let rightBottom = [104.15523854491164, 30.650437034690334]
      rightBottom = this.getExtentFromPNG(leftTop, rightBottom)
      // leftTop = olProj.fromLonLat(leftTop)
      // rightBottom = olProj.fromLonLat(rightBottom)
      // 根据设备的不同设置地图范围
      const MOBILE = [leftTop[0], rightBottom[1], rightBottom[0], leftTop[1]]
      // const PC = [11591064, 3589994, 11595665, 3592078]
      const PC = [11591064, 3589994, 11596565, 3592078]
      let extent = this.$store.state.isMobile ? MOBILE : PC
      let center = [
        (extent[0] + extent[2]) / 2,
        (extent[1] + extent[3]) / 2
      ]
      // let center = [
      //   (leftTop[0] + rightBottom[0]) / 2,
      //   (leftTop[1] + rightBottom[1]) / 2
      // ]
      let zoom = this.$store.state.isMobile ? 14.5 : 15.5

      map = new Map({
        target: 'mapview',
        layers: [
          //  天地图 地图
          new TileLayer({
            class: 'basemap',
            title: 'tiandi',
            source: new XYZ({
              url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=a7baca459fe5be059d34849072e84fd0'
            }),
            visible: true
            // nameCN: '在线地图'
          }),
          //  天地图 地图标注
          new TileLayer({
            class: 'basemap',
            title: 'tiandi',
            source: new XYZ({
              url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=a7baca459fe5be059d34849072e84fd0'
            }),
            visible: true
            // nameCN: '天地图标注'
          }),
          // 文化地图
          new TileLayer({
            class: 'basemap',
            title: 'cdut',
            source: new TileSource({
              url: 'http://cn-cd-ali-1.natfrp.cloud:10265/geoserver/CDUT/wms',
              crossOrigin: 'anonymous',
              params: {
                LAYERS: 'cdut_920',
                TILED: true
              },
              servertype: 'geoserver',
              transition: 0
            })
            // nameCN: '文化地图'
          })
        ],
        interactions: defaultInteractions({
          pinchRotate: false // 移动端禁止地图旋转
        }),

        view: new View({
          center: center,
          zoom: zoom,
          extent: extent,
          maxZoom: 18.5
        }),

        controls: control.defaults({
          zoom: false
        })
        // controls: control.defaults().extend([
        //   new control.MousePosition()
        // ])
      })
      setTimeout(function () { map.updateSize() })
    },

    /**
     * @description:开启聚合
     */
    addCluster: function (layerName, layerStyle) {
      let layer = map.getLayers().array_
      for (let i = 0; i < layer.length; i++) {
        if (layer[i].className_ === layerName) {
          var targetLayer = layer[i]
        }
      }
      if (targetLayer) {
        let features = targetLayer.getSource().getFeatures()
        let source = new VectorSource({
          features: features
        })
        let clusterSource = new Cluster({
          distance: 20,
          source: source
        })
        targetLayer.setSource(clusterSource)
        let style = (feature) => {
          let features = feature.get('features')
          let size = features.length
          let lastFeature = features[size - 1]
          let lonArr = []
          let latArr = []
          // 存储图标聚合的点的矩形范围
          if (feature.get('features').length > 1) {
            for (let i = 0; i < size - 1; i++) {
              let coordinate = features[i].values_.geometry.flatCoordinates
              lonArr.push(coordinate[0])
              latArr.push(coordinate[1])
            }
            let maxLon = Math.max(...lonArr)
            let minLon = Math.min(...lonArr)
            let maxLat = Math.max(...latArr)
            let minLat = Math.min(...latArr)
            let extent = [minLon, minLat, maxLon, maxLat]
            feature.set('extent', extent)
          }
          feature.set('id', lastFeature.values_.id)
          feature.set('type', lastFeature.values_.type)
          feature.set('number', feature.get('features').length)

          let style = layerStyle
          return style
        }
        targetLayer.setStyle(style)
      }
    },

    /**
     * @description:通过图片范围结合设备尺寸计算extent
     * @param {array} leftTop:左上坐标
     * @param {array} rightBot:右下坐标
     * @returns {array}
     */
    getExtentFromPNG: function (leftTop, rightBot) {
      // 屏幕高度宽度
      let width = window.screen.width
      let height = window.screen.height

      // png坐标(atcmap中获取)
      // let imgLeft = leftTop[0]
      let imgTop = leftTop[1]
      let imgRight = rightBot[0]
      let imgBottom = rightBot[1]

      // png比例*（根据发布的png）
      // let imgWidthratio = 9
      let imgHeightratio = 20

      // 屏幕比例（根据设备获取）
      // let screenWidthratio = 9 // 先假设都为9，其他情况todo
      let screenHeightratio = 9 * height / width //  先假设都小于20，其他情况todo

      //  计算显示范围
      let screenRight = imgRight
      let screenBottom = imgTop - (imgTop - imgBottom) * (screenHeightratio / imgHeightratio)

      //  得到屏幕显示范围
      // let screen_lefttop = [imgLeft, imgTop] // 屏幕显示的左上角
      let screenRightbottom = [screenRight, screenBottom] //  即屏幕显示的右下角

      return screenRightbottom
    },

    /**
     * @description:构建popup覆盖层
     * @returns {void}
     */
    initPopupOverLay: function () {
      var container = document.getElementById('pcPopup')

      this.popup = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      })
      map.addOverlay(this.popup)
    },

    /**
     * @description:绘制要素
     * @param {String} title:图层名称
     * @param {Object of {GeoJSON,String,String}} msg:要素信息(含有geometry,id,type)
     * @param {String} type:所属类别, 文化类：'culture' / 消息类: 'notice'
     * @param {Boolean} isRefresh:是否刷新图层
     * @param {Boolean} isLoacate:是否缩放到要素
     * @returns {void}
     */
    printFeature: function (title, msg, type, isRefresh = false, isLocate = false, isRelate = false) {
      // 初始化图层
      var layer = this.getLayerByTitle(title)
      if (layer !== null) {
        // 非首次调用，清除图层中的要素
        if (isRefresh) {
          layer.getSource().clear()
        }
      } else {
        // 首次调用，创建图层
        layer = new VectorLayer({
          title: title,
          class: 'layer',
          className: title,
          // extent: this.extent,
          source: new VectorSource({
          })
        })
        map.addLayer(layer)
      }
      // GeoJSON格式转换为ol.feature格式，样式装载
      var geometry = msg.geometry
      var style
      switch (type) {
        case 'notice':
          style = this.noticeStyles
          break
        case 'report':
          style = this.reportStyles
          break
        case 'culture':
          style = this.cultureStyles
          break
        case 'other':
          style = this.otherStyles
          break
      }
      var feature = this.GeoJSON_to_Feature(geometry, style)

      // 要素属性装载
      feature.set('id', msg.id)
      feature.set('type', type)

      // 要素装载入图层
      // 1.起始点
      layer.getSource().addFeature(feature)

      // 2.关联线
      let fe = null
      if (isRelate && msg.relate) {
        fe = this.GeoJSON_to_Feature(msg.relate, style)
        fe.set('id', msg.id)
        fe.set('type', type)
        layer.getSource().addFeature(fe)
      }

      // 缩放至要素
      if (isLocate) {
        let locatedFeature = feature
        let feaType = 'origin'

        if (isRelate && msg.relate) {
          locatedFeature = fe
          feaType = 'relate'
        }
        this.locateAtFeature(locatedFeature, feaType)
      }
    },
    /**
     * @description:根据 GeoJSON 格式数据绘制要素
     * tips:目前支持类型：Point,MultiLineString
     * @param {GeoJSON} geometry:GeoJSON格式数据
     * @param {Array of ol.Style} styles:样式
     * @returns {ol.feature} 返回由GeoJSON转换成的配制好样式的ol.feature
     */
    GeoJSON_to_Feature: function (geometry, styles) {
      if (!geometry.type) {
        console.log('printFromGeoJSON 所输入的GeoJSON不符合规范')
        return
      }

      var feature = null
      // 按geometry.type类型创建要素并赋予样式
      switch (geometry.type) {
        case 'Point':
          feature = new Feature({
            geometry: new Point(olProj.fromLonLat(geometry.coordinates, 'EPSG:3857')),
            shape: geometry.type
          })
          feature.setStyle(styles.Point)
          break
        case 'MultiLineString':
          // let geo = geometry.coordinates.map(x => {
          //   return olProj.fromLonLat(x, 'EPSG:3857')
          // })
          // feature = new Feature({
          //   geometry: new LineString(geo),
          //   shape: geometry.type
          // })
          // feature.setStyle(styles.LineString)
          let coords = []
          // 多线
          geometry.coordinates.forEach(i => {
            // 多点
            let co = i.map(x => {
              x = olProj.fromLonLat(x, 'EPSG:3857')
              return x
            })
            coords.push(co)
          })
          feature = new Feature({
            geometry: new MultiLineString(coords),
            shape: geometry.type
          })
          feature.setStyle(styles.LineString)
          break
        default:
          console.log('printFromGeoJSON不支持该"' + geometry.type + '"类型')
          return
      }

      return feature
    },

    /**
     * @description:ol.feature 转 GeoJSon
     * tips:目前支持类型：Point,LineString；
     * @param {ol.feature} feature
     * @returns {GeoJSON}
    */
    Feature_to_GeoJSon: function (feature) {
      let baseType = feature[0].type
      // 多点取第一个点，多线取多线
      // eslint-disable-next-line no-unneeded-ternary
      let isMulti = feature.length > 1 ? true : false
      // eslint-disable-next-line no-unneeded-ternary
      isMulti = baseType === 'LineString' ? true : false

      if (isMulti) {
        let type = 'MultiLineString'
        let coords = []

        // 多线
        feature.forEach(i => {
          i = i.coordinates

          // 多点
          let co = i.map(x => {
            x = olProj.toLonLat(x)
            return x
          })
          coords.push(co)
        })

        return {
          type: type,
          coordinates: coords
        }
      } else {
        let coord = feature[0].coordinates
        switch (baseType) {
          case 'LineString':
            coord = coord.map(x => {
              x = olProj.toLonLat(x)
              return x
            })
            break
          case 'Point':
            coord = olProj.toLonLat(coord)
            break
        }
        return {
          type: baseType,
          coordinates: coord
        }
      }
    },

    /**
     * @description:缩放至要素
     * @param {ol.Feature} feature:要素
     * @param {int} zoom: 缩放级别
     * @return {void}
     */
    locateAtFeature: function (feature, type, zoom = 17.5) {
      let view = map.getView()
      view.setZoom(zoom)
      if (this.$store.state.isMobile && type !== 'relate') {
        let coord = Extent.getCenter(feature.getGeometry().getExtent())
        coord[1] = coord[1] * 1.00006
        view.setCenter(coord)
      } else {
        view.setCenter(Extent.getCenter(feature.getGeometry().getExtent()))
      }
      if (type === 'relate') {
        view.setZoom(zoom * 0.975)
      }
    },

    /**
     * @description:获取并渲染最近若干天的通知
     * @param {int} day: 天数
     * @returns {void}
     */
    loadRecentNotices: function (day) {
      var that = this
      this.$axios
        .post('/notice/recent', {
          day: day
        })
        .then(res => {
          res.data.forEach(item => {
            that.printFeature('noticeLayer', item, 'notice')
          })
          this.addCluster('noticeLayer', this.noticeStyles.Point)
        })
    },

    /**
     * @description:获取并渲染最近若干天的报道
     * @param {int} day: 天数
     * @returns {void}
     */
    loadRecentReports: function (day) {
      var that = this
      this.$axios
        .post('/report/recent', {
          day: day
        })
        .then(res => {
          res.data.forEach(item => {
            that.printFeature('reportLayer', item, 'report')
          })
          this.addCluster('reportLayer', this.reportStyles.Point)
        })
    },

    /**
     * @description:获取并渲染所有文化设施
     * @returns {void}
     */
    loadCulture: function () {
      var that = this
      this.$axios
        .post('/culture/all')
        .then(res => {
          res.data.forEach(e => {
            that.printFeature('cultureLayer', e, 'culture')
          })
          this.addCluster('cultureLayer', this.cultureStyles.Point)
        })
    },

    /**
     * @description:加载并渲染'更多'
     */
    loadOthers: function () {
      var that = this
      this.$axios
        .post('/others/all')
        .then(res => {
          res.data.forEach(e => {
            that.printFeature('otherLayer', e, 'other')
          })
          this.addCluster('otherLayer', this.otherStyles.Point)
        })
    },

    /**
     * @description: 地图要素点击事件
     * @return {void}
     */
    mapClick: function () {
      var that = this

      // 根据设备类型设置点击事件
      var clickFun = this.$store.state.isMobile ? mobileClickFun : pcClickFun
      map.on('singleclick', clickFun)

      async function mobileClickFun (e) {
        var feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
          return feature
        })
        if (feature) {
          var id = feature.get('id')
          let type = feature.get('type')
          let number = feature.get('number')
          if (number === 1) {
            let data = null
            switch (type) {
              case 'notice':
                data = await that.loadNoticeByID(id)
                break
              case 'report':
                data = await that.loadReportByID(id)
                break
              case 'culture':
                data = await that.loadCultureByID(id)
                break
              case 'other':
                data = await that.loadOthersByID(id)
                break
            }
            that.printFeature('markLayer', data, type, true, true, true)
            that.isShow = true
            bus.$emit('closeList')
          } else {
            // 当点击的图标个数大于1时设置视角范围为多个图标的矩形范围
            let extent = feature.get('extent')
            map.getView().fit(extent, map.getSize())
          }
        } else {
          that.closePopup()
        }
      }

      async function pcClickFun (e) {
        // var coordinate = e.coordinate
        var feature = map.forEachFeatureAtPixel(e.pixel, feature => {
          return feature
        })
        if (feature) {
          let number = feature.get('number')
          if (number === 1) {
            bus.$emit('printMapMark', {
              type: feature.get('type'),
              id: feature.get('id')
            })
          } else {
            // 当点击的图标个数大于1时设置视角范围为多个图标的矩形范围
            let extent = feature.get('extent')
            map.getView().fit(extent, map.getSize())
          }
        } else {
          that.closePopup()
        }
      }
    },

    /**
     * @description: ol封装：通过title属性获取图层
     * @param {title} 图层title值
     * @return {layer / null}
    */
    getLayerByTitle: function (title) {
      var layers = map.getLayers().array_
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].get('title') === title) {
          return layers[i]
        } else {
          continue
        }
      }
      return null
    },

    /**
     * @description:通过id查询载入通知信息
     */
    loadReportByID: async function (id) {
      var that = this
      var res

      await this.$axios
        .post('/report/detail', {
          id: id
        })
        .then(response => {
          that.popupData.info = response.data
          that.popupData.type = '新闻报道'

          res = response.data
        })

      return res
    },

    /**
     * @description:通过id查询载入通知信息
     */
    loadNoticeByID: async function (id) {
      var that = this
      var res
      await this.$axios
        .post('/notice/detail', {
          id: id
        })
        .then(response => {
          that.popupData.info = response.data
          that.popupData.type = '活动通知'
          res = response.data
        })

      return res
    },

    /**
     * @description:通过id 查询载入文化信息
     */
    loadCultureByID: async function (id) {
      var that = this
      var res

      await this.$axios
        .post('/culture/detail', {
          id: id
        })
        .then(response => {
          response.data.content = response.data.content.join('')
          that.popupData.info = response.data
          that.popupData.type = '文化设施'

          res = response.data
        })

      return res
    },

    /**
     * @description:通过id 查询载入'其他'信息
    */
    loadOthersByID: async function (id) {
      var that = this
      var res

      await this.$axios
        .post('/others/detail', {
          id: id
        })
        .then(response => {
          that.popupData.info = response.data
          that.popupData.type = '活动通知'
          res = response.data

          res = response.data
        })

      return res
    },

    /**
     * @description:设置并聚焦到popup的显示位置
     * @param {ol.coordinate}坐标
     * @param {ol.zoom}缩放级别
     */
    setPopupPosition: function (coordinate, zoom = 18) {
      this.popup.setPosition(coordinate)
      this.isShow = true
      var view = map.getView()
      view.setCenter(coordinate)
      // view.setZoom(zoom)
    },

    /**
     * @description:根据pc端与mobile端不同的popup关闭事件
     * @param {DOM} dom:点击按钮dom
     */
    closePopup: function (dom) {
      if (this.$store.state.isMobile) {
        this.isShow = false
      } else {
        this.popup.setPosition(undefined)
        this.isShow = false
        // 消除按钮聚焦
        if (dom) {
          dom.blur()
        }
      }
      return false
    },

    /**
     * @description:绘制要素
     */
    drawBegin: function () {
      // 更改为绘制状态
      this.isDraw = true

      let col = this.drawColor

      switch (this.drawType) {
        case '点':
          DrawShape.drawPoint(col, map)
          break
        case '线':
          DrawShape.drawLine(col, map)
          break
      }
    },

    /**
     * @description:结束绘制要素
     */
    drawEnd: function () {
      this.isDraw = false

      let data = DrawShape.closeDrawShape()
      if (data.length !== 0) {
        data = this.Feature_to_GeoJSon(data)
      } else {
        data = null
      }

      switch (this.drawType) {
        case '点':
          bus.$emit('drawGeometryEnd', data)
          break
        case '线':
          bus.$emit('drawRelateEnd', data)
          break
      }
    },

    // LayerSelector related
    // 底图选择 和 消息选择 的图层切换
    getCheckedMap: function (checkMapList) {
      this.checkMapList = checkMapList
      util.map.setMapVisible(map, checkMapList, 'basemap')
    },

    getCheckedTag: function (checkTagList) {
      this.checkTagList = checkTagList
      util.map.setMapVisible(map, checkTagList, 'layer')
    },

    /**
     * @description: 监听视图变化，调整slogan可见
     */
    sloganListener: function () {
      var that = this
      // 获取放置地图的div
      var mapDiv = document.getElementById('mapview')
      // 当鼠标滚轮事件发生时，执行一些操作
      function onMouseWheel (ev) {
        window.setTimeout(function () {
          let zoom = map.getView().getZoom()
          if (zoom > 15.3) {
            that.slogan.isShow = false
          } else {
            that.slogan.isShow = true
          }
          // FF 和 Chrome
          if (ev.preventDefault) {
            ev.preventDefault()// 阻止默认事件
          }
          return false
        }, 500)
      }
      addEvent(mapDiv, 'mousewheel', onMouseWheel)
      addEvent(mapDiv, 'DOMMouseScroll', onMouseWheel)
      addEvent(mapDiv, 'touchmove', onMouseWheel)
      function addEvent (obj, xEvent, fn) {
        if (obj.attachEvent) {
          obj.attachEvent('on' + xEvent, fn)
        } else {
          obj.addEventListener(xEvent, fn, false)
        }
      }
    },

    /**
     * @description: eventBus的bus.$on 触发事件汇总
     */
    busOnAction: function () {
      var that = this

      // mobile端：绘制报道标识与popup弹窗
      bus.$on('showMsgDetail', async msg => {
        let data
        let id = msg.id
        switch (msg.type) {
          case 'notice':
            await that.loadNoticeByID(id)
              .then(res => {
                data = res
              })
            break
          case 'report':
            await that.loadReportByID(id)
              .then(res => {
                data = res
              })
            break
          case 'culture':
            await that.loadCultureByID(id)
              .then(res => {
                data = res
              })
            break
          case 'other':
            await that.loadOthersByID(id)
              .then(res => {
                data = res
              })
            break
        }
        that.printFeature('markLayer', data, msg.type, true, true, true)
        that.isShow = true
      })

      // PC端：根据各个类型的id 绘制地图标识与popup弹窗
      bus.$on('printMapMark', async msg => {
        let data
        let id = msg.id
        switch (msg.type) {
          case 'notice':
            await that.loadNoticeByID(id)
              .then(res => {
                data = res
              })
            break
          case 'report':
            await that.loadReportByID(id)
              .then(res => {
                data = res
              })
            break
          case 'culture':
            await that.loadCultureByID(id)
              .then(res => {
                data = res
              })
            break
          case 'other':
            await that.loadOthersByID(id)
              .then(res => {
                data = res
              })
            break
        }
        that.printFeature('markLayer', data, msg.type, true, true, true)

        //  显示popup
        var feature = that.getLayerByTitle('markLayer').getSource().getFeatures()[0]
        var coord = feature.getGeometry().getCoordinates()

        that.setPopupPosition(coord)
      })

      // 刷新地图标识
      bus.$on('refreshMap', () => {
        map.removeLayer(that.getLayerByTitle('noticeLayer'))
        map.removeLayer(that.getLayerByTitle('reportLayer'))
        map.removeLayer(that.getLayerByTitle('cultureLayer'))
        map.removeLayer(that.getLayerByTitle('otherLayer'))
        map.removeLayer(that.getLayerByTitle('markLayer'))
        that.loadOthers()
        that.loadCulture()
        that.loadRecentReports(7)
        that.loadRecentNotices(7)
        that.closePopup()
      })

      // 绘制
      bus.$on('drawBegin', type => {
        that.drawType = type
        that.drawBegin(type)
      })

      // 关闭弹窗
      bus.$on('closePopup', () => {
        that.closePopup()
      })
    }
  },
  mounted () {
    this.initMap()
    this.initPopupOverLay()
    this.busOnAction()
    this.loadRecentReports(365)
    this.loadRecentNotices(365)
    this.loadOthers()
    this.loadCulture()
    this.mapClick()
    this.sloganListener()
  },
  watch: {
    drawType: function () {
      DrawShape.closeDrawShape()
      this.drawBegin()
    },

    isShow: function () {
      if (this.isShow === true) {
        this.slogan.isShow = false
      }
    }
  },
  filters: {
    // 超过100位显示省略号
    ellipsis: function (value) {
      if (!value) return ''
      if (value.length > 70) {
        return value.slice(0, 70) + '...'
      }
      return value
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mapview{
  width: 100%;
  height: 100%;
  position: absolute;
  /* background: rgb(135,191,150); */
}

#div-draw {
  position: absolute;
  left: 50%;
  top:2px;
  z-index: 100;
  background: white;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  border: 1px solid gray;
  transform: translateX(-50%);
}

/*图层切换弹出框样式*/
#basemap-content {
  position: absolute;
  font-size: 12px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.95;
  right: 0px;
  margin-top: 40px;
  height: 50px;
  width:65px;
  align-content: center;
}

.basemap-item {
  padding: 5px;
  cursor: pointer;
}

.basemap-text,.online-map-text{
  width: 60px;
  height: 12px;
}
.basemap-text{
  color: #007bff;
  font-weight: bold;
  font-family: "Source Han Sans CN";

}

/*图层与消息按钮样式*/
.info-select-button {
  width: 22px;
  height: 20px;
}

.info-select-button-div {
  width: 22px;
  height: 22px;
  z-index: 999;
  cursor: pointer;
  position: absolute;
}

.layer-select-button {
  width: 22px;
  height: 22px;
}

.layer-select-button-div {
  width: 22px;
  height: 22px;
  z-index: 999;
  right: 3px;
  cursor: pointer;
  position: absolute;
}
</style>