监控显示，影像层级
parent
55c41d9730
commit
a35ebd949b
|
|
@ -1,11 +1,7 @@
|
|||
<template>
|
||||
<div :id="mapContainerName" class="map-container">
|
||||
<div class="search-container-box">
|
||||
<SearchComponent
|
||||
@toPosition="toPosition"
|
||||
@handlerFilter="handlerFilter"
|
||||
:layerSettings="layerSettings"
|
||||
/>
|
||||
<SearchComponent @toPosition="toPosition" @handlerFilter="handlerFilter" :layer="layerSettings"></SearchComponent>
|
||||
</div>
|
||||
<div class="map-type-switch-container">
|
||||
<div class="switch-button" v-if="mapAngle == '3D'" @click="handlerChangeMapAngle()">
|
||||
|
|
@ -34,29 +30,29 @@
|
|||
import { getPolygonCenter, getUserOrgs } from '@/api/tiankongdi';
|
||||
import axios from 'axios';
|
||||
import SearchComponent from './SearchComponent.vue';
|
||||
const { VITE_GLOB_YINGXIANG_SERVER } = getAppEnvConfig();
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
|
||||
import { waiData } from '../LargeScreenMap/linyishi';
|
||||
const mapContainerName = ref<String>();
|
||||
mapContainerName.value = 'mapContainer-' + generateUUID();
|
||||
|
||||
const {VITE_GLOB_YINGXIANG_SERVER,VITE_GLOB_YAOGANYINGXIANG_SERVER} = getAppEnvConfig();
|
||||
//
|
||||
import { TableOutlined, GlobalOutlined, HomeOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
// 图层控制 历史影像
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import U from 'mapbox-gl-utils';
|
||||
import { MP } from './src/MP';
|
||||
import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
||||
|
||||
// 图层控制 历史影像
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import U from 'mapbox-gl-utils';
|
||||
import {MP} from "./src/MP";
|
||||
import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
||||
|
||||
|
||||
const emits = defineEmits([
|
||||
'onload',
|
||||
'handlerGetDetails',
|
||||
'showMonitor',
|
||||
'handlerQueryIntersectTif',
|
||||
'getDetailByFeature',
|
||||
]);
|
||||
|
||||
let isZoomVisible: any = false;
|
||||
|
|
@ -64,15 +60,12 @@
|
|||
let mp: any = null;
|
||||
const props = defineProps({
|
||||
layer: Object,
|
||||
defaultColor: String,
|
||||
});
|
||||
const layerSettings = ref<any>({});
|
||||
const layerDefaultColor = ref<String>();
|
||||
watch(
|
||||
() => props.layer,
|
||||
(val) => {
|
||||
layerSettings.value = val;
|
||||
layerDefaultColor.value = props.defaultColor;
|
||||
},
|
||||
);
|
||||
// init map
|
||||
|
|
@ -91,6 +84,8 @@
|
|||
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||||
],
|
||||
tileSize: 256,
|
||||
minzoom:0,
|
||||
maxzoom:17,
|
||||
},
|
||||
'raster-tiles-font': {
|
||||
type: 'raster',
|
||||
|
|
@ -99,13 +94,24 @@
|
|||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
// 'raster-tiles-geo': {
|
||||
// type: 'raster',
|
||||
// tiles: [
|
||||
// VITE_GLOB_YINGXIANG_SERVER,
|
||||
// ],
|
||||
// tileSize: 256,
|
||||
// }
|
||||
yaogan: {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
VITE_GLOB_YAOGANYINGXIANG_SERVER,
|
||||
],
|
||||
tileSize: 256,
|
||||
minzoom:16,
|
||||
maxzoom:24,
|
||||
},
|
||||
yingxiang: {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
VITE_GLOB_YINGXIANG_SERVER,
|
||||
],
|
||||
tileSize: 256,
|
||||
minzoom:16,
|
||||
maxzoom:24,
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
|
|
@ -120,6 +126,26 @@
|
|||
source: 'raster-tiles',
|
||||
maxZoom: 32,
|
||||
},
|
||||
{
|
||||
id: 'yaogan',
|
||||
type: 'raster',
|
||||
source: 'yaogan',
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
minzoom:9,
|
||||
maxzoom:15
|
||||
},
|
||||
{
|
||||
id: 'yingxiang',
|
||||
type: 'raster',
|
||||
source: 'yingxiang',
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
minzoom:13,
|
||||
maxzoom:24
|
||||
}
|
||||
// {
|
||||
// id: 'tdt-wms-tiles',
|
||||
// type: 'raster',
|
||||
|
|
@ -158,17 +184,17 @@
|
|||
let map_filter;
|
||||
let type_filter;
|
||||
let table_filter = layerSettings.value.tablename;
|
||||
let field_filter = '&field="gid","tubantype","Id",';
|
||||
let field_filter = '&field="gid","tubantype",';
|
||||
let color_filter: any = [];
|
||||
if (code) {
|
||||
sql_filter = '&filter="countyid"=\'' + code + "'";
|
||||
} else {
|
||||
sql_filter = '';
|
||||
}
|
||||
if (!filter || filter == '全部') {
|
||||
map_filter = ['!=', ['get', 'gid'], 0];
|
||||
} else {
|
||||
if (filter && filter != '全部') {
|
||||
map_filter = ['all', ['==', ['get', 'tubantype'], filter]];
|
||||
} else {
|
||||
map_filter = ['!=', ['get', 'gid'], 0];
|
||||
}
|
||||
let legend = layerSettings.value.legend[0];
|
||||
color_filter.push('case');
|
||||
|
|
@ -176,7 +202,7 @@
|
|||
color_filter.push(['all', ['==', ['get', 'tubantype'], key]]);
|
||||
color_filter.push(legend[key].colour);
|
||||
}
|
||||
color_filter.push(layerDefaultColor.value);
|
||||
color_filter.push('#FFFFFF');
|
||||
switch (type) {
|
||||
case '农用地':
|
||||
type_filter = ['==', ['get', 'typename'], '农用地'];
|
||||
|
|
@ -269,6 +295,7 @@
|
|||
},
|
||||
});
|
||||
emits('onload');
|
||||
|
||||
map.on('click', 'historyLayerFill', (e) => {
|
||||
console.log('handlerGetDetails', e.features[0].properties);
|
||||
emits('handlerGetDetails', e.features[0].properties);
|
||||
|
|
@ -788,6 +815,8 @@
|
|||
mapboxgl.accessToken = MAPBOX_TOKEN;
|
||||
map = initMap();
|
||||
|
||||
|
||||
|
||||
map.on('zoom', function (e) {
|
||||
let zoom = map.getZoom();
|
||||
if (zoom > 18) {
|
||||
|
|
@ -806,6 +835,7 @@
|
|||
}
|
||||
}),
|
||||
map.on('load', () => {
|
||||
|
||||
//挂载mapbox-gl-utils
|
||||
U.init(map);
|
||||
mp = new MP(map);
|
||||
|
|
@ -879,14 +909,17 @@
|
|||
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
|
||||
'text-offset': [0, 1.6],
|
||||
'text-anchor': 'top',
|
||||
'text-allow-overlap': false,
|
||||
'text-allow-overlap': true,
|
||||
visibility: 'none',
|
||||
'icon-allow-overlap': true,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#041B36',
|
||||
'text-halo-color': '#fff',
|
||||
'text-halo-width': 2,
|
||||
},
|
||||
minzoom: 0, // 最小缩放级别
|
||||
maxzoom: 22, // 最大缩放级别
|
||||
});
|
||||
|
||||
map.on('click', 'JianKong', (e) => {
|
||||
|
|
@ -895,10 +928,15 @@
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
function handlerDeletePolygon() {
|
||||
mp.deleteDraw();
|
||||
}
|
||||
function handlerDrawPolygon() {
|
||||
|
||||
// 先移除查询的影像图层
|
||||
handlerDeleteHistoryLayer();
|
||||
|
||||
mp.draw('Polygon');
|
||||
mp.on('Polygon', function (e) {
|
||||
Modal.confirm({
|
||||
|
|
@ -926,9 +964,96 @@
|
|||
});
|
||||
// emit('mapDraw', 'Polygon', e);
|
||||
});
|
||||
};
|
||||
|
||||
const tifLayers = ref([])
|
||||
|
||||
function handlerChangeTifLayer(item){
|
||||
|
||||
if(item.type == 'historyLayer' || item.type == 'speciaLayer'){
|
||||
if(item.checked) { // 加载
|
||||
if(map.getLayer(item.id)){
|
||||
map.setLayoutProperty(item.id, 'visibility', 'visible');
|
||||
}else{
|
||||
|
||||
map.addSource("source"+item.id,{
|
||||
type: "raster",
|
||||
tiles: [
|
||||
item.url,
|
||||
],
|
||||
tileSize: 256,
|
||||
})
|
||||
map.addLayer({
|
||||
id: item.id,
|
||||
type: "raster",
|
||||
source: "source"+item.id,
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
paint: {},
|
||||
})
|
||||
|
||||
if(item.type == 'historyLayer'){
|
||||
tifLayers.value.push(item.id);
|
||||
console.log("tifLayers",tifLayers.value);
|
||||
}
|
||||
|
||||
map.moveLayer(item.id,"historyLayerFill");
|
||||
map.moveLayer(item.id,"historyLayerLine");
|
||||
|
||||
}
|
||||
} else {
|
||||
map.setLayoutProperty(item.id, 'visibility', 'none');
|
||||
}
|
||||
}else if(item.type == "dataLayer"){
|
||||
|
||||
if(item.id == "Monitor"){
|
||||
|
||||
if(map.getLayer("JianKong")){
|
||||
if (item.checked) {
|
||||
map.setLayoutProperty("JianKong", 'visibility', 'visible');
|
||||
} else {
|
||||
map.setLayoutProperty("JianKong", 'visibility', 'none');
|
||||
}
|
||||
}
|
||||
}else if(item.id == "Data"){
|
||||
if(map.getLayer("historyLayerLine")){
|
||||
if (item.checked) {
|
||||
map.setLayoutProperty("historyLayerLine", 'visibility', 'visible');
|
||||
map.setLayoutProperty("historyLayerFill", 'visibility', 'visible');
|
||||
} else {
|
||||
map.setLayoutProperty("historyLayerLine", 'visibility', 'none');
|
||||
map.setLayoutProperty("historyLayerFill", 'visibility', 'none');
|
||||
}
|
||||
}
|
||||
}
|
||||
}else if(item.type == "baseLayer"){
|
||||
switch(item.id){
|
||||
case 1:
|
||||
handlerChangeLayerVisible('tdt-img-tiles',false)
|
||||
handlerChangeLayerVisible('tdt-vec-tiles',true)
|
||||
handlerChangeLayerVisible('yaogan',false)
|
||||
handlerChangeLayerVisible('yingxiang',false)
|
||||
handlerChangeLayerVisible('countyPanelLayer',false)
|
||||
break;
|
||||
case 2:
|
||||
handlerChangeLayerVisible('tdt-img-tiles',true)
|
||||
handlerChangeLayerVisible('yaogan',true)
|
||||
handlerChangeLayerVisible('yingxiang',true)
|
||||
handlerChangeLayerVisible('tdt-vec-tiles',false)
|
||||
handlerChangeLayerVisible('countyPanelLayer',false)
|
||||
break;
|
||||
case 3:
|
||||
handlerChangeLayerVisible('tdt-img-tiles',false)
|
||||
handlerChangeLayerVisible('tdt-vec-tiles',false)
|
||||
handlerChangeLayerVisible('yaogan',false)
|
||||
handlerChangeLayerVisible('yingxiang',false)
|
||||
handlerChangeLayerVisible('countyPanelLayer',true)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const tifLayers = ref([]);
|
||||
|
||||
function handlerChangeTifLayer(item) {
|
||||
if (item.type == 'historyLayer' || item.type == 'speciaLayer') {
|
||||
if (item.checked) {
|
||||
|
|
@ -950,10 +1075,6 @@
|
|||
},
|
||||
paint: {},
|
||||
});
|
||||
map.on('click', item.id, (e) => {
|
||||
// 显示弹窗
|
||||
emits('getDetailByFeature', e.features[0]);
|
||||
});
|
||||
tifLayers.value.push(item.id);
|
||||
|
||||
map.moveLayer(item.id, 'historyLayerFill');
|
||||
|
|
@ -1001,78 +1122,20 @@
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const tifLayers = ref([]);
|
||||
function handlerChangeTifLayer(item) {
|
||||
if (item.type == 'historyLayer' || item.type == 'speciaLayer') {
|
||||
if (item.checked) {
|
||||
// 加载
|
||||
if (map.getLayer(item.id)) {
|
||||
map.setLayoutProperty(item.id, 'visibility', 'visible');
|
||||
} else {
|
||||
map.addSource('source' + item.id, {
|
||||
type: 'raster',
|
||||
tiles: [item.url],
|
||||
tileSize: 256,
|
||||
});
|
||||
map.addLayer({
|
||||
id: item.id,
|
||||
type: 'raster',
|
||||
source: 'source' + item.id,
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {},
|
||||
});
|
||||
tifLayers.value.push(item.id);
|
||||
|
||||
map.moveLayer(item.id, 'historyLayerFill');
|
||||
map.moveLayer(item.id, 'historyLayerLine');
|
||||
}
|
||||
} else {
|
||||
map.setLayoutProperty(item.id, 'visibility', 'none');
|
||||
}
|
||||
} else if (item.type == 'dataLayer') {
|
||||
if (item.id == 'Monitor') {
|
||||
if (map.getLayer('JianKong')) {
|
||||
if (item.checked) {
|
||||
map.setLayoutProperty('JianKong', 'visibility', 'visible');
|
||||
} else {
|
||||
map.setLayoutProperty('JianKong', 'visibility', 'none');
|
||||
}
|
||||
}
|
||||
} else if (item.id == 'Data') {
|
||||
if (map.getLayer('historyLayerLine')) {
|
||||
if (item.checked) {
|
||||
map.setLayoutProperty('historyLayerLine', 'visibility', 'visible');
|
||||
map.setLayoutProperty('historyLayerFill', 'visibility', 'visible');
|
||||
} else {
|
||||
map.setLayoutProperty('historyLayerLine', 'visibility', 'none');
|
||||
map.setLayoutProperty('historyLayerFill', 'visibility', 'none');
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (item.type == 'baseLayer') {
|
||||
switch (item.id) {
|
||||
case 1:
|
||||
handlerChangeLayerVisible('tdt-img-tiles', false);
|
||||
handlerChangeLayerVisible('tdt-vec-tiles', true);
|
||||
handlerChangeLayerVisible('countyPanelLayer', false);
|
||||
break;
|
||||
case 2:
|
||||
handlerChangeLayerVisible('tdt-img-tiles', true);
|
||||
handlerChangeLayerVisible('tdt-vec-tiles', false);
|
||||
handlerChangeLayerVisible('countyPanelLayer', false);
|
||||
break;
|
||||
case 3:
|
||||
handlerChangeLayerVisible('tdt-img-tiles', false);
|
||||
handlerChangeLayerVisible('tdt-vec-tiles', false);
|
||||
handlerChangeLayerVisible('countyPanelLayer', true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handlerDeleteHistoryLayer(){
|
||||
|
||||
|
||||
tifLayers.value?.forEach((item,index)=>{
|
||||
if(map.getLayer(item)){
|
||||
map.removeLayer(item);
|
||||
map.removeSource("source"+item);
|
||||
}
|
||||
})
|
||||
tifLayers.value = [];
|
||||
}
|
||||
</script>
|
||||
<style type="less" scoped>
|
||||
.map-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue