kxc_web/src/views/MapView/index.vue

<template>
  <div id="viewDiv" class="viewDiv">
    <tf-dialog :show.sync="params.tfDialog.Show" :hide.sync="params.tfDialog.Hide" :set-size.sync="params.tfDialog.setSize" />
    <el-container style="height: 100%; width: 100%;">
      <el-container :style="{ height: 'calc(100% - ' + footer_height + ')', width: '100%' }">
        <el-main>
          <div id="antherPanel" style="display: none;width: 50%;height: 100%;float: left;border-right: 3px solid #ccc;" />

          <!-- 三维视图 -->
          <div id="sceneView" ref="sceneView" class="sceneView" v-show="false" :style="{ width: '0'}">
            <!-- 23D视图切换 -->
            <viewChange />
            <measureMent3D v-if="viewer" :viewer="viewer" />
            <sceneFly v-if="viewer" :viewer="viewer" />
            <!-- 底部状态栏 -->
            <viewerStatusBar v-if="viewer" :viewer="viewer"></viewerStatusBar>
          </div>

          <!-- 二维视图 -->
          <div id="mapView" ref="mapView" class="mapView" :style="{ marginRight:'0', height: '100%' }">
            <div v-show="labelShow" id="mapLabel">
              <img src="./images/mapLabel.png" />
            </div>
            <div v-show="themShow" id="them" style="position: absolute;left: calc(50% - 250px);top: calc(50% - 150px);">
              <img style="width: 500px; height: 300px;" :src="themSrc" />
            </div>

            <!-- 地图查询 -->
            <div class="tofly-map-query">
              <MapQueryTool v-if="map" :map="map" />
            </div>
            <!-- 放大缩小 -->
            <MapZoom v-if="map" :map="map" />
            <!-- 工具条 -->
            <div class="tofly-tools">
              <!-- 数据维护 -->
              <!-- <div class="tool-item">
                <FeatureEdit v-if="map" :map="map" :mapConfig='config'/>
              </div> -->
              <div class="tool-item">
                <LayerControl v-if="map" :map="map" />
              </div>
              <div class="tool-item">
                <MeasureMent v-if="map" :map="map" />
              </div>
              <div class="tool-item">
                <toolBox v-if="map" :map="map" />
              </div>
            </div>
            <!-- 指北针 -->
            <MapCompass v-if="map" :map="map" />
            <!-- 23D视图切换 -->
            <viewChange />
            <!-- 默认范围 -->
            <div ref="tofly-map-reset" class="tofly-map-resetMap iconfont icon-fang" title="默认范围" @click="ResetMap" />

            <!-- 图例 -->
            <mapLegend />

            <!-- 鹰眼 -->
            <div ref="tofly-map-OverviewMap" class="tofly-map-OverviewMap" />

            <!-- 比例尺 -->
            <div class="tofly-map-ScaleLine">
              <span>比例尺：</span>
              <div ref="tofly-map-ScaleLine" />
            </div>
            <!-- 鼠标坐标 -->
            <div ref="tofly-map-MousePosition" class="tofly-map-MousePosition" />
            <!-- 气泡弹窗 -->
            <popupWindow v-if="map" ref="popupWindow" :map="map"></popupWindow>
          </div>

          <float-panels v-if="this.view" :panels="FloatPanels" :data="params" :panel-visible.sync="floatpanel_visible"
                        @handelClose="handelClose" />
          <right-half-panals v-if="this.view" :panels="RightHalfPanals" :data="params" :panel-visible.sync="rightpanel_visible"
                             @handelClose="handelClose" />
        </el-main>
        <el-aside :style="{ width: side_width, height: '100%' }">
          <side-panels v-if="this.view" :panels="Panels" :data="params" :side-width.sync="side_width"
                       :panel-visible.sync="sidepanel_visible" @handelClose="handelClose" />
        </el-aside>
      </el-container>
      <el-footer :style="{ height: footer_height, width: '100%', padding: '0px' }">
        <half-panels v-if="this.view" :panels="HalfPanels" :data="params" :footer-height.sync="footer_height"
                     :default-height="halfpanel_defaultHeight" :panel-visible.sync="halfpanel_visible"
                     :fullpanel-visible.sync="fullpanel_visible" @handelClose="handelClose" />
        <full-panels v-if="this.view" :panels="FullPanels" :data="params" :footer-height.sync="footer_height"
                     :panel-visible.sync="fullpanel_visible" :halfpanel-visible.sync="halfpanel_visible" @handelClose="handelClose" />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Layout from '@/layout';

import 'ol/ol.css';
import Comps from '@/layout/components/loadComps';
import { HalfPanels, FullPanels, FloatPanels, SidePanels, RightHalfPanals } from '@/layout/components/index';
import { esriConfig } from 'staticPub/config';
import { loadCss } from '@/utils/loadResources';
import tfDialog from './common/Dialog';
import { Map, View, Feature, Overlay } from 'ol';
import { Polygon, Point, LineString, MultiLineString } from 'ol/geom';
import { Image as ImageLayer, Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
import { OSM, XYZ, ImageWMS, Vector as VectorSource } from 'ol/source';
import { Style, Fill, Stroke, Icon, Text, Circle } from 'ol/style';
import { createStringXY } from 'ol/coordinate';
import { unByKey } from 'ol/Observable';
import { OverviewMap, ScaleLine, defaults, MousePosition, FullScreen, Zoom } from 'ol/control';
import MapQueryTool from './mapViewTools/mapQuery';
import { Select, Draw } from 'ol/interaction';
import { altKeyOnly, click, pointerMove } from 'ol/events/condition';
import { mapConfig } from './map.config';
import { getSiteInfoList, getAlarmEventList } from '@/api/oneMap';
import { format } from 'ol/coordinate';
import { bbox as bboxStrategy } from 'ol/loadingstrategy';
import GeoJSON from 'ol/format/GeoJSON';
import { getVectorContext } from 'ol/render';
import * as turf from '@turf/turf'
import { Logo, TileSuperMapRest, SuperMap, FeatureService } from '@supermap/iclient-ol';
// 投影
import { Projection, addProjection, get as getProjection, fromLonLat, transform } from 'ol/proj';
import { register as olRegisterProj } from 'ol/proj/proj4';
import proj4 from 'proj4'

// 基础工具
import MapZoom from '@/views/MapView/mapViewTools/mapZoom';
import MeasureMent from './mapViewTools/measureMent';
import FeatureEdit from './mapViewTools/featureEditTools';
import LayerControl from '@/views/MapView/mapViewTools/layerControl';
import viewToggle from '@/views/MapView/mapViewTools/viewToggle';
import screenShots from '@/views/MapView/mapViewTools/screenShots';
import MapToggle from '@/views/MapView/mapViewTools/basicMapToggle';
import toolBox from '@/views/MapView/mapViewTools/toolBox';
import viewChange from '@/views/MapView/mapViewTools/viewChange';
import measureMent3D from '@/views/MapView/mapViewTools/measureMent3D';
import sceneFly from '@/views/MapView/mapViewTools/sceneFly';
import MapCompass from '@/views/MapView/mapViewTools/mapCompass';
import viewerStatusBar from '@/views/MapView/mapViewTools/viewerStatusBar'
import popupWindow from '@/views/MapView/mapViewTools/popupWindow'
import mapLegend from '@/views/MapView/mapViewTools/mapLegend'

import { getFields } from '@/api/kxc/pipelineSystem'
import { async } from 'q';

const Cesium = window.Cesium; // 获取Cesium
export default {
  components: {
    HalfPanels,
    FullPanels,
    FloatPanels,
    SidePanels,
    RightHalfPanals,
    tfDialog,
    MapQueryTool,
    MapZoom,
    MeasureMent,
    LayerControl,
    viewToggle,
    screenShots,
    MapToggle,
    toolBox,
    viewChange,
    measureMent3D,
    FeatureEdit,
    MapCompass,
    sceneFly,
    viewerStatusBar,
    popupWindow,
    mapLegend
  },
  data() {
    return {
      config: null,
      projection: null,
      map: null,
      layers: [],
      monitorLayer: null, // 监测专题图层
      viewTileLayers: [],
      controls: null,
      view: null,
      Comps,
      show: true,
      themShow: false,
      themSrc: '',
      labelShow: false,
      side_width: '0%',
      footer_height: '0%',
      sidepanel_visible: false,
      floatpanel_visible: false,
      rightpanel_visible: false,
      halfpanel_visible: false,
      fullpanel_visible: false,
      halfpanel_defaultHeight: '400px',
      params: {
        mapView: this.view,
        that: this,
        // 当前激活的模块
        activeModel: null,
        tfDialog: {
          Show: null,
          Hide: null,
          setSize: null
        }
      },
      // 图例控制
      legend: false,
      inputInfo: '',
      sceneView_visible: true,
      viewer: null,
      viewChangeStep: 2, // 防止两个视图变化监听死循环
      // mapView2D: false
      // 点击查询
      queryByClick: {
        querying: false,
        resultInfo: null
      },
      popupInfo: null // 点击选中的要素
    };
  },
  computed: {
    Panels() {
      return this.$store.state.map.panels;
    },
    FullPanels() {
      return this.$store.state.map.fullPanels;
    },
    HalfPanels() {
      return this.$store.state.map.halfPanels;
    },
    FloatPanels() {
      return this.$store.state.map.floatPanels;
    },
    RightHalfPanals() {
      return this.$store.state.map.rightHalfPanels;
    },
  },
  watch: {
    FullPanels() {
      this.show = true;
    }
  },
  created: function () {

  },

  mounted: function () {
    loadCss(esriConfig.baseCssUrl); // 本地css资源
    const _this = this;
    this.$nextTick(function () {
      _this.getProj() // 定义坐标系cgcs2000
      _this.initMap();
      _this.addIserverLayers()
      _this.creatSceneView()

    });
    this.config = mapConfig;
    this.getPipeFields()

    // 监听地图容器大小变化，更新地图
    this.$erd.listenTo(this.$refs.mapView, element => {
      this.map.updateSize();
    });
  },

  methods: {
    handelClose() {
      this.show = false;
    },
    getProj() {
      proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
      olRegisterProj(proj4);
      this.projection = new Projection({
        code: "EPSG:4490",
        extent: [-180, -90, 180, 90],
        worldExtent: [-180, -90, 180, 90],
        units: "degrees"
      });
      addProjection(this.projection);
    },
    initMap() {
      this.getMap(this.config);
      this.getMapTools(this.config);

      this.map = new Map({
        target: 'mapView',
        layers: this.layers,
        view: this.view,
        controls: this.controls
      });
      // this.map.on('pointermove', e => {
      //   var pixel = this.map.getEventPixel(e.originalEvent);
      //   var hit = this.map.hasFeatureAtPixel(pixel);
      //   this.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      // });
      // 更改鹰眼按钮图标
      $('.ol-overviewmap button').addClass('iconfont iconyy');


      // 二维地图鼠标拖拽监听
      // this.map.on('pointerdrag', evt => {
      //   if (this.mapView2D == true)
      //     this.map_extentChangeHandler()
      // })
      // 二维地图视图改变监听
      this.map.on('moveend', evt => {
        console.log("地图级别", this.map.getView().getZoom())
        this.map_extentChangeHandler()
      })

      // 地图点击事件，点击查询
      this.map.on("click", async event => {
        let pipelineDataServer = mapConfig.iServerUrl.pipelineDataServer // 管线数据服务
        await this.clickQuery(event.coordinate, pipelineDataServer)
      })
    },
    addIserverLayers() {
      // 加载底图
      this.loadiServerLayers(this.config.iServerUrl.baseMapLayers)
      // 加载公房宗地图层
      this.loadiServerLayers(this.config.iServerUrl.publicHouseLayers)
      // 加载基础GIS图层
      this.loadiServerLayers(this.config.iServerUrl.basicGISLayers)
      // 加载管线图层
      this.loadiServerLayers(this.config.iServerUrl.pipelineLayers)
    },
    /**
     * 获取地图
     **/
    getMap(options) {
      if (!options) return;
      // 获取鹰眼图层
      let viewTileLayer = options.iServerUrl.baseMapLayers.filter(item => {
        return item.name == '电子地图'
      });
      if (viewTileLayer.length > 0) {
        this.viewTileLayers = [
          new TileLayer({
            source: new TileSuperMapRest({
              url: viewTileLayer[0].url,
              crossOrigin: 'anonymous'
            })
          })
        ]
      }

      this.view = new View({
        center: [104.753586, 31.521350],
        // projection: this.projection,
        projection: "EPSG:4326",
        zoom: 15,
        maxZoom: 23,
        minZoom: 13,
        constrainResolution: true
      });
      this.params.mapView = this.view;
    },
    /**
     * 获取地图工具
     **/
    getMapTools(options) {
      const arrControls = [];

      // 添加比例尺
      arrControls.push(
        new ScaleLine({
          units: 'metric',
          target: this.$refs['tofly-map-ScaleLine']
        })
      );

      // 添加鼠标位置
      arrControls.push(
        new MousePosition({
          coordinateFormat: coordinate => {
            return format(coordinate, '经度：{x}  纬度：{y}', 6);
          }, // 保留6位小数位
          target: this.$refs['tofly-map-MousePosition']
        })
      );

      // 添加一个鹰眼控件
      arrControls.push(
        new OverviewMap({
          target: this.$refs['tofly-map-OverviewMap'],
          layers: this.viewTileLayers,
          collapseLabel: '',
          label: '',
          collapsed: false,
          tipLabel: '鹰眼'
        })
      );

      if (arrControls && arrControls.length > 0) {
        this.controls = defaults({
          attribution: false,
          zoom: false,
          rotate: false
        }).extend(arrControls);
      }
    },
    /**
     * 地图复位
     */
    ResetMap() {
      // 重置中心点位置为初始化位置
      this.view.setZoom(15);
      this.view.animate({
        center: [104.753586, 31.521350],
        duration: 600
      });
    },
    /**
     * 加载iserver服务图层
     */
    loadiServerLayers(LAYERS) {
      LAYERS.forEach(item => {
        this.map.addLayer(new TileLayer({
          source: new TileSuperMapRest({
            url: item.url,
            wrapX: true,
            crossOrigin: 'anonymous'
          }),
          name: item.name,
          type: item.type,
          visible: item.visible
        }))
      })
    },
    /**
     * 初始化三维场景
     */
    creatSceneView() {
      this.viewer = new Cesium.Viewer("sceneView", {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.gov.cn/img\_w/wmts?tk=700ea8c1e2dd873c349dc880169fd96d',
          layer: 'img',
          style: 'default',
          tileMatrixSetID: 'w',
          format: 'tiles',
          maximumLevel: 18
        }),
        infoBox: false
      });
      /**
       * 三维相机变化监听
       */
      this.viewer.scene.camera.moveEnd.addEventListener(() => {
        //实现对应的移动结束操作
        // console.log("相机移动", this.viewer.camera.computeViewRectangle(), this.map.getView().calculateExtent(this.map.getSize()))
        // if (this.mapView2D == true) return false
        this.viewChangeStep--
        if (this.viewChangeStep === 1) {
          const cameraExtent = this.viewer.camera.computeViewRectangle()
          let viewExtent = [
            cameraExtent.west * (180 / Math.PI),
            cameraExtent.south * (180 / Math.PI),
            cameraExtent.east * (180 / Math.PI),
            cameraExtent.north * (180 / Math.PI)
          ]
          this.map.getView().fit(viewExtent, this.map.getSize(), { duration: 1000 })
        }
        else
          this.viewChangeStep = 2
      })
      // 加载三维图层
      let s3mArray = this.config.iServerUrl.sceneService
      s3mArray.forEach(item => {
        this.viewer.scene.addS3MTilesLayerByScp(item.url, { name: item.name })
      });

      this.config.iServerUrl.tiles3D.forEach(item => {
        this.viewer.scene.open(item)
      })
    },
    /**
     * 视图联动二维地图变化
     */
    map_extentChangeHandler() {
      this.viewChangeStep--;
      if (this.viewChangeStep === 1) {
        let viewExtent = this.map.getView().calculateExtent(this.map.getSize())
        this.viewer.camera.setView({
          destination: Cesium.Rectangle.fromDegrees(viewExtent[0], viewExtent[1], viewExtent[2], viewExtent[3]),
        })
      } else {
        this.viewChangeStep = 2
      }
    },
    /**
     * 点击查询功能，在所有的数据集中查询
     */
    async clickQuery(position, DataServer) {
      this.queryByClick.querying = true // 开始点击查询
      console.log('地图点击查询开始')
      document.getElementById('mapView').style = "cursor:wait"
      let zoom = this.map.getView().getZoom()
      // 地图小于15级停止请求服务器查询
      if (zoom <= 15) {
        document.getElementById('mapView').style = "cursor:default"
        this.popupWindowClose()
        setTimeout(() => {
          this.queryByClick.querying = false
          console.log('小比例尺,地图点击查询结束')
        }, 500);
        return false;
      }
      let dis = 60 / 100000 // 缓冲距离
      if (zoom > 15) dis = 25 / 10000
      if (zoom >= 17) dis = 12 / 10000
      if (zoom >= 20) dis = 5 / 10000
      if (zoom >= 23) dis = 3 / 10000
      let bufferPoint = turf.buffer(turf.point(position), dis, { units: 'kilometers' }) // 缓冲
      console.log("级别：", zoom, "缓冲：", dis * 1000)
      let resultArray = []
      for (let i = 0; i < DataServer.dataSetInfo.length; i++) {
        // 空间查询参数
        let geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
          toIndex: -1,
          maxFeatures: 10,
          datasetNames: [DataServer.dataSource + ':' + DataServer.dataSetInfo[i].name],
          geometry: new GeoJSON().readFeature(bufferPoint).getGeometry(),
          spatialQueryMode: "INTERSECT" // 相交空间查询模式
        })

        await this.doClickQuery(DataServer.url, geometryParam).then(res => {
          if (res && res.result.features.features.length > 0) {
            let feature = res.result.features.features[0]
            feature["dataType"] = DataServer.dataSetInfo[i]
            if (feature.dataType.type == "line")
              resultArray.push(feature)
            else if (feature.dataType.type == "point")
              resultArray.unshift(feature)
          }
        })
      }
      if (resultArray.length > 0) {
        // 选择第一个作为结果
        this.popupWindowShow(position, resultArray[0])
      }
      else this.popupWindowClose()
      document.getElementById('mapView').style = "cursor:default"
      this.queryByClick.querying = false // 结束点击查询
      console.log('地图点击查询结束！！')
    },
    /**
     * 执行点击查询
     */
    doClickQuery(url, geometryParam) {
      return new Promise((resolve) => {
        //向服务器发送请求，并对返回的结果进行处理
        new FeatureService(url).getFeaturesByGeometry(geometryParam, serviceResult => {
          if (serviceResult.type == "processFailed") {
            resolve(null);
          }
          else {
            resolve(serviceResult);
          }
        })
      });
    },
    /**弹窗显示 */
    popupWindowShow(position, feature) {
      this.$refs.popupWindow.showPopup(position, feature)
      this.queryByClick.resultInfo = { coordinate: position, feature: feature }
      this.popupInfo = { coordinate: position, feature: feature }
    },
    /**弹窗关闭 */
    popupWindowClose() {
      this.$refs.popupWindow.closePopup()
      this.queryByClick.resultInfo = null
      this.popupInfo = null
    },
    /**获取管线的中文字段存放在本地 */
    getPipeFields() {
      getFields(1).then(res => { this.$store.dispatch('common/setPipeLineFields', res.result) })// 获取管线字段名称
      getFields(2).then(res => { this.$store.dispatch('common/setPipePointFields', res.result) })// 获取管点字段名称
      getFields(3).then(res => { this.$store.dispatch('common/setGroundFields', res.result) })// 获取管点字段名称
      getFields(4).then(res => { this.$store.dispatch('common/setBuildingFields', res.result) })// 获取管点字段名称
    }
  }
};
</script>

<style lang="scss" scoped>
.viewDiv {
  position: absolute;
  margin: 0px auto;
  width: calc(100% - 0px);
  height: calc(100% - 40px);
  .el-main {
    padding: 0px;
    overflow: hidden;
    *zoom: 1;
  }
  .sceneView {
    position: relative;
    float: right;
    height: 100%;
    background-color: #fffff2;
  }
  .mapView {
    position: relative;
    background-color: #fffff2;
    height: 100%;

    .tofly-Tool-mapControl {
      position: absolute;
      width: 350px;
      height: 400px;
      z-index: 333;
      background-color: rgba(255, 255, 255, 0.9);
      right: 12px;
      top: 52px;
      border-radius: 4px;
      border: 1px solid #e2e2e2;
    }

    .tofly-map-query {
      position: absolute;
      width: auto;
      height: 40px;
      z-index: 3;
      top: 10px;
      left: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      // opacity: 0.9;
    }

    .tofly-map-ScaleLine {
      position: absolute;
      width: 300px;
      color: #000;
      height: 35px;
      z-index: 333;
      bottom: 0;
      left: 80px;
      > span {
        height: 35px;
        line-height: 35px;
      }
      >>> .ol-scale-line {
        background: transparent;
        margin-left: 60px;
        height: 100%;
        bottom: 0;
        .ol-scale-line-inner {
          border-width: 2px;
          border-color: #000;
          color: #000;
          margin-top: 8px;
        }
      }
    }

    .tofly-map-resetMap {
      position: absolute;
      background-color: rgb(255, 255, 255);
      border-radius: 2px;
      color: #444444;
      width: 32px;
      height: 32px;
      line-height: 32px;
      font-weight: 600;
      text-align: center;
      right: 15px;
      z-index: 333;
      bottom: 178px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      cursor: pointer;
      &:hover {
        color: #006eb8;
      }
    }
    .tofly-tools {
      position: absolute;
      top: 10px;
      right: 15px;
      width: auto;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      background-color: rgb(255, 255, 255);
      z-index: 333;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      // border-radius: 4px;
      .tool-item {
        display: inline-block;
        vertical-align: middle;
        padding: 0 10px;
        cursor: pointer;
        // background-color: rgba(255, 255, 255, 0.9);
      }
    }
    .tofly-map-MousePosition {
      position: absolute;
      width: 400px;
      height: 35px;
      z-index: 333;
      bottom: 0;
      // right: 460px;
      left: 200px;
      color: #000;
      // font-weight: 600;
    }
    .tofly-map-OverviewMap {
      position: absolute;
      z-index: 333;
      width: 32px;
      height: 32px;
      bottom: 35px;
      right: 15px;
      background-color: #fff;
      cursor: pointer;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      >>> .ol-overviewmap {
        background-color: #fff !important;
        left: unset !important;
        right: 40px !important;
        bottom: 0.1px !important;
        border-radius: 2px;
        button {
          cursor: pointer;
          &:hover {
            color: #006eb8;
          }
        }
      }
      >>> .ol-overviewmap .ol-overviewmap-map {
        height: 200px;
        width: 300px;
      }
      >>> .ol-overviewmap button {
        // display: none;
        background-color: #fff;
        color: #444444;
        border-radius: 2px;
        outline: none;
      }
      >>> .ol-overviewmap button {
        left: unset !important;
        bottom: 4px;
        right: -36px;
        position: absolute;
      }
    }
    .bottom-contant {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40px;
      background-color: rgba(27, 27, 27, 0.7);
      z-index: 333;
    }
    #mapLabel {
      position: absolute;
      z-index: 333;
      bottom: 0;
    }
  }

  .ol-overlay-container {
    span {
      display: block;
      width: 20px;
      height: 42px;
      border-radius: 50%;
      background: url('/images/rhkSelect.gif') no-repeat;
      background-size: 20px 42px;
      border: 1px red solid;
    }
  }
}
.tofly-overviewmap {
  right: 100px;
}

.close {
  position: absolute;
  right: 0;
  cursor: pointer;
}
</style>