|
@@ -28,7 +28,7 @@ export default {
|
|
|
currentHtml: null,
|
|
|
// 标记疑点
|
|
|
currentLabelCid: null,
|
|
|
- currentLabelHtml: null
|
|
|
+ currentLabelHtml: null,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -51,8 +51,10 @@ export default {
|
|
|
addPolygonLayer: this.addPolygonLayer,
|
|
|
setView: this.setView,
|
|
|
deletePolygonLayer: this.deletePolygonLayer,
|
|
|
+ addSinglePolygon: this.addSinglePolygon,
|
|
|
+ deleteSinglePolygon: this.deleteSinglePolygon,
|
|
|
drawGeometry: this.drawGeometry,
|
|
|
- deleteGeometry: this.deleteGeometry
|
|
|
+ deleteGeometry: this.deleteGeometry,
|
|
|
});
|
|
|
},
|
|
|
beforeDestroyed() {
|
|
@@ -72,7 +74,7 @@ export default {
|
|
|
// 监听当前菜单
|
|
|
getCurrentMenu() {
|
|
|
return this.$store.state.navSelect;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
getLabelCaseBtnStatus(val) {
|
|
@@ -87,7 +89,7 @@ export default {
|
|
|
for (let i in map2DViewer.myLabels) {
|
|
|
console.log(i, "图层名");
|
|
|
this.deleteGeometry(map2DViewer.myLabels[i]);
|
|
|
- map2DViewer.myLabels[i] = null
|
|
|
+ map2DViewer.myLabels[i] = null;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -117,9 +119,9 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
this.getJSonData();
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
// immediate: true,
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 开始标记疑点事件
|
|
@@ -130,7 +132,7 @@ export default {
|
|
|
stopLabelCase() {
|
|
|
if (map2DViewer.measureTool) {
|
|
|
map2DViewer.setDrawTool({
|
|
|
- action: "remove"
|
|
|
+ action: "remove",
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -152,14 +154,14 @@ export default {
|
|
|
$(() => {
|
|
|
// 法律法规点击事件
|
|
|
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();
|
|
@@ -194,7 +196,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 "取消":
|
|
@@ -232,7 +234,12 @@ 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();
|
|
|
|
|
@@ -240,12 +247,12 @@ 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();
|
|
@@ -254,28 +261,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,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
+ // 更新时调用一次搜索接口
|
|
|
}
|
|
|
- // 更新时调用一次搜索接口
|
|
|
- });
|
|
|
+ );
|
|
|
}
|
|
|
},
|
|
|
- error => {
|
|
|
+ (error) => {
|
|
|
console.log(error);
|
|
|
}
|
|
|
);
|
|
@@ -287,7 +298,9 @@ 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);
|
|
@@ -310,7 +323,9 @@ export default {
|
|
|
// 每次点击按钮后重绘弹窗
|
|
|
if (this.currentHtml && this.currentCid) {
|
|
|
setTimeout(() => {
|
|
|
- this.popup.setContent(this.createAuditDiv(this.currentCid)).openOn(map2DViewer.map);
|
|
|
+ this.popup
|
|
|
+ .setContent(this.createAuditDiv(this.currentCid))
|
|
|
+ .openOn(map2DViewer.map);
|
|
|
}, 300);
|
|
|
}
|
|
|
},
|
|
@@ -318,7 +333,7 @@ export default {
|
|
|
initDraw() {
|
|
|
if (!map2DViewer.measureTool) {
|
|
|
// 引入疑点标记绘制方法
|
|
|
- map2DViewer.drawToolFire = data => {
|
|
|
+ map2DViewer.drawToolFire = (data) => {
|
|
|
// 纬经度
|
|
|
if (data && data.points.length >= 1) {
|
|
|
let geoType = null;
|
|
@@ -358,7 +373,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",
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -387,14 +402,17 @@ export default {
|
|
|
attributionControl: false,
|
|
|
zoomControl: false,
|
|
|
minZoom: 10,
|
|
|
- maxZoom: 16
|
|
|
+ maxZoom: 16,
|
|
|
}).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
|
|
|
|
|
|
//添加默认图层
|
|
|
let guid = publicFun.buildGuid("baseLayer");
|
|
|
let layer = L.esri
|
|
|
.tiledMapLayer({
|
|
|
- url: systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
|
|
|
+ url:
|
|
|
+ systemConfig.mapService +
|
|
|
+ "?servertype=Street_Purplish_Blue&token=" +
|
|
|
+ systemConfig.token,
|
|
|
// url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
|
|
|
// tileSize: 512
|
|
|
})
|
|
@@ -414,14 +432,16 @@ export default {
|
|
|
map2DViewer.groups["浦东新区_polygon"].remove();
|
|
|
}
|
|
|
// 请求并渲染新的区域图层
|
|
|
- get("./static/json/pdgeojson.json", "").then(geoJson => {
|
|
|
+ get("./static/json/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);
|
|
|
}
|
|
|
});
|
|
@@ -466,7 +486,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;
|
|
@@ -477,25 +497,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) {
|
|
@@ -518,9 +538,35 @@ export default {
|
|
|
return "#00ffd5";
|
|
|
}
|
|
|
},
|
|
|
+ addSinglePolygon(geometry, cid, color) {
|
|
|
+ let coordinates = JSON.parse(`{${geometry}}`).geometry.coordinates[0];
|
|
|
+ coordinates = coordinates.map((v) => {
|
|
|
+ return [v[1], v[0]];
|
|
|
+ });
|
|
|
+ console.log(coordinates, "疑点坐标");
|
|
|
+ console.log(cid, "cid");
|
|
|
+ console.log(color, "color");
|
|
|
+ let polygon = L.polygon(coordinates, {
|
|
|
+ color: color,
|
|
|
+ weight: 3,
|
|
|
+ fillColor: color,
|
|
|
+ opacity: 1,
|
|
|
+ fillOpacity: 0.4,
|
|
|
+ }).addTo(map2DViewer.map);
|
|
|
+ map2DViewer.polygons[`${cid}_polygon`] = polygon;
|
|
|
+ polygon.on("click", (e) => {
|
|
|
+ this.auditPopupShow = true;
|
|
|
+ this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
|
|
|
+ .setLatLng(e.latlng)
|
|
|
+ .setContent(this.createAuditDiv("cid"));
|
|
|
+ this.auditPopupShow = false;
|
|
|
+ this.popup.openOn(map2DViewer.map);
|
|
|
+ this.currentCid = cid;
|
|
|
+ });
|
|
|
+ },
|
|
|
// 综合分析 - 图层绘制面
|
|
|
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;
|
|
@@ -529,16 +575,18 @@ 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);
|
|
@@ -546,10 +594,12 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+ deleteSinglePolygon(polygon) {
|
|
|
+ map2DViewer.map.removeLayer(polygon);
|
|
|
+ },
|
|
|
//综合分析 - 标记疑点 - 删除面
|
|
|
deletePolygonLayer(layer) {
|
|
|
- map2DViewer.polygons[layer].forEach(polygon => {
|
|
|
+ map2DViewer.polygons[layer].forEach((polygon) => {
|
|
|
map2DViewer.map.removeLayer(polygon);
|
|
|
});
|
|
|
},
|
|
@@ -559,7 +609,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;
|
|
|
}
|
|
@@ -573,13 +623,15 @@ 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) {
|
|
@@ -591,12 +643,14 @@ 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()
|
|
|
+ );
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -610,21 +664,24 @@ 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()
|
|
|
+ );
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
@@ -653,8 +710,8 @@ export default {
|
|
|
console.log(geometry, "移除");
|
|
|
geometry.removeFrom(map2DViewer.map);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|