|
|
@@ -31,7 +31,7 @@ export default {
|
|
|
// 标记疑点
|
|
|
currentLabelCid: null,
|
|
|
currentLabelHtml: null,
|
|
|
- tableObj: {},
|
|
|
+ tableObj: {}
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
@@ -62,7 +62,7 @@ export default {
|
|
|
deleteSinglePolygon: this.deleteSinglePolygon,
|
|
|
deleteGroupFromMap: this.deleteGroupFromMap,
|
|
|
drawGeometry: this.drawGeometry,
|
|
|
- deleteGeometry: this.deleteGeometry,
|
|
|
+ deleteGeometry: this.deleteGeometry
|
|
|
});
|
|
|
},
|
|
|
beforeDestroyed() {
|
|
|
@@ -70,7 +70,7 @@ export default {
|
|
|
this.$bus.$off("JLControl");
|
|
|
// 疑点审计
|
|
|
this.$bus.$off("caseAuditEvent");
|
|
|
- map2DViewer.map.closePopup()
|
|
|
+ map2DViewer.map.closePopup();
|
|
|
},
|
|
|
computed: {
|
|
|
// 监听底部菜单栏的状态
|
|
|
@@ -83,13 +83,12 @@ export default {
|
|
|
// 监听当前菜单
|
|
|
getCurrentMenu() {
|
|
|
return this.$store.state.navSelect;
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
getLabelCaseBtnStatus(val) {
|
|
|
// console.log(val, "标记疑点");
|
|
|
if (val.index === 1 && val.subIndex === 1) {
|
|
|
- console.log("激活标记疑点弹窗");
|
|
|
// 删除地图上所有弹窗
|
|
|
this.$store.state.attrTableShow = false;
|
|
|
this.$store.state.updateCasePopupShow = false;
|
|
|
@@ -101,10 +100,8 @@ export default {
|
|
|
map2DViewer.myLabels[i] = null;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
this.initDraw();
|
|
|
} else {
|
|
|
- console.log("移除疑点标记事件");
|
|
|
this.stopLabelCase();
|
|
|
if (this.labelPopup) {
|
|
|
map2DViewer.map.closePopup();
|
|
|
@@ -123,14 +120,15 @@ export default {
|
|
|
}
|
|
|
this.$store.state.bottomMenuIndexs.index = -1;
|
|
|
this.$store.state.bottomMenuIndexs.subIndex = -1;
|
|
|
+ this.$store.commit("changeJlActiveState",false);
|
|
|
}
|
|
|
// 切换页面时判断是否需要显示区域图
|
|
|
this.$nextTick(() => {
|
|
|
this.getJSonData();
|
|
|
});
|
|
|
- },
|
|
|
- // immediate: true,
|
|
|
- },
|
|
|
+ }
|
|
|
+ // immediate: true
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
// 开始标记疑点事件
|
|
|
@@ -141,15 +139,20 @@ export default {
|
|
|
stopLabelCase() {
|
|
|
if (map2DViewer.measureTool) {
|
|
|
map2DViewer.setDrawTool({
|
|
|
- action: "remove",
|
|
|
+ action: "remove"
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ reStartLabelCase() {
|
|
|
+ this.stopLabelCase();
|
|
|
+
|
|
|
+ this.initDraw();
|
|
|
+ },
|
|
|
// 常规图层弹窗
|
|
|
createAuditDiv(str, properties) {
|
|
|
// 根据ref获取组件的dom元素
|
|
|
this.currentHtml = this.$refs.auditRef.$el.innerHTML;
|
|
|
- this.$refs.auditRef.tableObj = properties
|
|
|
+ this.$refs.auditRef.tableObj = properties;
|
|
|
if (this.currentHtml) {
|
|
|
let div = document.createElement("div");
|
|
|
div.id = str + "_id";
|
|
|
@@ -158,32 +161,24 @@ export default {
|
|
|
div.innerHTML = this.currentHtml;
|
|
|
$(() => {
|
|
|
if (properties) {
|
|
|
- $(`#${str}_id .center-table-item-normal .leftcell`).each(
|
|
|
- (index, domEle) => {
|
|
|
- $(`#${str}_id .center-table-item-normal .leftcell`)
|
|
|
- .eq(index)
|
|
|
- .text(Object.keys(properties)[index]);
|
|
|
- }
|
|
|
- );
|
|
|
- $(`#${str}_id .center-table-item-normal .rightcell`).each(
|
|
|
- (index, domEle) => {
|
|
|
- $(`#${str}_id .center-table-item-normal .rightcell`)
|
|
|
- .eq(index)
|
|
|
- .text(Object.values(properties)[index]);
|
|
|
- }
|
|
|
- );
|
|
|
+ $(`#${str}_id .center-table-item-normal .leftcell`).each((index, domEle) => {
|
|
|
+ $(`#${str}_id .center-table-item-normal .leftcell`).eq(index).text(Object.keys(properties)[index]);
|
|
|
+ });
|
|
|
+ $(`#${str}_id .center-table-item-normal .rightcell`).each((index, domEle) => {
|
|
|
+ $(`#${str}_id .center-table-item-normal .rightcell`).eq(index).text(Object.values(properties)[index]);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
// 法律法规点击事件
|
|
|
if ($(`#${str}_id a`)) {
|
|
|
- $(`#${str}_id a`).click((e) => {
|
|
|
+ $(`#${str}_id a`).click(e => {
|
|
|
console.log(e, "显示疑点相关的弹窗");
|
|
|
this.$store.state.lawPopupShow = true;
|
|
|
});
|
|
|
}
|
|
|
// input添加点击事件
|
|
|
if ($(`#${str}_id input`)[1]) {
|
|
|
- $(`#${str}_id input`).click((e) => {
|
|
|
+ $(`#${str}_id input`).click(e => {
|
|
|
switch (e.target.defaultValue) {
|
|
|
case "修改":
|
|
|
this.modifyBtnEvent();
|
|
|
@@ -218,7 +213,7 @@ export default {
|
|
|
$(() => {
|
|
|
console.log($(`#${str}_id textarea`).val(), "textarea");
|
|
|
$(`#${str}_id`).css("height", "100%");
|
|
|
- $(`#${str}_id input`).click((e) => {
|
|
|
+ $(`#${str}_id input`).click(e => {
|
|
|
console.log(e.target.defaultValue);
|
|
|
switch (e.target.defaultValue) {
|
|
|
case "取消":
|
|
|
@@ -256,12 +251,7 @@ export default {
|
|
|
let title = $(`#${str}_id select`).val();
|
|
|
let des = $(`#${str}_id textarea`).val();
|
|
|
let coordinates = [data.points];
|
|
|
- let geometry = publicFun.generateGeoJSON(
|
|
|
- title,
|
|
|
- des,
|
|
|
- geoType,
|
|
|
- coordinates
|
|
|
- );
|
|
|
+ let geometry = publicFun.generateGeoJSON(title, des, geoType, coordinates);
|
|
|
|
|
|
let params = new FormData();
|
|
|
|
|
|
@@ -269,12 +259,10 @@ export default {
|
|
|
geojson: JSON.stringify(geometry),
|
|
|
type: geoType,
|
|
|
userId: Number(localStorage.getItem("USER_ID")),
|
|
|
- sourceId: 0,
|
|
|
+ sourceId: 0
|
|
|
};
|
|
|
- console.log(params, "params");
|
|
|
-
|
|
|
this.$Post(this.urlsCollection.addConllection, params).then(
|
|
|
- (res) => {
|
|
|
+ res => {
|
|
|
if (res.code == 200) {
|
|
|
console.log(res, "添加标记成功");
|
|
|
map2DViewer.map.closePopup();
|
|
|
@@ -283,33 +271,32 @@ export default {
|
|
|
paramData = {
|
|
|
userId: Number(localStorage.getItem("USER_ID")),
|
|
|
sourceId: 0,
|
|
|
- pageSize: 10,
|
|
|
+ pageSize: 10
|
|
|
};
|
|
|
- this.$Post(this.urlsCollection.selectByUser, paramData).then(
|
|
|
- (userRes) => {
|
|
|
- if (userRes.code === 200) {
|
|
|
- // console.log(userRes, "获取我的标记疑点数据");
|
|
|
+ this.$Post(this.urlsCollection.selectByUser, paramData).then(userRes => {
|
|
|
+ if (userRes.code === 200) {
|
|
|
+ // console.log(userRes, "获取我的标记疑点数据");
|
|
|
|
|
|
- if (userRes.content.length > 0) {
|
|
|
- this.$store.state.myLabelPointsArr = [];
|
|
|
- this.$store.state.myLabelPointsArr = userRes.content.map(
|
|
|
- (v) => {
|
|
|
- return {
|
|
|
- id: v.id,
|
|
|
- geojson: v.geojson,
|
|
|
- type: v.type,
|
|
|
- };
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
+ if (userRes.content.length > 0) {
|
|
|
+ this.$store.state.myLabelPointsArr = [];
|
|
|
+ this.$store.state.myLabelPointsArr = userRes.content.map(v => {
|
|
|
+ return {
|
|
|
+ id: v.id,
|
|
|
+ geojson: v.geojson,
|
|
|
+ type: v.type
|
|
|
+ };
|
|
|
+ });
|
|
|
}
|
|
|
- // 更新时调用一次搜索接口
|
|
|
}
|
|
|
- );
|
|
|
+ // 更新时调用一次搜索接口
|
|
|
+ });
|
|
|
}
|
|
|
+ // 保存后需要删除地图上的标记
|
|
|
+ this.reStartLabelCase();
|
|
|
},
|
|
|
- (error) => {
|
|
|
- console.log(error);
|
|
|
+ error => {
|
|
|
+ console.log("标记疑点保存失败！", error);
|
|
|
+ this.reStartLabelCase();
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
@@ -320,9 +307,7 @@ export default {
|
|
|
map2DViewer.jlMap = L.tileLayer(
|
|
|
"http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
|
|
|
).addTo(map2DViewer.map);
|
|
|
- map2DViewer.jlControl = L.control
|
|
|
- .sideBySide(map2DViewer.map, map2DViewer.jlMap)
|
|
|
- .addTo(map2DViewer.map);
|
|
|
+ map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
|
|
|
} else if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
|
|
|
map2DViewer.map.removeControl(map2DViewer.jlControl);
|
|
|
map2DViewer.map.removeLayer(map2DViewer.jlMap);
|
|
|
@@ -345,11 +330,7 @@ export default {
|
|
|
// 每次点击按钮后重绘弹窗
|
|
|
if (this.currentHtml && this.currentCid) {
|
|
|
setTimeout(() => {
|
|
|
- this.popup
|
|
|
- .setContent(
|
|
|
- this.createAuditDiv(this.currentCid, this.currentProperties)
|
|
|
- )
|
|
|
- .openOn(map2DViewer.map);
|
|
|
+ this.popup.setContent(this.createAuditDiv(this.currentCid, this.currentProperties)).openOn(map2DViewer.map);
|
|
|
}, 300);
|
|
|
}
|
|
|
},
|
|
|
@@ -357,11 +338,10 @@ export default {
|
|
|
initDraw() {
|
|
|
if (!map2DViewer.measureTool) {
|
|
|
// 引入疑点标记绘制方法
|
|
|
- map2DViewer.drawToolFire = (data) => {
|
|
|
+ map2DViewer.drawToolFire = data => {
|
|
|
// 纬经度
|
|
|
if (data && data.points.length >= 1) {
|
|
|
let geoType = null;
|
|
|
- console.log(data, "测试绘制的数据");
|
|
|
// 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
|
|
|
if (data.points.length === 1 && data.area === 0) {
|
|
|
geoType = 0;
|
|
|
@@ -397,7 +377,7 @@ export default {
|
|
|
color: "red",
|
|
|
font_size: "14px",
|
|
|
closeButton: true,
|
|
|
- iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
|
|
|
+ iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png"
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
@@ -426,7 +406,7 @@ export default {
|
|
|
attributionControl: false,
|
|
|
zoomControl: false,
|
|
|
minZoom: 10,
|
|
|
- maxZoom: 16,
|
|
|
+ maxZoom: 16
|
|
|
}).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
|
|
|
|
|
|
//添加默认图层
|
|
|
@@ -440,7 +420,7 @@ export default {
|
|
|
|
|
|
// url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
|
|
|
// tileSize: 512
|
|
|
- systemConfig.blueBlackMap,
|
|
|
+ systemConfig.blueBlackMap
|
|
|
})
|
|
|
.addTo(map2DViewer.map);
|
|
|
// layer.setStyle({opacity:0,fillOpacity:0})
|
|
|
@@ -458,16 +438,14 @@ export default {
|
|
|
map2DViewer.groups["浦东新区_polygon"].remove();
|
|
|
}
|
|
|
// 请求并渲染新的区域图层
|
|
|
- get("./static/json/simplified_pdgeojson.json", "").then((geoJson) => {
|
|
|
+ get("./static/json/simplified_pdgeojson.json", "").then(geoJson => {
|
|
|
// 存放所有的面数据
|
|
|
map2DViewer.groups["浦东新区_polygon"] = L.featureGroup();
|
|
|
map2DViewer.groups["浦东新区_label"] = L.featureGroup();
|
|
|
map2DViewer.groups["浦东新区_polygon"].addTo(map2DViewer.map);
|
|
|
map2DViewer.groups["浦东新区_label"].addTo(map2DViewer.map);
|
|
|
- geoJson.features.map((feature) => {
|
|
|
- if (
|
|
|
- this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
|
|
|
- ) {
|
|
|
+ geoJson.features.map(feature => {
|
|
|
+ if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
|
|
|
this.renderPolygon(feature);
|
|
|
}
|
|
|
});
|
|
|
@@ -512,7 +490,7 @@ export default {
|
|
|
weight: 3,
|
|
|
fillColor: this.getColor(name),
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0.4,
|
|
|
+ fillOpacity: 0.4
|
|
|
}).addTo(map2DViewer.groups["浦东新区_polygon"]);
|
|
|
|
|
|
center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
|
|
|
@@ -524,25 +502,25 @@ export default {
|
|
|
radius: 10,
|
|
|
weight: 1,
|
|
|
fillOpacity: 0,
|
|
|
- color: "#e6d273",
|
|
|
+ color: "#e6d273"
|
|
|
});
|
|
|
wmarker.bindLabel(feature.properties.NAME, {
|
|
|
noHide: true,
|
|
|
clickable: true,
|
|
|
- offset: [-25, 10],
|
|
|
+ offset: [-25, 10]
|
|
|
});
|
|
|
wmarker.addTo(map2DViewer.groups["浦东新区_label"]);
|
|
|
let circle1 = L.circleMarker(center, {
|
|
|
radius: 8,
|
|
|
weight: 1,
|
|
|
fillOpacity: 0,
|
|
|
- color: "#e6d273",
|
|
|
+ color: "#e6d273"
|
|
|
}).addTo(map2DViewer.groups["浦东新区_polygon"]);
|
|
|
let circle2 = L.circleMarker(center, {
|
|
|
radius: 5,
|
|
|
weight: 1,
|
|
|
fillOpacity: 1,
|
|
|
- color: "#e6d273",
|
|
|
+ color: "#e6d273"
|
|
|
}).addTo(map2DViewer.groups["浦东新区_polygon"]);
|
|
|
},
|
|
|
latLngsToReverse: function (latlngsAry) {
|
|
|
@@ -573,7 +551,7 @@ export default {
|
|
|
// 纬经度
|
|
|
// [22474.568725585938, -16689.47381591797]
|
|
|
// x,y转换
|
|
|
- coordinates = coordinates.map((v) => {
|
|
|
+ coordinates = coordinates.map(v => {
|
|
|
let data = transformCoord.shcj_to_wgs84(v[1], [v[0]]);
|
|
|
data = [data[1], data[0]];
|
|
|
return data;
|
|
|
@@ -583,10 +561,10 @@ export default {
|
|
|
weight: 3,
|
|
|
fillColor: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0.4,
|
|
|
+ fillOpacity: 0.4
|
|
|
}).addTo(map2DViewer.analysisGroups[uniqueId]);
|
|
|
|
|
|
- polygon.on("click", (e) => {
|
|
|
+ polygon.on("click", e => {
|
|
|
this.auditPopupShow = true;
|
|
|
this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
|
|
|
.setLatLng(e.latlng)
|
|
|
@@ -599,7 +577,7 @@ export default {
|
|
|
},
|
|
|
// 综合分析 - 图层绘制面
|
|
|
addPolygonLayer(data, cid, color) {
|
|
|
- data.map((feature) => {
|
|
|
+ data.map(feature => {
|
|
|
let polygonData = JSON.parse(JSON.stringify(feature));
|
|
|
let coordinates = polygonData.geometry.coordinates[0];
|
|
|
let infos = polygonData.properties;
|
|
|
@@ -608,18 +586,16 @@ export default {
|
|
|
weight: 3,
|
|
|
fillColor: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0.4,
|
|
|
+ fillOpacity: 0.4
|
|
|
}).addTo(map2DViewer.map);
|
|
|
map2DViewer.polygons[`${cid}_layer`].push(polygon);
|
|
|
polygon.infos = infos;
|
|
|
- polygon.on("click", (e) => {
|
|
|
+ polygon.on("click", e => {
|
|
|
// console.log(e, "polygon");
|
|
|
this.auditPopupShow = true;
|
|
|
// console.log(e.latlng, "获取当前弹窗坐标111");
|
|
|
|
|
|
- this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
|
|
|
- .setLatLng(e.latlng)
|
|
|
- .setContent(this.createAuditDiv("cid"));
|
|
|
+ this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(this.createAuditDiv("cid"));
|
|
|
// .openOn(map2DViewer.map);
|
|
|
this.auditPopupShow = false;
|
|
|
this.popup.openOn(map2DViewer.map);
|
|
|
@@ -639,7 +615,7 @@ export default {
|
|
|
//综合分析 - 标记疑点 - 删除面
|
|
|
deletePolygonLayer(layer) {
|
|
|
console.log(layer, "layer");
|
|
|
- map2DViewer.polygons[layer].forEach((polygon) => {
|
|
|
+ map2DViewer.polygons[layer].forEach(polygon => {
|
|
|
map2DViewer.map.removeLayer(polygon);
|
|
|
});
|
|
|
},
|
|
|
@@ -649,7 +625,7 @@ export default {
|
|
|
if (!map2DViewer.myLabels[`label_${data.id}`]) {
|
|
|
// console.log("开始绘制点", data);
|
|
|
let point = L.marker(data.coord, {
|
|
|
- opacity: 1,
|
|
|
+ opacity: 1
|
|
|
}).addTo(map2DViewer.map);
|
|
|
map2DViewer.myLabels[`label_${data.id}`] = point;
|
|
|
}
|
|
|
@@ -663,15 +639,13 @@ export default {
|
|
|
weight: 3,
|
|
|
fillOpacity: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0.4,
|
|
|
+ fillOpacity: 0.4
|
|
|
}).addTo(map2DViewer.map);
|
|
|
// zoom the map to the polyline
|
|
|
map2DViewer.map.fitBounds(polyline.getBounds());
|
|
|
map2DViewer.myLabels[`label_${data.id}`] = polyline;
|
|
|
} else {
|
|
|
- map2DViewer.map.fitBounds(
|
|
|
- map2DViewer.myLabels[`label_${data.id}`].getBounds()
|
|
|
- );
|
|
|
+ map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
|
|
|
}
|
|
|
},
|
|
|
drawPolygon(data, color) {
|
|
|
@@ -683,14 +657,12 @@ export default {
|
|
|
weight: 3,
|
|
|
fillOpacity: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0.4,
|
|
|
+ fillOpacity: 0.4
|
|
|
}).addTo(map2DViewer.map);
|
|
|
map2DViewer.map.fitBounds(polygon.getBounds());
|
|
|
map2DViewer.myLabels[`label_${data.id}`] = polygon;
|
|
|
} else {
|
|
|
- map2DViewer.map.fitBounds(
|
|
|
- map2DViewer.myLabels[`label_${data.id}`].getBounds()
|
|
|
- );
|
|
|
+ map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -704,24 +676,21 @@ export default {
|
|
|
let to = turf.point(coordinates[1].reverse());
|
|
|
let options = { units: "kilometers" };
|
|
|
let distance = turf.distance(from, to, options);
|
|
|
- (distance = parseFloat(distance * 1000).toFixed(6)),
|
|
|
- console.log(distance, "圆的半径");
|
|
|
+ (distance = parseFloat(distance * 1000).toFixed(6)), console.log(distance, "圆的半径");
|
|
|
let circle = L.circle(coordinates[0].reverse(), {
|
|
|
color: color,
|
|
|
weight: 3,
|
|
|
fillOpacity: color,
|
|
|
opacity: 1,
|
|
|
fillOpacity: 0.4,
|
|
|
- radius: Number(distance),
|
|
|
+ radius: Number(distance)
|
|
|
}).addTo(map2DViewer.map);
|
|
|
console.log(circle);
|
|
|
map2DViewer.map.fitBounds(circle.getBounds());
|
|
|
map2DViewer.myLabels[`label_${data.id}`] = circle;
|
|
|
}
|
|
|
} else {
|
|
|
- map2DViewer.map.fitBounds(
|
|
|
- map2DViewer.myLabels[`label_${data.id}`].getBounds()
|
|
|
- );
|
|
|
+ map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
@@ -750,8 +719,8 @@ export default {
|
|
|
console.log(geometry, "移除");
|
|
|
geometry.removeFrom(map2DViewer.map);
|
|
|
}
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
DESKTOP-6LTVLN7\Liumouren