zhsq_qk_2.0/zhsq_qk-ui/src/views/supermap/supermap.vue

<template>
  <div>
    <div id="qksupermap" ref="map" style="height: 100%;width: 100%"></div>
    <div>
      <el-dialog title="防汛物资" :visible.sync="suppliesOpen" width="700px" append-to-body>
        <el-table :data="suppliesData" height="350">
          <el-table-column width="60" label="序号" align="center" type="index"/>
          <el-table-column label="品种" align="center" prop="varieties"/>
          <el-table-column label="价值（万元）" align="center" prop="cost"/>
          <el-table-column label="备注" align="center" prop="remarks"/>
        </el-table>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="抢险救援队" :visible.sync="teamOpen" width="1200px" append-to-body>
        <el-table :data="teamData" height="350">
          <el-table-column width="60" label="序号" align="center" type="index"/>
          <el-table-column width="100" label="姓名" align="center" prop="name"/>
          <el-table-column label="职务" align="center" prop="post"/>
          <el-table-column label="手机号" align="center" prop="phone"/>
          <el-table-column label="组织归属" align="center" prop="dept"/>
          <el-table-column label="所属乡镇" align="center" prop="township"/>
          <el-table-column label="所属村" align="center" prop="village"/>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {iconList, selectSuperMap, listForMark, getIcon, yjIconList} from '@/api/components/supermap.js';
import {
  selectQkEmergencyRescueTeamAllList,
  selectQkEmergencyShelterAllList,
  selectQkRescueSuppliesAllList,
  selectQkRescueSuppliesByDeptId,
  selectQkEmergencyRescueTeamByDeptId
} from "@/api/system/aqyj";

export default {
  name: "sookaSuperMap",
  data() {
    return {
      suppliesOpen: false,
      suppliesData: [],
      teamOpen: false,
      teamData: [],
      isAdmin: false,
      isJieDao: false,
      mapId: "qksupermap",
      layers: [],
      map_shequList: [],
      datasource_datasetNames: [],
      map: null,
      layerId: "",
      zoom: "",
      iServerJieDaoSheQuMap: "",
      iServerQkYingxiangtuMap: "",
      iServerQkYingxiangtuMapLunKuo: "",
      iServerJilinshengAndQikaiMap: "",
      datasourceName: "",
      datasetName: "",
      centerpointLon: "",
      centerpointLat: "",
      iServerMap: "",
      marker: "",
      editableLayers: [],
      url: "",
      dataUrl: "",
      workspace_qk: "",
      workspace_jdsq: "",
      workspace_qkyxt: "",
      workspace_qkyxtlk: "",
      map_jilinShiLiang: "",
      map_qikaiYingXiang: "",
      map_qikaiYingXiangLunKuo: "",
      //选择用到的
      resultData: [],
      resultLayer: [],
      // 街道
      jieDao: null,
      // 社区
      sheQu: null,
      // 社区集合
      sqOptions: null,
      // 影像图/矢量图
      yxtSlt: null,
      // 人房户/事件
      rfhSj: null,
      // 年份
      year: null,
      //事件落点类型
      markType: ['sxt'],
      //事件详情页是否显示
      eventDetailVisible: null,
      // 路由参数
      routeType: null,
      showLatLng: null,
      closeChoseBuilding: null,
      lockReconnect: false,
      userId: null,
      layerGroup: null, // 地图标点图标

      myLayerGroup: []
    }
  },
  mounted() {
    this.getSupermap(this.sqOptionsProps, this.jieDaoProps, this.sheQuProps, this.yxtSltProps, this.rfhSjProps, this.yearProps);
  },
  props: {
    // 社区集合
    sqOptionsProps: null,
    // 街道
    jieDaoProps: null,
    // 社区
    sheQuProps: null,
    // 影像图/矢量图
    yxtSltProps: null,
    // 人房户/事件
    rfhSjProps: null,
    // 年份
    yearProps: null,
  },
  methods: {
    getSupermap: async function (sqOptions, jieDao, sheQu, yxtSlt, rfhSj, year) {
      this.sqOptions = sqOptions;
      this.jieDao = jieDao;
      this.sheQu = sheQu;
      this.yxtSlt = yxtSlt;
      this.rfhSj = rfhSj;
      this.year = year;
      this.mapId = "";
      this.layers = [];
      this.map_shequList = [];
      this.datasource_datasetNames = [];
      selectSuperMap().then(response => {
        this.centerpointLat = response.data.superMapIServerQiKaiQuMapCenterPoint.split(",")[0];
        this.centerpointLon = response.data.superMapIServerQiKaiQuMapCenterPoint.split(",")[1];
        // this.datasetName="汽开区";
        // this.datasourceName="building";
        this.iServerMap = response.data.superMapIServer;
        this.layerId = response.data.layerId;
        this.zoom = response.data.zoom;
        this.iServerJilinshengAndQikaiMap = response.data.superMapIServerJilinshengAndQikaiMap;
        this.iServerJieDaoSheQuMap = response.data.superMapIServerJiedaoshequMap;
        this.iServerQkYingxiangtuMap = response.data.superMapIServerJilinshengYingxaingAndQikaiMap;
        this.iServerQkYingxiangtuMapLunKuo = response.data.superMapIServerQikaiOutlineMap;
        this.dataUrl = response.data.superMapIServerJiedaoshequMap;
        this.url = response.data.superMapIServerJiedaoshequMap;
        this.workspace_qk = this.iServerJilinshengAndQikaiMap;//省矢量及区影像，固定加载。
        this.workspace_jdsq = this.iServerJieDaoSheQuMap;//街道社区的地图服务路径
        this.workspace_qkyxt = this.iServerQkYingxiangtuMap;//汽开区影像图
        this.workspace_qkyxtlk = this.iServerQkYingxiangtuMapLunKuo;//汽开区影像轮廓图
        this.map_jilinShiLiang = window.L.supermap.tiledMapLayer(this.workspace_qk, {
          noWrap: true
        });
        this.map_qikaiYingXiang = window.L.supermap.tiledMapLayer(this.workspace_qkyxt + '/经开影像', {
          noWrap: true
        });
        this.map_qikaiYingXiangLunKuo = window.L.supermap.tiledMapLayer(this.workspace_qkyxtlk, {
          noWrap: true
        });
        this.initSlt();
      });
    },

    /**
     * 矢量图
     */
    initSlt: async function () {
      this.layers.push(this.map_jilinShiLiang);//吉林矢量
      this.initYxt();
    },

    /**
     * 影像图
     */
    initYxt: async function () {
      if (this.yxtSlt == 'yxt') {//影像图
        this.layers.push(this.map_qikaiYingXiang);//汽开影像
        this.layers.push(this.map_qikaiYingXiangLunKuo);//汽开影像轮廓
      }
      this.initZxd();
    },

    /**
     * 事件落点
     */
    initSjd: async function () {
      this.init(this.markType, this.map);
    },

    /**
     * 中心点、zoom
     */
    initZxd: async function () {
      this.initMap();
    },
    /**
     * 落点定位
     */
    dropLocation: function (lat, lng) {
      this.map.flyTo([lat, lng], 16, {duration: 3})
    },
    /**
     * 加载地图
     */
    initMap: async function () {
      let _that = this;
      this.map && this.map.remove();
      this.map = window.L.map('qksupermap', {
        preferCanvas: true,
        center: [this.centerpointLat, this.centerpointLon],//[43.876540660858154,125.24094343185425],
        zoom: this.zoom,
        crs: window.L.CRS.EPSG4326,
        zoomControl: false,
        doubleClickZoom: false,
        layers: this.layers,
        attributionControl: false,
        logoControl: false,
      });
      this.initSjd();
    },
    //事件落点相关方法
    init: function () {
      this.selectCameraList()
    },
    addMarkers(options, type) {
      let marker;
      let markers = [];
      let layerGroups = [];
      let clusterGroup = L.markerClusterGroup({
        //设置为true时显示聚类所占据的范围
        showCoverageOnHover: false,
        //设置为true时会向低一级聚类缩放
        zoomToBoundsOnClick: true,
        //增加点位时增加聚合动画（否则会出问题）
        animateAddingMarkers: true,
        //最大缩放级别点击聚合图标展开图标
        spiderfyOnMaxZoom: true
      });
      for (let i = 0; i < options.length; i++) {
        if (type == "sxt") {
          marker = this.addMarker(options[i], type);
        } else if (type == "yjcs") {
          marker = this.addShelterMarker(options[i], type);
        } else if (type == "jyd") {
          marker = this.addTeamMarker(options[i], type);
        } else if (type == "fxwz") {
          marker = this.addSuppliesMark(options[i], type);
        }
        clusterGroup.addLayer(marker);
        this.myLayerGroup.push({type: type, myGroup: clusterGroup});
      }
      this.map.addLayer(clusterGroup);
    },
    addMarker(option, type) {
      let markers = [];
      //定义图标
      let icon = new window.L.Icon({
        iconUrl: getIcon(option.buildType),
        iconAnchor: [50, 50],
        iconSize: [37, 64],
        popupAnchor: [-33, -47],
        shadowSize: [41, 41]
      });
      //定义落点
      let marker = L.marker([option.latitude, option.longitude], {
        icon: icon
      });
      //定义泡泡层
      marker.on('mouseover', function () {
        let html = "";
        html += "<p class='v-p-color'>摄像头名称：" + option.cameraName + "</p>";
        html += "<p class='v-p-color'>摄像头类型：" + option.buildTypeName + "</p>";
        html += "<p class='v-p-color'>所属派出所：" + option.policeName + "</p>";
        this.bindPopup(html).openPopup(this.getLatLng());
      });
      /**鼠标移开关闭popup**/
      marker.on('mouseout', function () {
        this.closePopup();
      });

      return marker;
    },

    addShelterMarker(option, type) {
      let markers = [];
      //定义图标
      let icon = new window.L.Icon({
        iconUrl: yjIconList[type],
        iconAnchor: [50, 50],
        iconSize: [37, 64],
        popupAnchor: [-33, -47],
        shadowSize: [41, 41]
      });
      //定义落点
      let marker = L.marker([option.latitude, option.longitude], {
        icon: icon
      });
      //定义泡泡层
      marker.on('mouseover', function () {
        let html = "";
        html += "<p class='v-p-color'>摄像头名称：" + option.cameraName + "</p>";
        html += "<p class='v-p-color'>点位具体位置：" + option.address + "</p>";
        html += "<p class='v-p-color'>视频点：" + option.videoSpot + "</p>";
        html += "<p class='v-p-color'>型号：" + option.cameraModel + "</p>";
        html += "<p class='v-p-color'>数量：" + option.number + "</p>";
        html += "<p class='v-p-color'>单位：" + option.unit + "</p>";
        html += "<p class='v-p-color'>备注：" + option.remark + "</p>";
        this.bindPopup(html).openPopup(this.getLatLng());
      });
      // /**鼠标移开关闭popup**/
      marker.on('mouseout', function () {
        this.closePopup();
      });
      return marker;
    },

    addTeamMarker(option, type) {
      let that = this;
      let markers = [];
      //定义图标
      let icon = new window.L.Icon({
        iconUrl: yjIconList[type],
        iconAnchor: [50, 50],
        iconSize: [37, 64],
        popupAnchor: [-33, -47],
        shadowSize: [41, 41]
      });
      //定义落点
      let marker = L.marker([option.latitude, option.longitude], {
        icon: icon
      });
      //定义泡泡层
      marker.on('click', function () {
        that.selectQkEmergencyRescueTeamByDeptId(option.deptId)
        that.suppliesOpen = false
      });
      return marker;
    },
    addSuppliesMark(option, type) {
      let that = this;
      let markers = [];
      //定义图标
      let icon = new window.L.Icon({
        iconUrl: yjIconList[type],
        iconAnchor: [50, 50],
        iconSize: [37, 64],
        popupAnchor: [-33, -47],
        shadowSize: [41, 41]
      });
      //定义落点
      let marker = L.marker([option.latitude, option.longitude], {
        icon: icon
      });
      //定义泡泡层
      marker.on('click', function () {
        that.selectQkRescueSuppliesByDeptId(option.deptId)
        that.suppliesOpen = false
      });
      return marker;
    },
    /**
     * 清理地图标点
     */
    clearM: function () {
      let that = this;
      if (that.myLayerGroup != null && that.myLayerGroup.length > 0) {
        for (var i = this.myLayerGroup.length - 1; i >= 0; i--) {
          that.myLayerGroup[i].myGroup.clearLayers()
          that.myLayerGroup.splice(i, 1)
        }
      }
    },
    //查询摄像头落点列表
    selectCameraList() {
      let that = this;
      listForMark().then(response => {
        that.addMarkers(response.data, "sxt");
      });
    },
    //查询应急避难所落点列表
    selectQkEmergencyShelterAllList() {
      let that = this;
      selectQkEmergencyShelterAllList().then(response => {
        that.addMarkers(response.data, "yjcs");
      })
    },
    //查询抢险救援队落点列表
    selectQkEmergencyRescueTeamAllList() {
      let that = this;
      selectQkEmergencyRescueTeamAllList().then(response => {
        that.addMarkers(response.data, "jyd");
      })
    },
    selectQkEmergencyRescueTeamByDeptId(deptId) {
      selectQkEmergencyRescueTeamByDeptId(deptId).then(res => {
        this.teamData = res.data;
        this.teamOpen = true
      })
    },
    //查询防汛抗旱物资储备落点列表
    selectQkRescueSuppliesAllList() {
      let that = this;
      selectQkRescueSuppliesAllList().then(response => {
        that.addMarkers(response.data, 'fxwz');
      })
    },
    selectQkRescueSuppliesByDeptId(deptId) {
      selectQkRescueSuppliesByDeptId(deptId).then(res => {
        this.suppliesData = res.data;
        this.suppliesOpen = true
      })
    },
  }
}

</script>

<style>
.header .nav {
  z-index: 0;
}

th {
  width: 100px; /* 设置宽度 */
  color: white; /* 设置字体颜色为白色 */
}

td {
  color: white; /* 设置字体颜色为白色 */
}

/*地图DOM*/
#qksupermap {
  width: 100%;
  /* height: 1080px !important; */
  background: none;
}
.el-dialog {
    background: #014f9f;

}
.el-dialog__title {
		    color: #ffffff;
		}
		.el-dialog__headerbtn .el-dialog__close {
		    color: #ffffff;
		}
		.el-table {
		    background-color: #014f9f;
		    color: #fff;
			 border-bottom: 1px solid #335d81;
		}
		.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
		    background-color: #032d58c9;
		    color: #fff;
		}
		.el-table .cell{
			 color: #fff;
		}
		.el-table tr {
		    background-color: #04346f61;
		}
		.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
		    background-color: #1c7fdb;
		}
		.el-table td.el-table__cell div{
			color: #fff;
		}
		.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
		    border-bottom: 1px solid #335d81;
		}
		.el-table::before, .el-table--group::after, .el-table--border::after {
		    background-color: #335d81;
		}
		.el-table__body-wrapper::-webkit-scrollbar{
			background: #294f76;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
		  background-color: #34669c;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
		  background-color: #294f76;
		}
		/* popup */

		.leaflet-popup {
		    position: absolute;
		    text-align: center;
		    margin-bottom: 20px;
		}
		.leaflet-popup-content-wrapper {
		    padding: 1px;
		    text-align: left;
		    border-radius: 12px;
		}
		.leaflet-popup-content {
		    margin: 13px 19px;
		    line-height: 1.4;
        width: 298px!important;
		}
		.leaflet-popup-content p {
		    margin: 18px 0;
			color: #fff;
		}
		.leaflet-popup-tip-container {
		    width: 40px;
		    height: 20px;
		    position: absolute;
		    left: 50%;
		    margin-left: -20px;
		    overflow: hidden;
		    pointer-events: none;
		}
		.leaflet-popup-tip {
		    width: 17px;
		    height: 17px;
		    padding: 1px;

		    margin: -10px auto 0;

		    -webkit-transform: rotate(45deg);
		    -moz-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		    transform: rotate(45deg);
		}
		.leaflet-popup-content-wrapper,
		.leaflet-popup-tip {
		    background: rgba(4, 45, 106, 0.7);
		    color: #333;
		    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
		}
		.leaflet-container a.leaflet-popup-close-button {
		    position: absolute;
		    top: 0;
		    right: 0;
		    padding: 4px 4px 0 0;
		    border: none;
		    text-align: center;
		    width: 18px;
		    height: 14px;
		    font: 16px/14px Tahoma, Verdana, sans-serif;
		    color: #c3c3c3;
		    text-decoration: none;
		    font-weight: bold;
		    background: transparent;
		}
		.leaflet-container a.leaflet-popup-close-button:hover {
		    color: #999;
		}
		.leaflet-popup-scrolled {
		    overflow: auto;
		    border-bottom: 1px solid #ddd;
		    border-top: 1px solid #ddd;
		}

		.leaflet-oldie .leaflet-popup-content-wrapper {
		    -ms-zoom: 1;
		}
		.leaflet-oldie .leaflet-popup-tip {
		    width: 24px;
		    margin: 0 auto;

		    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
		    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
		}
		.leaflet-oldie .leaflet-popup-tip-container {
		    margin-top: -1px;
		}

		.leaflet-oldie .leaflet-control-zoom,
		.leaflet-oldie .leaflet-control-layers,
		.leaflet-oldie .leaflet-popup-content-wrapper,
		.leaflet-oldie .leaflet-popup-tip {
		    border: 1px solid #999;
		}
</style>