超图

zhsq_qk-ui/src/api/components/supermap.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取超图服务信息
+export function selectSuperMap() {
+  return request({
+    url: '/system/config/getSuperMap',
+    method: 'get'
+  })
+}
+
+// 查询摄像头落点列表
+export function listForMark(query) {
+  return request({
+    url: '/system/camera/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export const iconList={
+  "marker":require('@/assets/images/cameraType/marker.png'),
+  "bigHorn":require('@/assets/images/cameraType/big-horn.png'),
+  "camera":require('@/assets/images/cameraType/camera.png'),
+  "cameraNot":require('@/assets/images/cameraType/camera-not.png'),
+  "notOnline":require('@/assets/images/cameraType/not-online.png'),
+  "sensor":require('@/assets/images/cameraType/sensor.png'),
+}
+
+
+export function getIcon (state) {
+  switch (state) {
+    case 1 : return iconList.marker;break;
+    case 2 : return iconList.bigHorn;break;
+    case 3 : return iconList.camera;break;
+    case 4 : return iconList.cameraNot;break;
+    case 5 : return iconList.notOnline;break;
+    case 6 : return iconList.sensor;break;
+    default : return iconList.camera;
+  }
+}

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

@@ -0,0 +1,330 @@
+<template>
+  <div id="qksupermap" ref="map" style="height: 100%;width: 100%"></div>
+</template>
+
+<script>
+import {iconList, selectSuperMap, listForMark, getIcon} from '@/api/components/supermap.js';
+
+export default {
+  name: "sookaSuperMap",
+  data() {
+    return {
+      isAdmin: false,
+      isJieDao: false,
+      mapId: "qksupermap",
+      layers: [],
+      map_shequList: [],
+      datasource_datasetNames: [],
+      map: null,
+      layerId: "",
+      zoom: "",
+      iServerJieDaoSheQuMap: "",
+      iServerJilinshengAndQikaiMap: "",
+      datasourceName: "",
+      datasetName: "",
+      centerpointLon: "",
+      centerpointLat: "",
+      iServerMap: "",
+      marker: "",
+      editableLayers: [],
+      url: "",
+      dataUrl: "",
+      workspace_qk: "",
+      workspace_jdsq: "",
+      map_jilinShiLiang: "",
+      map_qikaiYingXiang: "",
+      //选择用到的
+      resultData: [],
+      // 街道
+      jieDao: null,
+      // 社区
+      sheQu: null,
+      // 社区集合
+      sqOptions: null,
+      // 影像图/矢量图
+      yxtSlt: "yxt",
+      // 人房户/事件
+      rfhSj: "rfh",
+      // 年份
+      year: null,
+      //事件详情页是否显示
+      eventDetailVisible: null,
+      // 路由参数
+      routeType: null,
+      showLatLng: null,
+      closeChoseBuilding: null,
+      lockReconnect: false,
+      userId: null,
+    }
+  },
+  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.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.dataUrl = response.data.superMapIServerJiedaoshequMap;
+        this.url = response.data.superMapIServerJiedaoshequMap;
+        this.workspace_qk = this.iServerJilinshengAndQikaiMap;//省矢量及区影像，固定加载。
+        this.workspace_jdsq = this.iServerJieDaoSheQuMap;//街道社区的地图服务路径
+        this.map_jilinShiLiang = window.L.supermap.tiledMapLayer(this.workspace_qk, {
+          noWrap: true
+        });
+        // this.map_qikaiYingXiang = window.L.supermap.tiledMapLayer(this.workspace_qk + '/经开影像 ', {
+        //   noWrap: true
+        // });
+        this.initSlt();
+      });
+    },
+    /**
+     * 矢量图
+     */
+    initSlt: async function () {
+      this.layers.push(this.map_jilinShiLiang);//吉林矢量
+      // this.layers.push(this.map_qikaiYingXiang);//经开影像
+      this.initZxd();
+    },
+    /**
+     * 事件落点
+     */
+    initSjd: async function () {
+      this.init({
+        deptId: null,
+        year: this.year
+      }, this.map);
+    },
+    /**
+     * 中心点、zoom
+     */
+    initZxd: async function () {
+      this.initMap();
+    },
+    /**
+     * 加载地图
+     */
+    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: true,
+        doubleClickZoom: false,
+        layers: this.layers,
+        attributionControl: false,
+        logoControl: false,
+      }).on({"dblclick": this.callbackFunction});
+      this.editableLayers = new window.L.FeatureGroup().addTo(this.map);
+      let options = {
+        position: 'topleft',
+        draw: {
+          polyline: null,
+          polygon: {},
+          circlemarker: null,
+          circle: null,
+          rectangle: {},
+          marker: null,
+          remove: false
+        }
+      };
+      let drawControl = new window.L.Control.Draw(options);
+      this.map.addControl(drawControl);
+      this.map.on(window.L.Draw.Event.CREATED, function (e) {
+
+        let type = e.layerType;
+        let layer = e.layer;
+
+        _that.editableLayers.clearLayers();
+        _that.editableLayers.addLayer(layer);
+
+        switch (type) {
+          case 'polygon':
+          case 'rectangle':
+            _that.kuangXuan(layer._latlngs);
+            break;
+        }
+      });
+      this.initSjd();
+    },
+    callbackFunction: function (e) {
+      let that = this;
+      let lat = e.latlng.lat;
+      let lng = e.latlng.lng;
+      let polygon = window.L.circle([lat, lng], {radius: 10});//根据获取的坐标生成面，面直径为10，根据实际业务变动范围大小
+      let geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
+        //如果涉及到需要加载多个数据源及数据集，格式为datasetNames: ["building:东风创业","building:东风创业","building:东风创业"],如区指挥中心或街道指挥中心登录，则需加载多个数据源和数据集
+        datasetNames: [that.datasourceName + ":" + that.datasetName],//["building:东风新立"]加载数据源和数据集
+        geometry: polygon,//加载坐标
+        spatialQueryMode: "INTERSECT"
+      });
+      window.L.supermap
+        .featureService(that.dataUrl)
+        .getFeaturesByGeometry(geometryParam, function (serviceResult) {
+          console.log(serviceResult);
+
+          if (!serviceResult.result) {
+            return;
+          }
+
+          if (serviceResult.result.features.features.length === 0) {
+            return;
+          }
+          let icon = new window.L.Icon({
+            iconUrl: iconList['marker'],
+            iconSize: [48, 48],
+            iconAnchor: [24, 40],
+            popupAnchor: [-3, -40],
+            shadowSize: [41, 41],
+          })
+          if (that.marker) {
+            that.marker.setLatLng(e.latlng);
+          } else {
+            that.marker = window.L.marker(e.latlng, {
+              icon: icon
+            }).addTo(that.map);
+          }
+          window.L.geoJSON(serviceResult.result.features.features, {
+            onEachFeature: function (feature, layer) {
+              that.marker.bindPopup("数据集名称：" + feature.properties.NAME + ', 建筑物标识：' + feature.properties.SMID).openPopup(that.marker.getLatLng());
+              // that.showLatLng(feature.properties.SMID,feature.properties.NAME);
+              that.$emit('supermapShuangji', feature.properties.SMID, feature.properties.NAME);
+            }
+          });
+        });
+    },
+    kuangXuan(arr) {
+      const polygon = window.L.polygon([arr]);
+      this.getBuildingList(polygon);
+    },
+    getBuildingList(geometry) {
+      let that = this;
+      this.resultData = [];
+      if (this.datasource_datasetNames == null || this.datasource_datasetNames == "" || this.datasource_datasetNames == "undefined") {
+        this.$modal.alertWarning("未获取到建筑物，请重新选取！");
+        return;
+      }
+      const geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
+        //如果涉及到需要加载多个数据源及数据集，格式为datasetNames: ["building:东风创业","building:东风创业","building:东风创业"],如区指挥中心或街道指挥中心登录，则需加载多个数据源和数据集
+        /*datasetNames: [datasourceName + ":" + datasetName],//["building:东风新立"]加载数据源和数据集*/
+        datasetNames: this.datasource_datasetNames,//["building:东风创业"],//
+        geometry: geometry,
+        toIndex: -1,
+        spatialQueryMode: "INTERSECT"
+      });
+
+      window.L.supermap
+        .featureService(this.dataUrl)
+        .getFeaturesByGeometry(geometryParam, function (serviceResult) {
+          console.log(serviceResult);
+          if (!serviceResult.result) {
+            return;
+          }
+          if (serviceResult.result.features.features.length === 0) {
+            return;
+          }
+          let smids = '';
+          let names = '';
+          L.geoJSON(serviceResult.result.features.features, {
+            onEachFeature: function (feature, layer) {
+              smids += feature.properties.SMID + ",";
+              names += feature.properties.NAME + ",";
+            }
+          });
+          that.$emit('rfhMultiBefore', smids, names);
+        });
+    },
+    //事件落点相关方法
+    init: function (options) {
+      listForMark().then(response => {
+        let res = response;
+        for (let i = 0; i < res.rows.length; i++) {
+          this.addMark(res.rows[i]);
+        }
+      });
+    },
+    addMark: function (options) {
+      console.log("iconList.camera",iconList.camera);
+      let that = this;
+      let marker = "markers" + options.id;
+      marker = L.marker(
+        [options.longitude,options.latitude]
+        ,{
+          icon: L.icon({
+            iconUrl: getIcon(2),
+            iconAnchor: [50, 50],
+            iconSize: [48, 48],
+            popupAnchor: [-3, -40],
+            shadowSize: [41, 41],
+          })
+        }
+        );
+      /**鼠标悬停打开popup**/
+      // marker.on('mouseover', function () {
+      //   let html = "";
+      //   html += "<p class='v-p-color'>事件标题：" + options.eventTitle + "</p>";
+      //   html += "<p class='v-p-color'>上报时间：" + options.eventSbsj + "</p>";
+      //   html += "<p class='v-p-color'>上报人：" + options.eventSbrName + "</p>";
+      //   html += "<p class='v-p-color'>当前状态：" + getStateText(options.eventState) + "</p>";
+      //   this.bindPopup(html).openPopup(this.getLatLng());
+      // });
+      // /**鼠标移开关闭popup**/
+      // marker.on('mouseout', function () {
+      //   this.closePopup();
+      // });
+      // marker.on('click', function () {
+      //   getEventDetail(options.eventId).then(response => {
+      //     that.$emit('child-event', response);
+      //   });
+      // });
+      marker.addTo(that.map);
+    },
+  }
+}
+
+</script>
+
+<style>
+.header .nav {
+  z-index: 0;
+}
+
+/*地图DOM*/
+#qksupermap {
+  width: 100%;
+  height: 1080px !important;
+  background: none;
+}
+</style>