|
@@ -1,10 +1,31 @@
|
|
|
<template>
|
|
|
- <div id="map2DViewer" :class="$ifMenu('1', '') || $ifMenu('2', '') ? 'scaleClass' : 'unScaleClass'">
|
|
|
+ <div
|
|
|
+ id="map2DViewer"
|
|
|
+ :class="
|
|
|
+ $ifMenu('1', '') || $ifMenu('2', '') ? 'scaleClass' : 'unScaleClass'
|
|
|
+ "
|
|
|
+ >
|
|
|
<!-- 特殊地图属性弹窗 -- 有审计功能 -->
|
|
|
- <CaseAuditPopup v-show="auditPopupShow" :tableObj="auditRefTableObj" :defaultStatus="defaultStatus" ref="auditRef" />
|
|
|
+ <CaseAuditPopup
|
|
|
+ v-show="auditPopupShow"
|
|
|
+ :tableObj="auditRefTableObj"
|
|
|
+ :defaultStatus="defaultStatus"
|
|
|
+ ref="auditRef"
|
|
|
+ />
|
|
|
<!-- 通用地图属性弹窗 -- 无审计功能 -->
|
|
|
- <NormalAttrPopup v-show="normalAttrPopupShow" :tableObj="tableObj" ref="normalRef" />
|
|
|
- <LabelCasePopup v-show="labelDetailsPopupShow" ref="labelRef" :targetArea="targetArea" :targetDistance="targetDistance" />
|
|
|
+ <NormalAttrPopup
|
|
|
+ v-show="normalAttrPopupShow"
|
|
|
+ :tableObj="tableObj"
|
|
|
+ ref="normalRef"
|
|
|
+ />
|
|
|
+ <LabelCasePopup
|
|
|
+ v-show="labelDetailsPopupShow"
|
|
|
+ ref="labelRef"
|
|
|
+ :targetArea="targetArea"
|
|
|
+ :targetDistance="targetDistance"
|
|
|
+ :targetLat="targetLat"
|
|
|
+ :targetLon="targetLon"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -19,7 +40,7 @@ export default {
|
|
|
components: {
|
|
|
CaseAuditPopup,
|
|
|
NormalAttrPopup,
|
|
|
- LabelCasePopup
|
|
|
+ LabelCasePopup,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -48,17 +69,19 @@ export default {
|
|
|
镇域名称: "--",
|
|
|
"面积(平方米)": "--",
|
|
|
土地类型: "--",
|
|
|
- 图斑编号: "--"
|
|
|
+ 图斑编号: "--",
|
|
|
},
|
|
|
auditRefTableObj: {
|
|
|
镇域名称: "--",
|
|
|
"面积(平方米)": "--",
|
|
|
图层构成: "--",
|
|
|
- 性质: "--"
|
|
|
+ 性质: "--",
|
|
|
},
|
|
|
targetArea: 0,
|
|
|
targetDistance: 0,
|
|
|
- defaultStatus: "未标记"
|
|
|
+ targetLat: 0,
|
|
|
+ targetLon: 0,
|
|
|
+ defaultStatus: "未标记",
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
@@ -91,7 +114,7 @@ export default {
|
|
|
deleteGroupFromMap: this.deleteGroupFromMap,
|
|
|
drawGeometry: this.drawGeometry,
|
|
|
deleteGeometry: this.deleteGeometry,
|
|
|
- addTiledMapLayer: this.addTiledMapLayer
|
|
|
+ addTiledMapLayer: this.addTiledMapLayer,
|
|
|
});
|
|
|
},
|
|
|
beforeDestroyed() {
|
|
@@ -112,7 +135,7 @@ export default {
|
|
|
// 监听当前菜单
|
|
|
getCurrentMenu() {
|
|
|
return this.$store.state.navSelect;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
getLabelCaseBtnStatus(val) {
|
|
@@ -153,9 +176,9 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
this.getJSonData();
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
// immediate: true
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 测试宝石蓝底图
|
|
@@ -166,7 +189,7 @@ export default {
|
|
|
minZoom: 0,
|
|
|
minNativeZoom: 3,
|
|
|
maxNativeZoom: 7,
|
|
|
- maxZoom: 14
|
|
|
+ maxZoom: 14,
|
|
|
});
|
|
|
return layer;
|
|
|
},
|
|
@@ -178,7 +201,7 @@ export default {
|
|
|
minZoom: 0,
|
|
|
minNativeZoom: 0,
|
|
|
maxNativeZoom: 7,
|
|
|
- maxZoom: 14
|
|
|
+ maxZoom: 14,
|
|
|
});
|
|
|
return layer;
|
|
|
},
|
|
@@ -188,7 +211,7 @@ export default {
|
|
|
// opacity: 0.8,
|
|
|
f: "json",
|
|
|
format: "png8",
|
|
|
- transparent: true
|
|
|
+ transparent: true,
|
|
|
// tileSize: 512,
|
|
|
// url: url,
|
|
|
// minZoom: 0,
|
|
@@ -206,7 +229,7 @@ export default {
|
|
|
stopLabelCase() {
|
|
|
if (map2DViewer.measureTool) {
|
|
|
map2DViewer.setDrawTool({
|
|
|
- action: "remove"
|
|
|
+ action: "remove",
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -237,13 +260,13 @@ export default {
|
|
|
if ($(`#${str}_id a`)) {
|
|
|
$(`#${str}_id a`)
|
|
|
.eq(0)
|
|
|
- .click(e => {
|
|
|
+ .click((e) => {
|
|
|
this.$store.state.lawPopupShow = true;
|
|
|
this.$store.state.lawSourceType = sourceType;
|
|
|
});
|
|
|
$(`#${str}_id a`)
|
|
|
.eq(1)
|
|
|
- .click(e => {
|
|
|
+ .click((e) => {
|
|
|
// 触发综合分析右侧面板点击事件
|
|
|
this.$bus.$emit("viewDetailsPopup", geojsonData);
|
|
|
});
|
|
@@ -256,7 +279,7 @@ export default {
|
|
|
$(`#${str}_id a`).eq(0).remove();
|
|
|
$(`#${str}_id a`)
|
|
|
.eq(0)
|
|
|
- .click(e => {
|
|
|
+ .click((e) => {
|
|
|
// 触发综合分析右侧面板点击事件
|
|
|
this.$bus.$emit("viewDetailsPopup", geojsonData);
|
|
|
});
|
|
@@ -304,11 +327,17 @@ export default {
|
|
|
// 下拉框内容
|
|
|
if ($(`#${str}_id .center-table-item-special select`)) {
|
|
|
if (this.caseStatusMap.has(str)) {
|
|
|
- $(`#${str}_id .center-table-item-special select`).val(this.caseStatusMap.get(str));
|
|
|
+ $(`#${str}_id .center-table-item-special select`).val(
|
|
|
+ this.caseStatusMap.get(str)
|
|
|
+ );
|
|
|
let inputStatus = "";
|
|
|
if (this.caseStatusMap.has(str)) {
|
|
|
- this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("疑点");
|
|
|
- !this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("非疑点");
|
|
|
+ this.caseStatusMap.get(str) === "isTrue" &&
|
|
|
+ $(`#${str}_id .center-table-item-special input`).val("疑点");
|
|
|
+ !this.caseStatusMap.get(str) === "isTrue" &&
|
|
|
+ $(`#${str}_id .center-table-item-special input`).val(
|
|
|
+ "非疑点"
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -317,13 +346,13 @@ export default {
|
|
|
if ($(`#${str}_id a`)) {
|
|
|
$(`#${str}_id a`)
|
|
|
.eq(0)
|
|
|
- .click(e => {
|
|
|
+ .click((e) => {
|
|
|
this.$store.state.lawPopupShow = true;
|
|
|
this.$store.state.lawSourceType = sourceType;
|
|
|
});
|
|
|
$(`#${str}_id a`)
|
|
|
.eq(1)
|
|
|
- .click(e => {
|
|
|
+ .click((e) => {
|
|
|
// 触发综合分析右侧面板点击事件
|
|
|
|
|
|
this.$bus.$emit("viewDetailsPopup", geojsonData);
|
|
@@ -331,7 +360,7 @@ export default {
|
|
|
}
|
|
|
// input添加点击事件
|
|
|
if ($(`#${str}_id input`)[1]) {
|
|
|
- $(`#${str}_id input`).click(e => {
|
|
|
+ $(`#${str}_id input`).click((e) => {
|
|
|
switch (e.target.defaultValue) {
|
|
|
case "取消":
|
|
|
this.cancelBtnEvent();
|
|
@@ -365,7 +394,7 @@ export default {
|
|
|
div.innerHTML = this.currentLabelHtml;
|
|
|
$(() => {
|
|
|
$(`#${str}_id`).css("height", "100%");
|
|
|
- $(`#${str}_id input`).click(e => {
|
|
|
+ $(`#${str}_id input`).click((e) => {
|
|
|
switch (e.target.defaultValue) {
|
|
|
case "取消":
|
|
|
this.cancelBtnEvent();
|
|
@@ -386,12 +415,12 @@ export default {
|
|
|
if (selectVal === "isTrue") {
|
|
|
map2DViewer.polygons[str].setStyle({
|
|
|
color: `rgb(${caseColorChange["isPointColor"][0]},${caseColorChange["isPointColor"][1]},${caseColorChange["isPointColor"][2]})`,
|
|
|
- weight: 4
|
|
|
+ weight: 4,
|
|
|
});
|
|
|
} else {
|
|
|
map2DViewer.polygons[str].setStyle({
|
|
|
color: `rgb(${caseColorChange["notPointColor"][0]},${caseColorChange["notPointColor"][1]},${caseColorChange["notPointColor"][2]})`,
|
|
|
- weight: 4
|
|
|
+ weight: 4,
|
|
|
});
|
|
|
}
|
|
|
// 修改疑点时必须要写id
|
|
@@ -402,32 +431,42 @@ export default {
|
|
|
// 修改人员名称
|
|
|
c_editor_name: localStorage.getItem("USER_NAME"),
|
|
|
// 修改人员ID
|
|
|
- c_editorid: localStorage.getItem("USER_ID")
|
|
|
+ c_editorid: localStorage.getItem("USER_ID"),
|
|
|
};
|
|
|
|
|
|
let modifyParams = new FormData();
|
|
|
modifyParams = {
|
|
|
columnId: columnId,
|
|
|
modelId: modelId,
|
|
|
- content: JSON.stringify(obj)
|
|
|
+ content: JSON.stringify(obj),
|
|
|
};
|
|
|
- this.$Post(this.urlsCollection.updateContent, modifyParams).then(res => {
|
|
|
- if (res.code === 200) {
|
|
|
- this.$message.success("数据修改成功");
|
|
|
- map2DViewer.map.closePopup();
|
|
|
+ this.$Post(this.urlsCollection.updateContent, modifyParams).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success("数据修改成功");
|
|
|
+ map2DViewer.map.closePopup();
|
|
|
|
|
|
- switch (selectVal) {
|
|
|
- case "isTrue":
|
|
|
- this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "疑点");
|
|
|
- this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("疑点");
|
|
|
- break;
|
|
|
- case "isFalse":
|
|
|
- this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "非疑点");
|
|
|
- this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("非疑点");
|
|
|
- break;
|
|
|
+ switch (selectVal) {
|
|
|
+ case "isTrue":
|
|
|
+ this.$store.state.mapMethodsCollection
|
|
|
+ .get("METHODS")
|
|
|
+ .changeCaseBoolean(str, "疑点");
|
|
|
+ this.$store.state.mapMethodsCollection
|
|
|
+ .get("METHODS")
|
|
|
+ .changeSortMethod("疑点");
|
|
|
+ break;
|
|
|
+ case "isFalse":
|
|
|
+ this.$store.state.mapMethodsCollection
|
|
|
+ .get("METHODS")
|
|
|
+ .changeCaseBoolean(str, "非疑点");
|
|
|
+ this.$store.state.mapMethodsCollection
|
|
|
+ .get("METHODS")
|
|
|
+ .changeSortMethod("非疑点");
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- });
|
|
|
+ );
|
|
|
},
|
|
|
cancelBtnEvent() {
|
|
|
map2DViewer.map.closePopup();
|
|
@@ -462,7 +501,7 @@ export default {
|
|
|
coordinates: coordinates,
|
|
|
geoName: geoName,
|
|
|
area: area,
|
|
|
- distance: distance
|
|
|
+ distance: distance,
|
|
|
};
|
|
|
let geometry = publicFun.generateGeoJSON(options);
|
|
|
let params = new FormData();
|
|
@@ -472,11 +511,11 @@ export default {
|
|
|
geojson: newGeojson,
|
|
|
type: geoType,
|
|
|
userId: Number(localStorage.getItem("USER_ID")),
|
|
|
- sourceId: 0
|
|
|
+ sourceId: 0,
|
|
|
};
|
|
|
|
|
|
this.$Post(this.urlsCollection.addConllection, params).then(
|
|
|
- res => {
|
|
|
+ (res) => {
|
|
|
if (res.code == 200) {
|
|
|
// 标记成功后删除保存的原有名称
|
|
|
myLabelNameMap.delete(geoName);
|
|
@@ -486,33 +525,36 @@ export default {
|
|
|
paramData = {
|
|
|
userId: Number(localStorage.getItem("USER_ID")),
|
|
|
sourceId: 0,
|
|
|
- pageSize: 10
|
|
|
+ pageSize: 10,
|
|
|
};
|
|
|
// 暂存map中刚刚保存的数据
|
|
|
- this.$Post(this.urlsCollection.selectByUser, paramData).then(userRes => {
|
|
|
- if (userRes.code === 200) {
|
|
|
- if (userRes.content.length > 0) {
|
|
|
- this.$store.state.myLabelPointsArr = [];
|
|
|
- this.$store.state.myLabelPointsArr = userRes.content.map(v => {
|
|
|
- if (JSON.stringify(geometry) === v.geojson) {
|
|
|
- sessionStorage.setItem("myLabelPointsId", v.id);
|
|
|
- }
|
|
|
- return {
|
|
|
- id: v.id,
|
|
|
- geojson: v.geojson,
|
|
|
- type: v.type
|
|
|
- };
|
|
|
- });
|
|
|
- // 判断刚刚暂存的数据,并调用小眼睛的方法
|
|
|
+ this.$Post(this.urlsCollection.selectByUser, paramData).then(
|
|
|
+ (userRes) => {
|
|
|
+ if (userRes.code === 200) {
|
|
|
+ if (userRes.content.length > 0) {
|
|
|
+ this.$store.state.myLabelPointsArr = [];
|
|
|
+ this.$store.state.myLabelPointsArr =
|
|
|
+ userRes.content.map((v) => {
|
|
|
+ if (JSON.stringify(geometry) === v.geojson) {
|
|
|
+ sessionStorage.setItem("myLabelPointsId", v.id);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: v.id,
|
|
|
+ geojson: v.geojson,
|
|
|
+ type: v.type,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ // 判断刚刚暂存的数据,并调用小眼睛的方法
|
|
|
+ }
|
|
|
}
|
|
|
+ // 更新时调用一次搜索接口
|
|
|
}
|
|
|
- // 更新时调用一次搜索接口
|
|
|
- });
|
|
|
+ );
|
|
|
}
|
|
|
// 保存后需要删除地图上的标记
|
|
|
this.reStartLabelCase();
|
|
|
},
|
|
|
- error => {
|
|
|
+ (error) => {
|
|
|
console.log("标记疑点保存失败!", error);
|
|
|
this.reStartLabelCase();
|
|
|
}
|
|
@@ -528,12 +570,18 @@ export default {
|
|
|
// "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
|
|
|
// ).addTo(map2DViewer.map);
|
|
|
if (this.$store.state.JLControlRightMapUrl) {
|
|
|
- map2DViewer.jlMap = this.addTiledMapLayer(this.$store.state.JLControlRightMapUrl).addTo(map2DViewer.map);
|
|
|
+ map2DViewer.jlMap = this.addTiledMapLayer(
|
|
|
+ this.$store.state.JLControlRightMapUrl
|
|
|
+ ).addTo(map2DViewer.map);
|
|
|
} else {
|
|
|
- map2DViewer.jlMap = this.addTiledMapLayer(systemConfig.imageryLayerSat2022s2.url).addTo(map2DViewer.map);
|
|
|
+ map2DViewer.jlMap = this.addTiledMapLayer(
|
|
|
+ systemConfig.imageryLayerSat2022s2.url
|
|
|
+ ).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);
|
|
@@ -571,7 +619,7 @@ export default {
|
|
|
initDraw() {
|
|
|
if (!map2DViewer.measureTool) {
|
|
|
// 引入疑点标记绘制方法
|
|
|
- map2DViewer.drawToolFire = data => {
|
|
|
+ map2DViewer.drawToolFire = (data) => {
|
|
|
// 纬经度
|
|
|
if (data && data.points.length >= 1) {
|
|
|
let geoType = null;
|
|
@@ -592,16 +640,26 @@ export default {
|
|
|
}
|
|
|
|
|
|
let coord = data.points[data.points.length - 1];
|
|
|
-
|
|
|
if (coord && coord.length >= 2) {
|
|
|
let newCoord = { lat: coord[0], lng: coord[1] };
|
|
|
this.targetArea = data.area;
|
|
|
this.targetDistance = data.distance;
|
|
|
+ this.targetLat = coord[0];
|
|
|
+ this.targetLon = coord[1];
|
|
|
this.$refs.labelRef.$nextTick(() => {
|
|
|
this.labelDetailsPopupShow = true;
|
|
|
this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
|
|
|
.setLatLng(newCoord)
|
|
|
- .setContent(this.createLabelDiv("label", coord, data, geoType, data.area, data.distance))
|
|
|
+ .setContent(
|
|
|
+ this.createLabelDiv(
|
|
|
+ "label",
|
|
|
+ coord,
|
|
|
+ data,
|
|
|
+ geoType,
|
|
|
+ data.area,
|
|
|
+ data.distance
|
|
|
+ )
|
|
|
+ )
|
|
|
.openOn(map2DViewer.map);
|
|
|
this.labelDetailsPopupShow = false;
|
|
|
});
|
|
@@ -616,7 +674,7 @@ export default {
|
|
|
font_size: "14px",
|
|
|
closeButton: true,
|
|
|
iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
|
|
|
- map: map2DViewer.map
|
|
|
+ map: map2DViewer.map,
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -629,7 +687,7 @@ export default {
|
|
|
{
|
|
|
resolutions: systemConfig.imageryLayer.resolutions,
|
|
|
origin: [-66000, 75000],
|
|
|
- bounds: L.bounds([-65000, -76000], [75000, 72000])
|
|
|
+ bounds: L.bounds([-65000, -76000], [75000, 72000]),
|
|
|
}
|
|
|
);
|
|
|
|
|
@@ -639,13 +697,15 @@ export default {
|
|
|
minZoom: systemConfig.imageryLayer.minZoom,
|
|
|
maxZoom: systemConfig.imageryLayer.maxZoom,
|
|
|
attributionControl: false,
|
|
|
- zoomControl: false
|
|
|
+ zoomControl: false,
|
|
|
// preferCanvas: true,
|
|
|
}).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
|
|
|
|
|
|
//添加默认图层
|
|
|
let guid = publicFun.buildGuid("baseLayer");
|
|
|
- let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(map2DViewer.map);
|
|
|
+ let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(
|
|
|
+ map2DViewer.map
|
|
|
+ );
|
|
|
// let layer = this.addDynamicLayer(systemConfig.blueBlackMap.url).addTo(
|
|
|
// map2DViewer.map
|
|
|
// );
|
|
@@ -657,26 +717,41 @@ export default {
|
|
|
// let imageryLayer = this.addDynamicLayer(systemConfig.imageryLayer.url);
|
|
|
// map2DViewer.layers["imagery"] = imageryLayer;
|
|
|
|
|
|
- map2DViewer.map.on("click", e => {
|
|
|
- if (!this.polygonOnClick && this.$store.state.map2DViewerPolygonsCid.newCid) {
|
|
|
- if (map2DViewer.myLabels[`label_${this.$store.state.map2DViewerPolygonsCid.newCid}`]) {
|
|
|
- map2DViewer.myLabels[`label_${this.$store.state.map2DViewerPolygonsCid.newCid}`].setStyle({
|
|
|
+ map2DViewer.map.on("click", (e) => {
|
|
|
+ if (
|
|
|
+ !this.polygonOnClick &&
|
|
|
+ this.$store.state.map2DViewerPolygonsCid.newCid
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ map2DViewer.myLabels[
|
|
|
+ `label_${this.$store.state.map2DViewerPolygonsCid.newCid}`
|
|
|
+ ]
|
|
|
+ ) {
|
|
|
+ map2DViewer.myLabels[
|
|
|
+ `label_${this.$store.state.map2DViewerPolygonsCid.newCid}`
|
|
|
+ ].setStyle({
|
|
|
color: this.$store.state.map2DViewerPolygonsCid.oldColor,
|
|
|
- fillOpacity: 0
|
|
|
+ fillOpacity: 0,
|
|
|
});
|
|
|
this.$store.state.map2DViewerPolygonsCid = {
|
|
|
newCid: null,
|
|
|
- oldColor: null
|
|
|
+ oldColor: null,
|
|
|
};
|
|
|
}
|
|
|
- if (map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid]) {
|
|
|
- map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid].setStyle({
|
|
|
+ if (
|
|
|
+ map2DViewer.polygons[
|
|
|
+ this.$store.state.map2DViewerPolygonsCid.newCid
|
|
|
+ ]
|
|
|
+ ) {
|
|
|
+ map2DViewer.polygons[
|
|
|
+ this.$store.state.map2DViewerPolygonsCid.newCid
|
|
|
+ ].setStyle({
|
|
|
color: this.$store.state.map2DViewerPolygonsCid.oldColor,
|
|
|
- fillOpacity: 0
|
|
|
+ fillOpacity: 0,
|
|
|
});
|
|
|
this.$store.state.map2DViewerPolygonsCid = {
|
|
|
newCid: null,
|
|
|
- oldColor: null
|
|
|
+ oldColor: null,
|
|
|
};
|
|
|
}
|
|
|
}
|
|
@@ -690,14 +765,16 @@ 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 => {
|
|
|
- let correctCordArr = JSON.parse(JSON.stringify(feature.geometry.coordinates));
|
|
|
+ geoJson.features.map((feature) => {
|
|
|
+ let correctCordArr = JSON.parse(
|
|
|
+ JSON.stringify(feature.geometry.coordinates)
|
|
|
+ );
|
|
|
let newCorrectCoordArr = publicFun.latLngsCorrection(correctCordArr);
|
|
|
feature.geometry.coordinates = newCorrectCoordArr;
|
|
|
// if (
|
|
@@ -740,7 +817,10 @@ export default {
|
|
|
this.getJSonDataToStreet("", "");
|
|
|
// 切换到首页时需定位到当前图层
|
|
|
if (this.$store.state.homeSpecialTown === "全部") {
|
|
|
- this.setView(townLocationMap.get(this.$store.state.homeSpecialTown), 1);
|
|
|
+ this.setView(
|
|
|
+ townLocationMap.get(this.$store.state.homeSpecialTown),
|
|
|
+ 1
|
|
|
+ );
|
|
|
// console.log("切换到首页");
|
|
|
} else {
|
|
|
let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
|
|
@@ -750,18 +830,29 @@ export default {
|
|
|
this.getJSonDataToStreet("", "");
|
|
|
// 切换到镇域专题是时均往左偏移一些
|
|
|
if (this.$store.state.homeSpecialTown === "全部") {
|
|
|
- let locationArr = townLocationMap.get(this.$store.state.homeSpecialTown);
|
|
|
+ let locationArr = townLocationMap.get(
|
|
|
+ this.$store.state.homeSpecialTown
|
|
|
+ );
|
|
|
this.setView([locationArr[0], locationArr[1] + 0.35], 1);
|
|
|
console.log("执行此步");
|
|
|
} else {
|
|
|
- let locationArr = townLocationMap.get(this.$store.state.homeSpecialTown);
|
|
|
+ let locationArr = townLocationMap.get(
|
|
|
+ this.$store.state.homeSpecialTown
|
|
|
+ );
|
|
|
this.setView([locationArr[0], locationArr[1]], 5);
|
|
|
// let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
|
|
|
// map2DViewer.map.fitBounds(polygon.getBounds());
|
|
|
}
|
|
|
- } else if (this.$ifMenu("2", "1") || this.$ifMenu("2", "2") || this.$ifMenu("2", "3") || this.$ifMenu("2", "4")) {
|
|
|
+ } else if (
|
|
|
+ this.$ifMenu("2", "1") ||
|
|
|
+ this.$ifMenu("2", "2") ||
|
|
|
+ this.$ifMenu("2", "3") ||
|
|
|
+ this.$ifMenu("2", "4")
|
|
|
+ ) {
|
|
|
this.getJSonDataToStreet("", "");
|
|
|
- let locationArr1 = townLocationMap.get(this.$store.state.homeSpecialTown);
|
|
|
+ let locationArr1 = townLocationMap.get(
|
|
|
+ this.$store.state.homeSpecialTown
|
|
|
+ );
|
|
|
// 切换到疑点筛查时均往右偏移一些
|
|
|
if (this.$store.state.homeSpecialTown === "全部") {
|
|
|
this.setView([locationArr1[0], locationArr1[1] - 0.16], 1);
|
|
@@ -809,7 +900,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;
|
|
@@ -822,27 +913,27 @@ export default {
|
|
|
radius: 10,
|
|
|
weight: 1,
|
|
|
fillOpacity: 0,
|
|
|
- color: "#e6d273"
|
|
|
+ color: "#e6d273",
|
|
|
});
|
|
|
|
|
|
wmarker.bindLabel(feature.properties.NAME, {
|
|
|
noHide: true,
|
|
|
clickable: true,
|
|
|
offset: [-25, 20],
|
|
|
- className: "marker-text-style"
|
|
|
+ className: "marker-text-style",
|
|
|
});
|
|
|
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"]);
|
|
|
}
|
|
|
},
|
|
@@ -881,20 +972,32 @@ export default {
|
|
|
* @modelId -- modelId
|
|
|
* @columnId -- columnId
|
|
|
*/
|
|
|
- addSinglePolygon(geometry, cid, color, uniqueId, mainType, sourceType, defaultStatus, modelId, columnId) {
|
|
|
+ addSinglePolygon(
|
|
|
+ geometry,
|
|
|
+ cid,
|
|
|
+ color,
|
|
|
+ uniqueId,
|
|
|
+ mainType,
|
|
|
+ sourceType,
|
|
|
+ defaultStatus,
|
|
|
+ modelId,
|
|
|
+ columnId
|
|
|
+ ) {
|
|
|
let uniqueIdList = [];
|
|
|
if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
|
|
|
- uniqueIdList = this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
|
|
|
+ uniqueIdList =
|
|
|
+ this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
|
|
|
}
|
|
|
|
|
|
let singlePolygonItem = {
|
|
|
uniqueId: uniqueId,
|
|
|
geometry: geometry,
|
|
|
cid: cid,
|
|
|
- color: color
|
|
|
+ color: color,
|
|
|
};
|
|
|
uniqueIdList.push(singlePolygonItem);
|
|
|
- this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] = uniqueIdList;
|
|
|
+ this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] =
|
|
|
+ uniqueIdList;
|
|
|
// 当前数据坐标系为WGS84
|
|
|
let targetGeometry = JSON.parse(geometry).geometry;
|
|
|
// 预设模型与所有图层层级不同
|
|
@@ -905,10 +1008,10 @@ export default {
|
|
|
weight: 3,
|
|
|
fillColor: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0
|
|
|
+ fillOpacity: 0,
|
|
|
}).addTo(map2DViewer.analysisGroups[uniqueId]);
|
|
|
|
|
|
- polygon.on("click", e => {
|
|
|
+ polygon.on("click", (e) => {
|
|
|
this.polygonOnClick = true;
|
|
|
// 鼠标点击图版高亮提示逻辑
|
|
|
// 首先恢复上一个图版
|
|
@@ -916,9 +1019,11 @@ export default {
|
|
|
this.$store.state.map2DViewerPolygonsCid.newCid &&
|
|
|
map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid]
|
|
|
) {
|
|
|
- map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid].setStyle({
|
|
|
+ map2DViewer.polygons[
|
|
|
+ this.$store.state.map2DViewerPolygonsCid.newCid
|
|
|
+ ].setStyle({
|
|
|
color: this.$store.state.map2DViewerPolygonsCid.oldColor,
|
|
|
- fillOpacity: 0
|
|
|
+ fillOpacity: 0,
|
|
|
});
|
|
|
}
|
|
|
// 判断是否是重复点击,不是的话高亮,是的话不操作。
|
|
@@ -927,17 +1032,17 @@ export default {
|
|
|
if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
|
|
|
this.$store.state.map2DViewerPolygonsCid = {
|
|
|
newCid: cid,
|
|
|
- oldColor: color
|
|
|
+ oldColor: color,
|
|
|
};
|
|
|
polygon.setStyle({
|
|
|
color: "red",
|
|
|
fillColor: "red",
|
|
|
- fillOpacity: 0.35
|
|
|
+ fillOpacity: 0.35,
|
|
|
});
|
|
|
} else {
|
|
|
this.$store.state.map2DViewerPolygonsCid = {
|
|
|
newCid: null,
|
|
|
- oldColor: null
|
|
|
+ oldColor: null,
|
|
|
};
|
|
|
}
|
|
|
}, 200);
|
|
@@ -951,7 +1056,7 @@ export default {
|
|
|
镇域名称: geoProperties["镇域名称"] || "--",
|
|
|
"面积(平方米)": geoProperties["面积"] || "--",
|
|
|
图层构成: geoProperties["图层构成"] || "--",
|
|
|
- 性质: geoProperties["性质"] || "--"
|
|
|
+ 性质: geoProperties["性质"] || "--",
|
|
|
};
|
|
|
this.defaultStatus = defaultStatus;
|
|
|
|
|
@@ -961,9 +1066,17 @@ export default {
|
|
|
this.currentSourceType = sourceType;
|
|
|
this.currentModelId = modelId;
|
|
|
this.currentColumnId = columnId;
|
|
|
- let domItem = this.createAuditDiv(cid, geojsonData, sourceType, modelId, columnId);
|
|
|
+ let domItem = this.createAuditDiv(
|
|
|
+ cid,
|
|
|
+ geojsonData,
|
|
|
+ sourceType,
|
|
|
+ modelId,
|
|
|
+ columnId
|
|
|
+ );
|
|
|
this.auditPopupShow = true;
|
|
|
- this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
|
|
|
+ this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
|
|
|
+ .setLatLng(e.latlng)
|
|
|
+ .setContent(domItem);
|
|
|
this.auditPopupShow = false;
|
|
|
this.popup.openOn(map2DViewer.map);
|
|
|
});
|
|
@@ -973,13 +1086,15 @@ export default {
|
|
|
镇域名称: geoProperties["镇域名称"] || "--",
|
|
|
"面积(平方米)": geoProperties["面积"] || "--",
|
|
|
土地类型: geoProperties["土地类型"] || "--",
|
|
|
- 图斑编号: geoProperties["图斑编号"] || "--"
|
|
|
+ 图斑编号: geoProperties["图斑编号"] || "--",
|
|
|
};
|
|
|
|
|
|
this.$refs.normalRef.$nextTick(() => {
|
|
|
let domItem = this.createNormalDiv(cid, geojsonData, sourceType);
|
|
|
this.normalAttrPopupShow = true;
|
|
|
- this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
|
|
|
+ this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
|
|
|
+ .setLatLng(e.latlng)
|
|
|
+ .setContent(domItem);
|
|
|
this.normalAttrPopupShow = false;
|
|
|
this.normalPopup.openOn(map2DViewer.map);
|
|
|
});
|
|
@@ -1000,7 +1115,7 @@ export default {
|
|
|
},
|
|
|
//综合分析 - 标记疑点 - 删除面
|
|
|
deletePolygonLayer(layer) {
|
|
|
- map2DViewer.polygons[layer].forEach(polygon => {
|
|
|
+ map2DViewer.polygons[layer].forEach((polygon) => {
|
|
|
map2DViewer.map.removeLayer(polygon);
|
|
|
});
|
|
|
},
|
|
@@ -1008,7 +1123,7 @@ export default {
|
|
|
drawPoints(data) {
|
|
|
if (!map2DViewer.myLabels[`label_${data.id}`]) {
|
|
|
let point = L.marker(data.coord, {
|
|
|
- opacity: 1
|
|
|
+ opacity: 1,
|
|
|
}).addTo(map2DViewer.groups["我的标记图层组"]);
|
|
|
|
|
|
map2DViewer.myLabels[`label_${data.id}`] = point;
|
|
@@ -1022,9 +1137,9 @@ export default {
|
|
|
weight: 3,
|
|
|
fillOpacity: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0
|
|
|
+ fillOpacity: 0,
|
|
|
}).addTo(map2DViewer.groups["我的标记图层组"]);
|
|
|
- polyline.on("click", e => {
|
|
|
+ polyline.on("click", (e) => {
|
|
|
this.pointOnClick(polyline, data.id, color);
|
|
|
});
|
|
|
// zoom the map to the polyline
|
|
@@ -1035,10 +1150,13 @@ export default {
|
|
|
this.polygonOnClick = true;
|
|
|
// 鼠标点击图版高亮提示逻辑
|
|
|
// 首先恢复上一个图版
|
|
|
- if (this.$store.state.map2DViewerPolygonsCid.newCid && map2DViewer.myLabels[`label_${cid}`]) {
|
|
|
+ if (
|
|
|
+ this.$store.state.map2DViewerPolygonsCid.newCid &&
|
|
|
+ map2DViewer.myLabels[`label_${cid}`]
|
|
|
+ ) {
|
|
|
map2DViewer.myLabels[`label_${cid}`].setStyle({
|
|
|
color: this.$store.state.map2DViewerPolygonsCid.oldColor,
|
|
|
- fillOpacity: 0
|
|
|
+ fillOpacity: 0,
|
|
|
});
|
|
|
}
|
|
|
// 判断是否是重复点击,不是的话高亮,是的话不操作。
|
|
@@ -1047,17 +1165,17 @@ export default {
|
|
|
if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
|
|
|
this.$store.state.map2DViewerPolygonsCid = {
|
|
|
newCid: cid,
|
|
|
- oldColor: color
|
|
|
+ oldColor: color,
|
|
|
};
|
|
|
polygon.setStyle({
|
|
|
color: "red",
|
|
|
fillColor: "red",
|
|
|
- fillOpacity: 0.35
|
|
|
+ fillOpacity: 0.35,
|
|
|
});
|
|
|
} else {
|
|
|
this.$store.state.map2DViewerPolygonsCid = {
|
|
|
newCid: null,
|
|
|
- oldColor: null
|
|
|
+ oldColor: null,
|
|
|
};
|
|
|
}
|
|
|
}, 200);
|
|
@@ -1070,9 +1188,9 @@ export default {
|
|
|
weight: 3,
|
|
|
fillOpacity: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0
|
|
|
+ fillOpacity: 0,
|
|
|
}).addTo(map2DViewer.groups["我的标记图层组"]);
|
|
|
- polygon.on("click", e => {
|
|
|
+ polygon.on("click", (e) => {
|
|
|
this.pointOnClick(polygon, data.id, color);
|
|
|
});
|
|
|
map2DViewer.myLabels[`label_${data.id}`] = polygon;
|
|
@@ -1094,9 +1212,9 @@ export default {
|
|
|
fillOpacity: color,
|
|
|
opacity: 1,
|
|
|
fillOpacity: 0,
|
|
|
- radius: Number(distance)
|
|
|
+ radius: Number(distance),
|
|
|
}).addTo(map2DViewer.groups["我的标记图层组"]);
|
|
|
- circle.on("click", e => {
|
|
|
+ circle.on("click", (e) => {
|
|
|
this.pointOnClick(circle, data.id, color);
|
|
|
});
|
|
|
map2DViewer.myLabels[`label_${data.id}`] = circle;
|
|
@@ -1128,8 +1246,8 @@ export default {
|
|
|
if (geometry) {
|
|
|
geometry.removeFrom(map2DViewer.map);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|