Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
7597d451e0
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div :id="mapContainerName" class="map-container">
|
||||
<div class="search-container-box">
|
||||
<SearchComponent @toPosition="toPosition" @handlerFilter="handlerFilter" :layerSettings="layerSettings"></SearchComponent>
|
||||
<SearchComponent
|
||||
@toPosition="toPosition"
|
||||
@handlerFilter="handlerFilter"
|
||||
:layerSettings="layerSettings"
|
||||
></SearchComponent>
|
||||
</div>
|
||||
<div class="map-type-switch-container">
|
||||
<div class="switch-button" v-if="mapAngle == '3D'" @click="handlerChangeMapAngle()">
|
||||
|
|
@ -36,17 +40,15 @@
|
|||
import { waiData } from '../LargeScreenMap/linyishi';
|
||||
const mapContainerName = ref<String>();
|
||||
mapContainerName.value = 'mapContainer-' + generateUUID();
|
||||
const {VITE_GLOB_YINGXIANG_SERVER,VITE_GLOB_YAOGANYINGXIANG_SERVER} = getAppEnvConfig();
|
||||
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',
|
||||
|
|
@ -60,12 +62,15 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
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
|
||||
|
|
@ -84,8 +89,8 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||||
],
|
||||
tileSize: 256,
|
||||
minzoom:0,
|
||||
maxzoom:17,
|
||||
minzoom: 0,
|
||||
maxzoom: 17,
|
||||
},
|
||||
'raster-tiles-font': {
|
||||
type: 'raster',
|
||||
|
|
@ -96,22 +101,18 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
},
|
||||
yaogan: {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
VITE_GLOB_YAOGANYINGXIANG_SERVER,
|
||||
],
|
||||
tiles: [VITE_GLOB_YAOGANYINGXIANG_SERVER],
|
||||
tileSize: 256,
|
||||
minzoom:16,
|
||||
maxzoom:24,
|
||||
minzoom: 16,
|
||||
maxzoom: 24,
|
||||
},
|
||||
yingxiang: {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
VITE_GLOB_YINGXIANG_SERVER,
|
||||
],
|
||||
tiles: [VITE_GLOB_YINGXIANG_SERVER],
|
||||
tileSize: 256,
|
||||
minzoom:16,
|
||||
maxzoom:24,
|
||||
}
|
||||
minzoom: 16,
|
||||
maxzoom: 24,
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
|
|
@ -133,8 +134,8 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
minzoom:9,
|
||||
maxzoom:15
|
||||
minzoom: 9,
|
||||
maxzoom: 15,
|
||||
},
|
||||
{
|
||||
id: 'yingxiang',
|
||||
|
|
@ -143,9 +144,9 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
minzoom:13,
|
||||
maxzoom:24
|
||||
}
|
||||
minzoom: 13,
|
||||
maxzoom: 24,
|
||||
},
|
||||
// {
|
||||
// id: 'tdt-wms-tiles',
|
||||
// type: 'raster',
|
||||
|
|
@ -202,7 +203,7 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
color_filter.push(['all', ['==', ['get', 'tubantype'], key]]);
|
||||
color_filter.push(legend[key].colour);
|
||||
}
|
||||
color_filter.push('#FFFFFF');
|
||||
color_filter.push(layerDefaultColor.value);
|
||||
switch (type) {
|
||||
case '农用地':
|
||||
type_filter = ['==', ['get', 'typename'], '农用地'];
|
||||
|
|
@ -805,9 +806,9 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
map.flyTo({
|
||||
center: [118.30207505530701, 35.30123435040745], // 设置中心点坐标
|
||||
zoom: 8, // 设置缩放等级
|
||||
pitch:0,
|
||||
bearing: 0,
|
||||
duration: 1000
|
||||
pitch: 0,
|
||||
bearing: 0,
|
||||
duration: 1000,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -815,8 +816,6 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
mapboxgl.accessToken = MAPBOX_TOKEN;
|
||||
map = initMap();
|
||||
|
||||
|
||||
|
||||
map.on('zoom', function (e) {
|
||||
let zoom = map.getZoom();
|
||||
if (zoom > 18) {
|
||||
|
|
@ -835,7 +834,6 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
}
|
||||
}),
|
||||
map.on('load', () => {
|
||||
|
||||
//挂载mapbox-gl-utils
|
||||
U.init(map);
|
||||
mp = new MP(map);
|
||||
|
|
@ -928,12 +926,10 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
function handlerDeletePolygon() {
|
||||
mp.deleteDraw();
|
||||
}
|
||||
function handlerDrawPolygon() {
|
||||
|
||||
// 先移除查询的影像图层
|
||||
handlerDeleteHistoryLayer();
|
||||
|
||||
|
|
@ -964,95 +960,9 @@ import { GeojsonToWkt } from './src/WktGeojsonTransform';
|
|||
});
|
||||
// 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') {
|
||||
|
|
@ -1075,7 +985,11 @@ function handlerChangeTifLayer(item){
|
|||
},
|
||||
paint: {},
|
||||
});
|
||||
tifLayers.value.push(item.id);
|
||||
|
||||
if (item.type == 'historyLayer') {
|
||||
tifLayers.value.push(item.id);
|
||||
console.log('tifLayers', tifLayers.value);
|
||||
}
|
||||
|
||||
map.moveLayer(item.id, 'historyLayerFill');
|
||||
map.moveLayer(item.id, 'historyLayerLine');
|
||||
|
|
@ -1108,34 +1022,107 @@ function handlerChangeTifLayer(item){
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handlerDeleteHistoryLayer(){
|
||||
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);
|
||||
|
||||
|
||||
tifLayers.value?.forEach((item,index)=>{
|
||||
if(map.getLayer(item)){
|
||||
map.removeLayer(item);
|
||||
map.removeSource("source"+item);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
tifLayers.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
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