首页农发首页优化移植
parent
287c73035a
commit
4bae5dab64
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<a-spin size="large" tip="图层加载中..." :spinning="spinning" wrapperClassName="solid-spin">
|
||||
<div class="statistical" id="bg-pan" ref="container">
|
||||
<Map
|
||||
@onload="handlerOnMapLoad"
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
@handlerQueryIntersectTif="handlerQueryIntersectTif"
|
||||
:layer="layerSettings"
|
||||
:defaultColor="defaultColor"
|
||||
@changeLoading="changeLoading"
|
||||
/>
|
||||
|
||||
<div style="position: absolute; left: 60px; bottom: 20px; z-index: 1" v-if="false">
|
||||
|
|
@ -140,6 +142,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -198,6 +201,7 @@
|
|||
const preTransformX = ref(0);
|
||||
const preTransformY = ref(0);
|
||||
const hiddenInfoMap = ref(false)
|
||||
const spinning = ref(false)
|
||||
|
||||
watch([x, y], () => {
|
||||
if (!startedDrag.value) {
|
||||
|
|
@ -420,8 +424,12 @@ watchEffect(() => {
|
|||
|
||||
|
||||
onMounted(() => {
|
||||
spinning.value = true
|
||||
getLayerSettings();
|
||||
});
|
||||
const changeLoading = (type: boolean) => {
|
||||
spinning.value = type
|
||||
}
|
||||
const goRouter = () => {
|
||||
route.push({ path: '/caseoffence/feifacaikuang' })
|
||||
}
|
||||
|
|
@ -527,7 +535,7 @@ watchEffect(() => {
|
|||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
width:100%;
|
||||
height:100vh;
|
||||
height:calc(-80px + 100vh);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
|
|
@ -644,7 +652,6 @@ watchEffect(() => {
|
|||
.layer-center-container {
|
||||
width:285px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
.drag-area{
|
||||
width:245px;
|
||||
|
|
@ -692,3 +699,11 @@ watchEffect(() => {
|
|||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.solid-spin.ant-spin-nested-loading > .ant-spin-blur::after {
|
||||
opacity: 1;
|
||||
}
|
||||
.solid-spin.ant-spin-nested-loading .ant-spin{
|
||||
max-height: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export const MAPBOX_TOKEN = "pk.eyJ1IjoiemhhbmcxMjM4ODk5OSIsImEiOiJja3N5Ync1cXcyMTR2Mm9xempmbGE4MnBtIn0.R-j78CRvbs6JZG-MDSoh8Q";
|
||||
export const MAPBOX_TOKEN = "pk.eyJ1IjoibGllYmFvIiwiYSI6ImNsMXg1OHdtcTE3eDEza3FmODBmeXhldmIifQ.CYYMuikQnGHMtTNq60B_xA";
|
||||
|
||||
export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
'handlerGetDetails',
|
||||
'showMonitor',
|
||||
'handlerQueryIntersectTif',
|
||||
'changeLoading'
|
||||
]);
|
||||
|
||||
let isZoomVisible: any = false;
|
||||
|
|
@ -141,7 +142,6 @@
|
|||
//挂载mapbox-gl-utils
|
||||
U.init(map);
|
||||
mp = new MP(map);
|
||||
|
||||
// 添加地形数据
|
||||
map.addSource('mapbox-dem', {
|
||||
type: 'raster-dem',
|
||||
|
|
@ -151,41 +151,46 @@
|
|||
minzoom: 10,
|
||||
});
|
||||
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
|
||||
|
||||
// 设置2D地图
|
||||
map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
|
||||
map.dragRotate.disable(); // 禁用拖动旋转
|
||||
map.pitchWithRotate = false; // 禁用旋转时俯仰变化
|
||||
mapAngle.value = '2D';
|
||||
|
||||
handlerCheckUserOrgs();
|
||||
// handlerLoadMaskLayer();
|
||||
getMaskData();
|
||||
handlerDealStreet();
|
||||
handlerDealCountry();
|
||||
|
||||
// 视频监控
|
||||
addMonitorLayer();
|
||||
|
||||
// 叠加遥感影像和高清影像
|
||||
try{
|
||||
axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
|
||||
if(res.data.result){
|
||||
networkType.value = "WAN";
|
||||
}else{
|
||||
networkType.value = "LAN";
|
||||
// 加载内网影像
|
||||
loadYingXiangLayer()
|
||||
}
|
||||
axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
|
||||
if(res.data.result){
|
||||
networkType.value = "WAN";
|
||||
}else{
|
||||
networkType.value = "LAN";
|
||||
// 加载内网影像
|
||||
loadYingXiangLayer()
|
||||
}
|
||||
})
|
||||
}catch(e){
|
||||
networkType.value = "WAN";
|
||||
}finally{
|
||||
|
||||
}
|
||||
}finally{}
|
||||
const sources = map.getStyle().sources;
|
||||
let loadedSources = 0;
|
||||
Object.keys(sources).forEach(sourceId => {
|
||||
map.on('sourcedata', (e) => {
|
||||
if (e.sourceId === sourceId && e.isSourceLoaded) {
|
||||
loadedSources++;
|
||||
if (loadedSources === Object.keys(sources).length) {
|
||||
console.log('所有图层关联的数据源已加载完成');
|
||||
emits('changeLoading',false)
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function loadYingXiangLayer(){
|
||||
|
|
@ -545,64 +550,53 @@
|
|||
|
||||
// 获取县区边界数据
|
||||
const handlerDealCountry = (countyName: String = '临沂市'): void => {
|
||||
let center = {};
|
||||
let zoom;
|
||||
let filterName = '';
|
||||
if (countyName == '临沂市') {
|
||||
center = { lng: 118.72504868812163, lat: 35.180072027132915 };
|
||||
zoom = 7.848587811931849;
|
||||
handlerLocation([center['lng'], center['lat']], zoom);
|
||||
} else if (countyName) {
|
||||
center = MAP_VIEWER[countyName].center;
|
||||
zoom = MAP_VIEWER[countyName].zoom;
|
||||
handlerLocation([center['lng'], center['lat']], zoom);
|
||||
filterName = countyName;
|
||||
}
|
||||
|
||||
axios({
|
||||
method: 'get',
|
||||
// url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
|
||||
url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson`,
|
||||
}).then((res) => {
|
||||
handlerLoadPanelLayer(res.data);
|
||||
handlerLoadCountyLayer(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* 县区边界：countyLayer
|
||||
* 县区面板图层：countyPanelLayer
|
||||
* 乡镇边界：streetLayer
|
||||
* 乡镇名称图层：streetLabelLayer
|
||||
* 遮罩图层：mb-tag
|
||||
* 图斑线：historyLayerLine
|
||||
* 图斑面：historyLayerFill
|
||||
*
|
||||
* */
|
||||
// 渲染县区边界数据
|
||||
const handlerLoadCountyLayer = (geojson) => {
|
||||
// 绘制线
|
||||
if (map.getSource('countySource')) {
|
||||
map.getSource('countySource').setData(geojson);
|
||||
} else {
|
||||
map.addSource('countySource', {
|
||||
type: 'geojson',
|
||||
data: geojson,
|
||||
});
|
||||
map.addLayer({
|
||||
id: 'countyLayer',
|
||||
type: 'line',
|
||||
source: 'countySource',
|
||||
paint: {
|
||||
'line-color': '#6f7ff4', // 设置线的颜色
|
||||
'line-width': 3, // 设置线的宽度
|
||||
},
|
||||
});
|
||||
if (map.getLayer('countyPanelLayer')) {
|
||||
map.moveLayer('countyLayer', 'countyPanelLayer');
|
||||
map.addSource("wmsSource", {
|
||||
"type": "vector",
|
||||
"scheme": "tms",
|
||||
tiles: [
|
||||
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
|
||||
],
|
||||
tileSize: 512
|
||||
})
|
||||
map.addLayer({
|
||||
id: "xianjie",
|
||||
type: "line",
|
||||
source: "wmsSource",
|
||||
'source-layer': 'xianjie',
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
paint: {
|
||||
"line-color": "#6f7ff4",
|
||||
"line-width": 4,
|
||||
}
|
||||
}
|
||||
})
|
||||
map.addSource("xianjiepoint", {
|
||||
"type": "vector",
|
||||
"scheme": "tms",
|
||||
tiles: [
|
||||
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Alinyishixianjie_point@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
tileSize: 512,
|
||||
})
|
||||
map.addLayer({
|
||||
id: "xianjiepoint",
|
||||
type: "symbol",
|
||||
source: "xianjiepoint",
|
||||
'source-layer': 'linyishixianjie_point',
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
"text-field": "{xzqmc}",
|
||||
"text-size": 18
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#041B36',
|
||||
'text-halo-color': '#fff',
|
||||
'text-halo-width': 2,
|
||||
},
|
||||
minzoom: 8,
|
||||
maxzoom: 10,
|
||||
});
|
||||
};
|
||||
|
||||
// 渲染县界白板图层
|
||||
|
|
@ -669,13 +663,19 @@
|
|||
};
|
||||
|
||||
function getMaskData() {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
|
||||
}).then((res) => {
|
||||
let geojson = { DATA: res.data.features[0].geometry.coordinates[0][0] };
|
||||
|
||||
handlerLoadMaskLayer(geojson);
|
||||
map.addLayer({
|
||||
id: "linyishizhezhao",
|
||||
type: "raster",
|
||||
source: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
"http://175.27.168.120:8080/geoserver/gwc/service/wms?service=WMS&version=1.1.0&request=GetMap&layers=linyishi%3Alinyishizhezhao&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -716,56 +716,55 @@
|
|||
|
||||
// 获取乡镇数据
|
||||
const handlerDealStreet = (countyName: String = '临沂市'): void => {
|
||||
|
||||
axios({
|
||||
method: 'get',
|
||||
url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Azhenjie&maxFeatures=10000&outputFormat=application%2Fjson`,
|
||||
}).then((res) => {
|
||||
handlerLoadStreetLayer(res.data);
|
||||
map.addSource("zhenjie", {
|
||||
"type": "vector",
|
||||
"scheme": "tms",
|
||||
tiles: [
|
||||
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
tileSize: 512
|
||||
})
|
||||
map.addLayer({
|
||||
id: "zhenjie",
|
||||
type: "line",
|
||||
source: "zhenjie",
|
||||
'source-layer': 'zhenjie',
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#42befb', // 设置线的颜色
|
||||
'line-width': 1, // 设置线的宽度
|
||||
},
|
||||
minzoom: 10,
|
||||
maxzoom: 24,
|
||||
})
|
||||
map.addSource("zhenjiepoint", {
|
||||
"type": "vector",
|
||||
"scheme": "tms",
|
||||
tiles: [
|
||||
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjiepoint@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
tileSize: 512,
|
||||
})
|
||||
map.addLayer({
|
||||
id: "zhenjiepoint",
|
||||
type: "symbol",
|
||||
source: "zhenjiepoint",
|
||||
'source-layer': 'zhenjiepoint',
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
"text-field": "{xzqmc}",
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#041B36',
|
||||
'text-halo-color': '#fff',
|
||||
'text-halo-width': 2,
|
||||
},
|
||||
minzoom: 10,
|
||||
maxzoom: 24,
|
||||
});
|
||||
};
|
||||
// 渲染乡镇边界数据
|
||||
const handlerLoadStreetLayer = (geojson) => {
|
||||
// 绘制线
|
||||
if (map.getSource('streetSource')) {
|
||||
map.getSource('streetSource').setData(geojson);
|
||||
} else {
|
||||
map.addSource('streetSource', {
|
||||
type: 'geojson',
|
||||
data: geojson,
|
||||
});
|
||||
map.addLayer({
|
||||
id: 'streetLayer',
|
||||
type: 'line',
|
||||
source: 'streetSource',
|
||||
paint: {
|
||||
'line-color': '#42befb', // 设置线的颜色
|
||||
'line-width': 2, // 设置线的宽度
|
||||
},
|
||||
minzoom: 10,
|
||||
maxzoom: 24,
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: 'streetLabelLayer',
|
||||
type: 'symbol',
|
||||
source: 'streetSource',
|
||||
layout: {
|
||||
'text-field': ['get', 'xzqmc'],
|
||||
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
|
||||
'text-size': 12,
|
||||
'text-anchor': 'center',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#041B36',
|
||||
'text-halo-color': '#fff',
|
||||
'text-halo-width': 2,
|
||||
},
|
||||
minzoom: 10,
|
||||
maxzoom: 24,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let VillageGeojson = {};
|
||||
const handlerLoadVillageLayer = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue