Compare commits
4 Commits
78342c3a8f
...
13fdc6dbdf
| Author | SHA1 | Date |
|---|---|---|
|
|
13fdc6dbdf | |
|
|
ba572e4a47 | |
|
|
5d30b2aa32 | |
|
|
b97cd191a9 |
|
|
@ -58,6 +58,10 @@ export const MAP_VIEWER = {
|
|||
"莒南县":{
|
||||
center:{lng: 118.96807389575793, lat: 35.186365164136504},
|
||||
zoom:9.848587811931848,
|
||||
},
|
||||
"临港区":{
|
||||
center:{lng: 119.113001, lat: 35.204748},
|
||||
zoom:10.848587811931848,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,16 +66,7 @@ const initMap = () => {
|
|||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: 'dianzi',
|
||||
type: 'raster',
|
||||
source: 'dianzi',
|
||||
minzoom: 0,
|
||||
maxzoom: 18,
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
id: 'dianzi-biaozhu',
|
||||
type: 'raster',
|
||||
|
|
@ -104,6 +95,15 @@ const initMap = () => {
|
|||
layout: {
|
||||
visibility: 'none',
|
||||
}
|
||||
},{
|
||||
id: 'dianzi',
|
||||
type: 'raster',
|
||||
source: 'dianzi',
|
||||
minzoom: 0,
|
||||
maxzoom: 18,
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
|
|
@ -474,6 +474,7 @@ const handlerDealCountry = (countyName:String = "临沂市"):void=>{
|
|||
handlerLoadCountyLayer(res.data);
|
||||
});
|
||||
} else if(countyName){
|
||||
|
||||
center = MAP_VIEWER[countyName].center;
|
||||
zoom = MAP_VIEWER[countyName].zoom;
|
||||
handlerLocation([center['lng'],center['lat']],zoom);
|
||||
|
|
@ -482,8 +483,9 @@ const handlerDealCountry = (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%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&cql_filter=xzqdm_1%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&cql_filter=xzqmc_1%20like%20%27%25${filterName}%25%27`,
|
||||
}).then(res=>{
|
||||
console.log("res",res);
|
||||
handlerLoadCountyLayer(res.data);
|
||||
})
|
||||
}
|
||||
|
|
@ -511,7 +513,7 @@ const handlerLoadCountyLayer = (geojson)=>{
|
|||
}
|
||||
}
|
||||
)
|
||||
map.moveLayer("heatLayer","countLayer");
|
||||
// map.moveLayer("heatLayer","countLayer");
|
||||
// map.moveLayer("historyLayerLine","countLayer");
|
||||
// map.moveLayer("historyLayerFill","countLayer");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<div class="main-container">
|
||||
<!-- mask -->
|
||||
<div id="alertOverlay" class="alert-active" ref="alertOverlay">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- layout -->
|
||||
<div class="main-header">
|
||||
<div class="title">
|
||||
|
|
@ -225,4 +230,74 @@ onMounted(() => {
|
|||
z-index:9999999;
|
||||
}
|
||||
}
|
||||
|
||||
#alertOverlay::before,#alertOverlay::after {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#alertOverlay div::before,#alertOverlay div::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#alertOverlay::before {
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
#alertOverlay::after {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
|
||||
}
|
||||
|
||||
#alertOverlay div::before {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#alertOverlay div::after {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
transform: rotate(0deg) translate(0px, calc(-1 * 50px));
|
||||
}
|
||||
|
||||
#alertOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.alert-active {
|
||||
animation: blink 0s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -656,6 +656,7 @@
|
|||
loadMonitorLayer();
|
||||
loadFuFeiLayer();
|
||||
getHangFeiAreaData();
|
||||
getHangFeiPlanData();
|
||||
emits('onload');
|
||||
map.on('click', (e) => {
|
||||
var center = map.getCenter(); // 获取当前视图中心点
|
||||
|
|
@ -913,6 +914,38 @@
|
|||
'line-color': '#6F7FF4', // 设置线的颜色
|
||||
'line-width': 3, // 设置线的宽度
|
||||
},
|
||||
layout:{
|
||||
"visibility":"none"
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 航飞规划
|
||||
function getHangFeiPlanData(){
|
||||
axios({
|
||||
method: 'get',
|
||||
url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ahangfeiquyu&maxFeatures=9990&outputFormat=application%2Fjson`,
|
||||
}).then((res) => {
|
||||
loadHangFeiPlanLayer(res.data);
|
||||
});
|
||||
}
|
||||
|
||||
function loadHangFeiPlanLayer(geojson){
|
||||
map.addSource('hangfeiPlanSource', {
|
||||
type: 'geojson',
|
||||
data: geojson,
|
||||
});
|
||||
map.addLayer({
|
||||
id: 'hangfeiplan',
|
||||
type: 'line',
|
||||
source: 'hangfeiPlanSource',
|
||||
paint: {
|
||||
'line-color': '#6F7FF4', // 设置线的颜色
|
||||
'line-width': 3, // 设置线的宽度
|
||||
},
|
||||
layout:{
|
||||
"visibility":"none"
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue