HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge

dianlixunjian
徐景良 2024-07-19 13:57:19 +08:00
parent 90012c5c0b
commit ccb9a35263
5 changed files with 108590 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/MapboxMaps/MapComponent.vue
View File

@ -518,6 +518,7 @@
} }
} }
let splitPolygon = currentGeoJson.value; let splitPolygon = currentGeoJson.value;
console.log("splitPolygon",splitPolygon);
try{ try{
// let features = polygonCut(splitPolygon,splitLineString,0.1,"meters"); // let features = polygonCut(splitPolygon,splitLineString,0.1,"meters");
@ -530,10 +531,10 @@
splitAfterFeatures.features = features; splitAfterFeatures.features = features;
emit("handlerSplitPolygon",features); emit("handlerSplitPolygon",features);
handlerDetails(splitAfterFeatures); handlerDetails(splitAfterFeatures);
handlerUnDraw(); handlerUnDraw();
}catch(e){ }catch(e){
console.error("EEEE",e);
createMessage.warning('分割线起点、终点需要在图斑外'); createMessage.warning('分割线起点、终点需要在图斑外');
handlerUnDraw(); handlerUnDraw();
} }
@ -888,23 +889,7 @@
}; };
/**
*
* 查看图斑
*
* 添加图斑
*
* 编辑图斑
*
* status 操作类型
*
* features 空间数据
*
* [
* {id:"8448048304dofhaofh0af0q4",geom:""}
* ]
*
* */
const handlerDraw = (status:string,features = null, bool = false) => { const handlerDraw = (status:string,features = null, bool = false) => {
let geo = { let geo = {
type: 'FeatureCollection', type: 'FeatureCollection',
@ -924,6 +909,7 @@
for (let i = 0; i < features.length; i++) { for (let i = 0; i < features.length; i++) {
try { try {
let featureTemp = WktToGeojson(features[i]?.mapgeom); let featureTemp = WktToGeojson(features[i]?.mapgeom);
let feature = { let feature = {
id: generateUUID(), id: generateUUID(),
type: 'Feature', type: 'Feature',
@ -935,6 +921,7 @@
// 获取第一个图斑的中心点跳转定位 // 获取第一个图斑的中心点跳转定位
if(i == 0){ if(i == 0){
let lngLat = getGeometryCenter(feature); let lngLat = getGeometryCenter(feature);
// let lngLat = getGeometryCenter(geo.features[0]);
currentPosition.value = lngLat; currentPosition.value = lngLat;
handlerLocation(lngLat); handlerLocation(lngLat);
} }
@ -945,6 +932,7 @@
} }
} }
} }
switch(status){ switch(status){
case "Add": case "Add":
handlerInitDrawTool(geo, bool); handlerInitDrawTool(geo, bool);
@ -960,6 +948,7 @@
} }
}; };
const currentGeoJson = ref({}); const currentGeoJson = ref({});
const handlerDetails = (geojson,source="detailsSource",layer="detailsLayer",style={lineStyle:{'line-color': '#fcf003','line-width':3},fillStyle:{'fill-color': '#fcf003',"fill-opacity": 0.1}}) => { const handlerDetails = (geojson,source="detailsSource",layer="detailsLayer",style={lineStyle:{'line-color': '#fcf003','line-width':3},fillStyle:{'fill-color': '#fcf003',"fill-opacity": 0.1}}) => {
@ -967,11 +956,19 @@
let lineLayerName = layer+"Line"; let lineLayerName = layer+"Line";
if(source == 'detailsSource'){ if(source == 'detailsSource'){
// 判断是单面还是多面
let coordinates = null;
if(geojson.features[0].geometry.type == "MultiPolygon"){
coordinates = geojson.features[0].geometry.coordinates[0];
}else if(geojson.features[0].geometry.type == "Polygon"){
coordinates = geojson.features[0].geometry.coordinates;
}
let singleFeature = { let singleFeature = {
"type": "Feature", "type": "Feature",
"properties": {}, "properties": {},
"geometry": { "geometry": {
"coordinates": geojson.features[0].geometry.coordinates[0], "coordinates": coordinates,
"type": "Polygon" "type": "Polygon"
} }
} }

150
src/components/MapboxMaps/MapboxMap.vue
View File

@ -48,7 +48,7 @@
import { onMounted, onUnmounted, defineProps, reactive, ref, defineExpose } from 'vue'; import { onMounted, onUnmounted, defineProps, reactive, ref, defineExpose } from 'vue';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { Map, Popup } from 'mapbox-gl'; import { Map, Popup } from 'mapbox-gl';
import heatGeoJson from './lib/data.json'
// 图形绘制工具类 // 图形绘制工具类
import MapboxDraw from '@mapbox/mapbox-gl-draw'; import MapboxDraw from '@mapbox/mapbox-gl-draw';
@ -205,81 +205,81 @@
} }
}); });
// map.addSource('earthquakes', { map.addSource('earthquakes', {
// 'type': 'geojson', 'type': 'geojson',
// 'data': {} 'data': heatGeoJson
// }); });
// map.addLayer( map.addLayer(
// { {
// 'id': 'earthquakes-heat', 'id': 'earthquakes-heat',
// 'type': 'heatmap', 'type': 'heatmap',
// 'source': 'earthquakes', 'source': 'earthquakes',
// // 'maxzoom': 18, // 'maxzoom': 18,
// 'minzoom':11, 'minzoom':11,
// 'paint': { 'paint': {
// // Increase the heatmap weight based on frequency and property magnitude // Increase the heatmap weight based on frequency and property magnitude
// 'heatmap-weight': [ 'heatmap-weight': [
// 'interpolate', 'interpolate',
// ['linear'], ['linear'],
// ['get', 'mag'], ['get', 'mag'],
// 0, 0,
// 1, 1,
// 1, 1,
// 0 0
// ], ],
// // Increase the heatmap color weight weight by zoom level // Increase the heatmap color weight weight by zoom level
// // heatmap-intensity is a multiplier on top of heatmap-weight // heatmap-intensity is a multiplier on top of heatmap-weight
// 'heatmap-intensity': [ 'heatmap-intensity': [
// 'interpolate', 'interpolate',
// ['linear'], ['linear'],
// ['zoom'], ['zoom'],
// 0, 0,
// 1, 1,
// 9, 9,
// 3 3
// ], ],
// // Color ramp for heatmap. Domain is 0 (low) to 1 (high). // Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// // Begin color ramp at 0-stop with a 0-transparancy color // Begin color ramp at 0-stop with a 0-transparancy color
// // to create a blur-like effect. // to create a blur-like effect.
// 'heatmap-color': [ 'heatmap-color': [
// 'interpolate', 'interpolate',
// ['linear'], ['linear'],
// ['heatmap-density'], ['heatmap-density'],
// 0, 0,
// 'rgba(33,102,172,0)', 'rgba(33,102,172,0)',
// 0.2, 0.2,
// 'rgb(103,169,207)', 'rgb(103,169,207)',
// 0.4, 0.4,
// 'rgb(209,229,240)', 'rgb(209,229,240)',
// 0.6, 0.6,
// 'rgb(253,219,199)', 'rgb(253,219,199)',
// 0.8, 0.8,
// 'rgb(239,138,98)', 'rgb(239,138,98)',
// 1, 1,
// 'rgb(178,24,43)' 'rgb(178,24,43)'
// ], ],
// // Adjust the heatmap radius by zoom level // Adjust the heatmap radius by zoom level
// 'heatmap-radius': [ 'heatmap-radius': [
// 'interpolate',['linear'],['zoom'], 'interpolate',['linear'],['zoom'],
// 3, 3,
// 6, 6,
// 9, 9,
// 20 20
// ], ],
// // Transition from heatmap to circle layer by zoom level // Transition from heatmap to circle layer by zoom level
// 'heatmap-opacity': [ 'heatmap-opacity': [
// 'interpolate', 'interpolate',
// ['linear'], ['linear'],
// ['zoom'], ['zoom'],
// 7, 7,
// 1, 1,
// 8, 8,
// 1 1
// ] ]
// } }
// } }
// ); );

108475
src/components/MapboxMaps/lib/data.json Normal file
View File

File diff suppressed because it is too large Load Diff

28
src/views/demo/tiankongdi/changearea/MapList/index.vue
View File

@ -426,11 +426,20 @@ const getCollectList = () => {
getInfoList(); getInfoList();
}; };
const showSplitPolygon = ref(false); const showSplitPolygon = ref(false);
const handlerRevertPolygon = (item)=>{
}
const handlerSplitPolygon = (item) => { const handlerSplitPolygon = (item) => {
getCaseInfoById({id:item.processid}).then(res => { getCaseInfoById({id:item.processid}).then(res => {
showInfoData.value = res
showInfoData.value['processid'] = item.processid; if(res){
showSplitPolygon.value = true showInfoData.value = res
showInfoData.value['processid'] = item.processid;
showSplitPolygon.value = true
}else{
message.error("数据为空");
}
}) })
} }
const dataListSort = (type) => { const dataListSort = (type) => {
@ -484,8 +493,17 @@ function closeModal() {
} }
function handleSuccess() {} function handleSuccess() {}
const handleOperateClick = (e: Event) => { const handleOperateClick = (e: Event) => {
handlerSplitPolygon(selectItem.value);
console.log('clickEEEEE', e,selectItem.value); if(!selectItem.value){
message.warning("选择需要操作的数据");
}
if(e['key'] == 1){
handlerSplitPolygon(selectItem.value);
}else if(e['key'] == 2){
handlerRevertPolygon(selectItem.value)
}
}; };
</script> </script>

2
src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -678,7 +678,7 @@
params.parts.push(polygon); params.parts.push(polygon);
}) })
console.log("params",params); console.log("params",params);
splitCase(params).then(res=>{ splitCase(params).then(res=>{
if(res.code == 200){ if(res.code == 200){
createMessage.success("操作成功！"); createMessage.success("操作成功！");