|
@@ -1,14 +1,50 @@
|
|
|
<template>
|
|
|
- <div id="qksupermap" ref="map" style="height: 100%;width: 100%"></div>
|
|
|
+ <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} from '@/api/components/supermap.js';
|
|
|
+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",
|
|
@@ -40,6 +76,7 @@ export default {
|
|
|
map_qikaiYingXiangLunKuo: "",
|
|
|
//选择用到的
|
|
|
resultData: [],
|
|
|
+ resultLayer: [],
|
|
|
// 街道
|
|
|
jieDao: null,
|
|
|
// 社区
|
|
@@ -52,6 +89,8 @@ export default {
|
|
|
rfhSj: null,
|
|
|
// 年份
|
|
|
year: null,
|
|
|
+ //事件落点类型
|
|
|
+ markType: ['sxt'],
|
|
|
//事件详情页是否显示
|
|
|
eventDetailVisible: null,
|
|
|
// 路由参数
|
|
@@ -60,6 +99,9 @@ export default {
|
|
|
closeChoseBuilding: null,
|
|
|
lockReconnect: false,
|
|
|
userId: null,
|
|
|
+ layerGroup: null, // 地图标点图标
|
|
|
+
|
|
|
+ myLayerGroup: []
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -94,7 +136,7 @@ export default {
|
|
|
selectSuperMap().then(response => {
|
|
|
this.centerpointLat = response.data.superMapIServerQiKaiQuMapCenterPoint.split(",")[0];
|
|
|
this.centerpointLon = response.data.superMapIServerQiKaiQuMapCenterPoint.split(",")[1];
|
|
|
- // this.datasetName="通榆县委";
|
|
|
+ // this.datasetName="汽开区";
|
|
|
// this.datasourceName="building";
|
|
|
this.iServerMap = response.data.superMapIServer;
|
|
|
this.layerId = response.data.layerId;
|
|
@@ -145,10 +187,7 @@ export default {
|
|
|
* 事件落点
|
|
|
*/
|
|
|
initSjd: async function () {
|
|
|
- this.init({
|
|
|
- deptId: null,
|
|
|
- year: this.year
|
|
|
- }, this.map);
|
|
|
+ this.init(this.markType, this.map);
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -157,7 +196,12 @@ export default {
|
|
|
initZxd: async function () {
|
|
|
this.initMap();
|
|
|
},
|
|
|
-
|
|
|
+ /**
|
|
|
+ * 落点定位
|
|
|
+ */
|
|
|
+ dropLocation: function (lat, lng) {
|
|
|
+ this.map.flyTo([lat, lng], 16, {duration: 3})
|
|
|
+ },
|
|
|
/**
|
|
|
* 加载地图
|
|
|
*/
|
|
@@ -174,208 +218,391 @@ export default {
|
|
|
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"
|
|
|
+ //事件落点相关方法
|
|
|
+ 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();
|
|
|
});
|
|
|
- window.L.supermap
|
|
|
- .featureService(that.dataUrl)
|
|
|
- .getFeaturesByGeometry(geometryParam, function (serviceResult) {
|
|
|
- console.log(serviceResult);
|
|
|
|
|
|
- if (!serviceResult.result) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ return marker;
|
|
|
+ },
|
|
|
|
|
|
- if (serviceResult.result.features.features.length === 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let icon = new window.L.Icon({
|
|
|
- iconUrl: iconList['yy'],
|
|
|
- iconAnchor: [50, 50],
|
|
|
- iconSize: [37, 64],
|
|
|
- popupAnchor: [-33, -47],
|
|
|
- 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);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
+ 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.name + "</p>";
|
|
|
+ html += "<p class='v-p-color'>类型:" + option.type + "</p>";
|
|
|
+ html += "<p class='v-p-color'>地址:" + option.address + "</p>";
|
|
|
+ html += "<p class='v-p-color'>避难场所范围:" + option.range + "</p>";
|
|
|
+ html += "<p class='v-p-color'>避难场所现状描述:" + option.state + "</p>";
|
|
|
+ html += "<p class='v-p-color'>占地面积(m²):" + option.area + "</p>";
|
|
|
+ html += "<p class='v-p-color'>可转移安置人数(万人):" + option.transferPerson + "</p>";
|
|
|
+ html += "<p class='v-p-color'>建设内容:" + option.constructionContent + "</p>";
|
|
|
+ this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
+ });
|
|
|
+ // /**鼠标移开关闭popup**/
|
|
|
+ marker.on('mouseout', function () {
|
|
|
+ this.closePopup();
|
|
|
+ });
|
|
|
+ return marker;
|
|
|
},
|
|
|
- kuangXuan(arr) {
|
|
|
- const polygon = window.L.polygon([arr]);
|
|
|
- this.getBuildingList(polygon);
|
|
|
+
|
|
|
+ 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;
|
|
|
},
|
|
|
- getBuildingList(geometry) {
|
|
|
+ addSuppliesMark(option, type) {
|
|
|
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"
|
|
|
+ let markers = [];
|
|
|
+ //定义图标
|
|
|
+ let icon = new window.L.Icon({
|
|
|
+ iconUrl: yjIconList[type],
|
|
|
+ iconAnchor: [50, 50],
|
|
|
+ iconSize: [37, 64],
|
|
|
+ popupAnchor: [-33, -47],
|
|
|
+ shadowSize: [41, 41]
|
|
|
});
|
|
|
-
|
|
|
- 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);
|
|
|
- });
|
|
|
+ //定义落点
|
|
|
+ let marker = L.marker([option.latitude, option.longitude], {
|
|
|
+ icon: icon
|
|
|
+ });
|
|
|
+ //定义泡泡层
|
|
|
+ marker.on('click', function () {
|
|
|
+ that.selectQkRescueSuppliesByDeptId(option.deptId)
|
|
|
+ that.suppliesOpen = false
|
|
|
+ });
|
|
|
+ return marker;
|
|
|
},
|
|
|
- //事件落点相关方法
|
|
|
- init: function (options) {
|
|
|
+ /**
|
|
|
+ * 清理地图标点
|
|
|
+ */
|
|
|
+ clearM: function () {
|
|
|
+ console.log("this.myLayerGroup",this.myLayerGroup)
|
|
|
+ console.log("this.resultLayer",this.resultLayer)
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if (that.resultLayer != null) {
|
|
|
+ // that.resultLayer.clearLayers()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ //查询摄像头落点列表
|
|
|
+ selectCameraList() {
|
|
|
+ let that = this;
|
|
|
listForMark().then(response => {
|
|
|
- // let res = response;
|
|
|
- // for (let i = 0; i < res.data.length; i++) {
|
|
|
- this.addMark(response);
|
|
|
- // }
|
|
|
+ that.addMarkers(response.data, "sxt");
|
|
|
});
|
|
|
},
|
|
|
- addMark: function (options) {
|
|
|
- //创建聚散图层并添加layers
|
|
|
- let marker = [];
|
|
|
- let resultLayer = L.markerClusterGroup({
|
|
|
- showCoverageOnHover: false,
|
|
|
- zoomToBoundsOnClick: true,
|
|
|
- animateAddingMarkers: true,
|
|
|
- spiderfyOnMaxZoom: true
|
|
|
- });
|
|
|
- options.data.forEach(e => {
|
|
|
- var lat = e.latitude;
|
|
|
- var lon = e.longitude;
|
|
|
- var buildType = e.buildType;
|
|
|
- var markpoint = e.markpoint;
|
|
|
- var myIcon = L.icon({
|
|
|
- iconUrl: getIcon(buildType),
|
|
|
- iconAnchor: [50, 50],
|
|
|
- iconSize: [37, 64],
|
|
|
- popupAnchor: [-33, -47],
|
|
|
- shadowSize: [41, 41],
|
|
|
- });
|
|
|
- marker = L.marker([lat, lon], {
|
|
|
- icon: myIcon
|
|
|
- });
|
|
|
- marker.bindPopup(markpoint);
|
|
|
- resultLayer.addLayer(marker);
|
|
|
- /**鼠标悬停打开popup**/
|
|
|
- marker.on('mouseover', function () {
|
|
|
- let html = "";
|
|
|
- html += "<p class='v-p-color'>摄像头名称:" + e.cameraName + "</p>";
|
|
|
- html += "<p class='v-p-color'>摄像头类型:" + e.buildTypeName + "</p>";
|
|
|
- html += "<p class='v-p-color'>所属派出所:" + e.policeName + "</p>";
|
|
|
- this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
- });
|
|
|
- // /**鼠标移开关闭popup**/
|
|
|
- marker.on('mouseout', function () {
|
|
|
- this.closePopup();
|
|
|
- });
|
|
|
+ //查询应急避难所落点列表
|
|
|
+ selectQkEmergencyShelterAllList() {
|
|
|
+ let that = this;
|
|
|
+ selectQkEmergencyShelterAllList().then(response => {
|
|
|
+ that.addMarkers(response.data, "yjcs");
|
|
|
})
|
|
|
-
|
|
|
- // marker = L.marker(
|
|
|
- // [options.latitude,options.longitude]
|
|
|
- // ,{
|
|
|
- // icon: L.icon({
|
|
|
- // iconUrl: getIcon(options.buildType),
|
|
|
- // iconAnchor: [50, 50],
|
|
|
- // iconSize: [37, 64],
|
|
|
- // popupAnchor: [-33, -47],
|
|
|
- // shadowSize: [41, 41],
|
|
|
- // })
|
|
|
- // }
|
|
|
- // );
|
|
|
- // /**鼠标悬停打开popup**/
|
|
|
- // marker.on('mouseover', function () {
|
|
|
- // let html = "";
|
|
|
- // html += "<p class='v-p-color'>摄像头名称:" + val.cameraName + "</p>";
|
|
|
- // html += "<p class='v-p-color'>摄像头类型:" + val.buildTypeName + "</p>";
|
|
|
- // html += "<p class='v-p-color'>所属派出所:" + val.policeName + "</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(this.map);
|
|
|
-
|
|
|
- resultLayer.addTo(this.map)
|
|
|
},
|
|
|
+ //查询抢险救援队落点列表
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // addCameraMark: function (options) {
|
|
|
+ // //创建聚散图层并添加layers
|
|
|
+ // let marker = [];
|
|
|
+ // this.resultLayer = L.markerClusterGroup({
|
|
|
+ // showCoverageOnHover: false,
|
|
|
+ // zoomToBoundsOnClick: true,
|
|
|
+ // animateAddingMarkers: true,
|
|
|
+ // spiderfyOnMaxZoom: true
|
|
|
+ // });
|
|
|
+ // options.data.forEach(e => {
|
|
|
+ // var lat = e.latitude;
|
|
|
+ // var lon = e.longitude;
|
|
|
+ // var buildType = e.buildType;
|
|
|
+ // var markpoint = e.markpoint;
|
|
|
+ // var myIcon = L.icon({
|
|
|
+ // iconUrl: getIcon(buildType),
|
|
|
+ // iconAnchor: [50, 50],
|
|
|
+ // iconSize: [37, 64],
|
|
|
+ // popupAnchor: [-33, -47],
|
|
|
+ // shadowSize: [41, 41],
|
|
|
+ // });
|
|
|
+ // marker = L.marker([lat, lon], {
|
|
|
+ // icon: myIcon
|
|
|
+ // });
|
|
|
+ // marker.bindPopup(markpoint);
|
|
|
+ // this.resultLayer.addLayer(marker);
|
|
|
+ // /**鼠标悬停打开popup**/
|
|
|
+ // marker.on('mouseover', function () {
|
|
|
+ // let html = "";
|
|
|
+ // html += "<p class='v-p-color'>摄像头名称:" + e.cameraName + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>摄像头类型:" + e.buildTypeName + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>所属派出所:" + e.policeName + "</p>";
|
|
|
+ // this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
+ // });
|
|
|
+ // // /**鼠标移开关闭popup**/
|
|
|
+ // marker.on('mouseout', function () {
|
|
|
+ // this.closePopup();
|
|
|
+ // });
|
|
|
+ // })
|
|
|
+ // this.resultLayer.addTo(this.map)
|
|
|
+ // },
|
|
|
+ //
|
|
|
+ // //查询抢险救援队落点列表
|
|
|
+ // selectQkEmergencyRescueTeamAllList() {
|
|
|
+ // selectQkEmergencyRescueTeamAllList().then(response => {
|
|
|
+ // this.addTeamMark(response);
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // addTeamMark: function (options) {
|
|
|
+ // //创建聚散图层并添加layers
|
|
|
+ // let that = this;
|
|
|
+ // let marker = [];
|
|
|
+ // that.resultLayer = L.markerClusterGroup({
|
|
|
+ // showCoverageOnHover: false,
|
|
|
+ // zoomToBoundsOnClick: true,
|
|
|
+ // animateAddingMarkers: true,
|
|
|
+ // spiderfyOnMaxZoom: true
|
|
|
+ // });
|
|
|
+ // options.data.forEach(e => {
|
|
|
+ // var lat = e.latitude;
|
|
|
+ // var lon = e.longitude;
|
|
|
+ // var myIcon = L.icon({
|
|
|
+ // iconUrl: require('@/assets/images/cameraType/yjdw.png'),
|
|
|
+ // iconAnchor: [50, 50],
|
|
|
+ // iconSize: [37, 64],
|
|
|
+ // popupAnchor: [-33, -47],
|
|
|
+ // shadowSize: [41, 41],
|
|
|
+ // });
|
|
|
+ // marker = L.marker([lat, lon], {
|
|
|
+ // icon: myIcon
|
|
|
+ // });
|
|
|
+ // that.resultLayer.addLayer(marker);
|
|
|
+ // /**鼠标悬停打开popup**/
|
|
|
+ // marker.on('click', function () {
|
|
|
+ // that.suppliesOpen = false
|
|
|
+ // that.selectQkEmergencyRescueTeamByDeptId(e.deptId)
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // })
|
|
|
+ // that.resultLayer.addTo(that.map)
|
|
|
+ // },
|
|
|
+ // selectQkEmergencyRescueTeamByDeptId(deptId) {
|
|
|
+ // selectQkEmergencyRescueTeamByDeptId(deptId).then(res => {
|
|
|
+ // this.teamData = res.data;
|
|
|
+ // this.teamOpen = true
|
|
|
+ //
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // // //查询应急避难所落点列表
|
|
|
+ // // selectQkEmergencyShelterAllList() {
|
|
|
+ // // selectQkEmergencyShelterAllList().then(response => {
|
|
|
+ // // this.addShelterMark(response)
|
|
|
+ // // })
|
|
|
+ // // },
|
|
|
+ // addShelterMark: function (options) {
|
|
|
+ // //创建聚散图层并添加layers
|
|
|
+ // let marker = [];
|
|
|
+ // this.resultLayer = L.markerClusterGroup({
|
|
|
+ // showCoverageOnHover: false,
|
|
|
+ // zoomToBoundsOnClick: true,
|
|
|
+ // animateAddingMarkers: true,
|
|
|
+ // spiderfyOnMaxZoom: true
|
|
|
+ // });
|
|
|
+ // options.data.forEach(e => {
|
|
|
+ // var lat = e.latitude;
|
|
|
+ // var lon = e.longitude;
|
|
|
+ // var markpoint = e.markpoint;
|
|
|
+ // var myIcon = L.icon({
|
|
|
+ // iconUrl: require('@/assets/images/cameraType/yjcs.png'),
|
|
|
+ // iconAnchor: [50, 50],
|
|
|
+ // iconSize: [37, 64],
|
|
|
+ // popupAnchor: [-33, -47],
|
|
|
+ // shadowSize: [41, 41],
|
|
|
+ // });
|
|
|
+ // marker = L.marker([lat, lon], {
|
|
|
+ // icon: myIcon
|
|
|
+ // });
|
|
|
+ // marker.bindPopup(markpoint);
|
|
|
+ // this.resultLayer.addLayer(marker);
|
|
|
+ // /**鼠标悬停打开popup**/
|
|
|
+ // marker.on('click', function () {
|
|
|
+ // let html = "";
|
|
|
+ // html += "<p class='v-p-color'>避难场所名称:" + e.name + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>类型:" + e.type + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>地址:" + e.address + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>避难场所范围:" + e.range + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>避难场所现状描述:" + e.state + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>占地面积(m²):" + e.area + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>可转移安置人数(万人):" + e.transferPerson + "</p>";
|
|
|
+ // html += "<p class='v-p-color'>建设内容:" + e.constructionContent + "</p>";
|
|
|
+ // this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
+ // });
|
|
|
+ // // /**鼠标移开关闭popup**/
|
|
|
+ // marker.on('dblclick', function () {
|
|
|
+ // this.closePopup();
|
|
|
+ // });
|
|
|
+ // })
|
|
|
+ // this.resultLayer.addTo(this.map)
|
|
|
+ // },
|
|
|
+ //
|
|
|
+ // //查询防汛抗旱物资储备落点列表
|
|
|
+ // selectQkRescueSuppliesAllList() {
|
|
|
+ // selectQkRescueSuppliesAllList().then(response => {
|
|
|
+ // this.addSuppliesMark(response);
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // addSuppliesMark: function (options) {
|
|
|
+ // //创建聚散图层并添加layers
|
|
|
+ // let that = this;
|
|
|
+ // let marker = [];
|
|
|
+ // that.resultLayer = L.markerClusterGroup({
|
|
|
+ // showCoverageOnHover: false,
|
|
|
+ // zoomToBoundsOnClick: true,
|
|
|
+ // animateAddingMarkers: true,
|
|
|
+ // spiderfyOnMaxZoom: true
|
|
|
+ // });
|
|
|
+ // options.data.forEach(e => {
|
|
|
+ // var lat = e.latitude;
|
|
|
+ // var lon = e.longitude;
|
|
|
+ // var myIcon = L.icon({
|
|
|
+ // iconUrl: require('@/assets/images/cameraType/khwz.png'),
|
|
|
+ // iconAnchor: [50, 50],
|
|
|
+ // iconSize: [37, 64],
|
|
|
+ // popupAnchor: [-33, -47],
|
|
|
+ // shadowSize: [41, 41],
|
|
|
+ // });
|
|
|
+ // marker = L.marker([lat, lon], {
|
|
|
+ // icon: myIcon
|
|
|
+ // });
|
|
|
+ // that.resultLayer.addLayer(marker);
|
|
|
+ // /**鼠标悬停打开popup**/
|
|
|
+ // marker.on('click', function () {
|
|
|
+ // that.teamOpen = false
|
|
|
+ // that.selectQkRescueSuppliesByDeptId(e.deptId)
|
|
|
+ // });
|
|
|
+ // })
|
|
|
+ // that.resultLayer.addTo(that.map)
|
|
|
+ // },
|
|
|
+ // selectQkRescueSuppliesByDeptId(deptId) {
|
|
|
+ // selectQkRescueSuppliesByDeptId(deptId).then(res => {
|
|
|
+ // this.suppliesData = res.data;
|
|
|
+ // this.suppliesOpen = true
|
|
|
+ // })
|
|
|
+ // },
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -386,6 +613,15 @@ export default {
|
|
|
z-index: 0;
|
|
|
}
|
|
|
|
|
|
+th {
|
|
|
+ width: 100px; /* 设置宽度 */
|
|
|
+ color: white; /* 设置字体颜色为白色 */
|
|
|
+}
|
|
|
+
|
|
|
+td {
|
|
|
+ color: white; /* 设置字体颜色为白色 */
|
|
|
+}
|
|
|
+
|
|
|
/*地图DOM*/
|
|
|
#qksupermap {
|
|
|
width: 100%;
|