963 lines
30 KiB
Vue
963 lines
30 KiB
Vue
<template>
|
||
<div :id="mapContainerName" class="map-container">
|
||
<div class="search-container-box">
|
||
<SearchComponent @toPosition="toPosition" @handlerFilter="handlerFilter"></SearchComponent>
|
||
</div>
|
||
<div class="map-type-switch-container">
|
||
<div class="switch-button" v-if="mapAngle == '3D'" @click="handlerChangeMapAngle()">
|
||
<TableOutlined style="font-size:20px;position:relative;top:1px;left:-6px;" />
|
||
<span> 二维地图</span>
|
||
</div>
|
||
|
||
<div class="switch-button" v-else @click="handlerChangeMapAngle()">
|
||
<GlobalOutlined style="font-size:20px;position:relative;top:1px;left:-6px;"/>
|
||
<span> 三维地图</span>
|
||
</div>
|
||
|
||
<div class="home-button" @click="handlerInitialize">
|
||
<HomeOutlined />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import {ref,onMounted,defineExpose,defineEmits} from "vue";
|
||
import { generateUUID} from '@/components/MapboxMaps/src/tool'
|
||
import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||
import mapboxgl,{ Map, Popup } from 'mapbox-gl';
|
||
import {MAPBOX_TOKEN,TINADITU_TOKEN,MAP_VIEWER} from './config.ts'
|
||
import heatGeoJson from './data.json'
|
||
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();
|
||
|
||
//
|
||
import { TableOutlined, GlobalOutlined,HomeOutlined} from '@ant-design/icons-vue';
|
||
|
||
const emits = defineEmits(["onload","handlerGetDetails"])
|
||
|
||
|
||
let map:Map;
|
||
|
||
|
||
// init map
|
||
const initMap = () => {
|
||
return new mapboxgl.Map({
|
||
container:mapContainerName.value,
|
||
language: 'zh-cmn',
|
||
projection: 'globe', // wgs84参考系
|
||
style: {
|
||
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||
version: 8,
|
||
sources: {
|
||
'raster-tiles': {
|
||
type: 'raster',
|
||
tiles: [
|
||
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||
],
|
||
tileSize: 256,
|
||
},
|
||
'raster-tiles-font': {
|
||
type: 'raster',
|
||
tiles: [
|
||
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||
],
|
||
tileSize: 256,
|
||
},
|
||
// 'raster-tiles-geo': {
|
||
// type: 'raster',
|
||
// tiles: [
|
||
// VITE_GLOB_YINGXIANG_SERVER,
|
||
// ],
|
||
// tileSize: 256,
|
||
// }
|
||
},
|
||
layers: [
|
||
{
|
||
id: 'tdt-vec-tiles',
|
||
type: 'raster',
|
||
source: 'raster-tiles-font',
|
||
maxZoom:32,
|
||
},
|
||
{
|
||
id: 'tdt-img-tiles',
|
||
type: 'raster',
|
||
source: 'raster-tiles',
|
||
maxZoom:32,
|
||
},
|
||
// {
|
||
// id: 'tdt-wms-tiles',
|
||
// type: 'raster',
|
||
// source: 'raster-tiles-geo',
|
||
// },
|
||
],
|
||
},
|
||
maxZoom: 22,
|
||
minZoom:8,
|
||
zoom: 8,
|
||
pitch:0,
|
||
center: [118.30207505530701, 35.30123435040745],
|
||
});
|
||
};
|
||
|
||
// 获取图斑面数据
|
||
const polygonVisibility = ref<String>("visible");
|
||
|
||
const isRootLevel = ref<Boolean>(false)
|
||
async function handlerCheckUserOrgs(){
|
||
let orgs =await getUserOrgs({});
|
||
let isLevel = orgs.find((item,index)=>{
|
||
return (item.name == "临沂市" || item.parentId == 0 || item.parentName == "根节点");
|
||
})
|
||
if(isLevel){
|
||
isRootLevel.value = true;
|
||
handlerLoadPolygon("","","","1")
|
||
}else{
|
||
isRootLevel.value = false;
|
||
handlerLoadPolygon()
|
||
}
|
||
}
|
||
|
||
function handlerLoadPolygon(code="",filter="",type="",level=""){
|
||
let sql_filter;
|
||
if(code){
|
||
sql_filter = "&filter=\"countyid\"=\'"+code+"\'";
|
||
}else{
|
||
sql_filter=""
|
||
}
|
||
let map_filter;
|
||
switch(filter){
|
||
case "合法":
|
||
map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
|
||
break;
|
||
case "其他":
|
||
map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
|
||
break;
|
||
case "补办手续":
|
||
map_filter = ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5],["==", ["get", "weifaleixing"], 0]];
|
||
break;
|
||
case "拆除复耕":
|
||
map_filter = ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5],["==", ["get", "weifaleixing"], 0]];
|
||
break;
|
||
case "违法":
|
||
map_filter = ["any",
|
||
["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],
|
||
["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]
|
||
];
|
||
break;
|
||
default:
|
||
map_filter = ["!=", ["get", "gid"], 0];
|
||
}
|
||
let type_filter;
|
||
switch(type){
|
||
case "农用地":
|
||
type_filter = ["==", ["get", "typename"], "农用地"];
|
||
break;
|
||
case "建设用地":
|
||
type_filter = ["==", ["get", "typename"], "建设用地"];
|
||
break;
|
||
case "推堆土":
|
||
type_filter = ["==", ["get", "typename"], "推堆土"];
|
||
break;
|
||
}
|
||
if(filter && type){
|
||
map_filter.push(type_filter);
|
||
}else if(!filter && type){
|
||
map_filter = ["all",["!=", ["get", "gid"], 0],type_filter];
|
||
}
|
||
|
||
|
||
if(map.getSource("historyLayerLine")){
|
||
polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
|
||
map.removeLayer("historyLayerLine")
|
||
map.removeLayer("historyLayerFill")
|
||
map.removeSource("historyLayerLine")
|
||
map.removeSource("historyLayerFill");
|
||
}
|
||
|
||
if(level){
|
||
|
||
}else{
|
||
sql_filter = '&filter=streetid in ( select CAST(\"OrgId\" AS VARCHAR) from sys_userorg where \"UserId\" = '+localStorage.getItem('userid')+') or countyid in ( select CAST(\"OrgId\" AS VARCHAR) from sys_userorg where \"UserId\" = '+localStorage.getItem('userid')+')'
|
||
}
|
||
|
||
map.addLayer(
|
||
{
|
||
'id': 'historyLayerLine',
|
||
'type': 'line',
|
||
'source': {
|
||
type: 'vector',
|
||
tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",\"weifaleixing\",'],
|
||
minzoom: 1,
|
||
maxzoom: 20,
|
||
'cluster': true, // 启用聚合
|
||
'clusterMaxZoom': 0, // 最大聚合缩放级别
|
||
'clusterRadius': 0 // 聚合半径
|
||
},
|
||
"source-layer": "view_drone_shp_data",
|
||
'layout': {
|
||
'line-join': 'round',
|
||
'line-cap': 'round',
|
||
'visibility':polygonVisibility.value,
|
||
},
|
||
'filter':map_filter,
|
||
'paint': {
|
||
'line-color': [
|
||
"case",
|
||
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
||
"#0AF703",
|
||
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||
"#0382F7",
|
||
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5],["==", ["get", "weifaleixing"], 0]], //补办手续
|
||
"#AD04F4",
|
||
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5],["==", ["get", "weifaleixing"], 0]], //拆除复耕
|
||
"#F4E004",
|
||
["any",["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]], //违法
|
||
"#F70303",
|
||
// 默认
|
||
"#F70303",
|
||
],
|
||
'line-width': 5
|
||
}
|
||
}
|
||
)
|
||
map.addLayer({
|
||
'id': 'historyLayerFill',
|
||
'type': 'fill',
|
||
'source': {
|
||
type: 'vector',
|
||
tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",\"weifaleixing\",'],
|
||
minzoom: 1,
|
||
maxzoom: 20,
|
||
cluster: false
|
||
},
|
||
"source-layer": "view_drone_shp_data",
|
||
'filter':map_filter,
|
||
'layout':{
|
||
'visibility':polygonVisibility.value,
|
||
},
|
||
'paint': {
|
||
'fill-color': [
|
||
"case",
|
||
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
||
"#0AF703",
|
||
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||
"#0382F7",
|
||
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]], //补办手续
|
||
"#AD04F4",
|
||
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5]], //拆除复耕
|
||
"#F4E004",
|
||
["any",["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]], //违法
|
||
"#F70303",
|
||
// 默认
|
||
"#F70303",
|
||
],
|
||
'fill-opacity': 0.5
|
||
}
|
||
})
|
||
emits("onload");
|
||
|
||
map.on("click","historyLayerFill",(e)=>{
|
||
console.log("handlerGetDetails",e.features[0].properties)
|
||
emits("handlerGetDetails",e.features[0].properties);
|
||
})
|
||
}
|
||
|
||
// 获取和处理图斑点数据
|
||
const currentCode = ref("")
|
||
async function handlerDealPoint(code=""){
|
||
let sql_filter;
|
||
if(code){
|
||
sql_filter = "\"countyid\"=\'"+code+"\'";
|
||
}else{
|
||
sql_filter=""
|
||
}
|
||
let points = await getPolygonCenter({tablename:"view_drone_shp_data",filter:sql_filter})
|
||
|
||
let heatdata = {
|
||
type: "FeatureCollection",
|
||
features:[]
|
||
}
|
||
points?.forEach((item,index)=>{
|
||
let geometry = WktToGeojson(item['centroid_point']);
|
||
let feature = {
|
||
geometry:geometry,
|
||
properties:{
|
||
mag:1
|
||
}
|
||
}
|
||
heatdata.features.push(feature);
|
||
})
|
||
|
||
handlerLoadHeatLayer(heatdata);
|
||
|
||
if(map.getLayer('clusters')){
|
||
map.moveLayer("clusters","heatLayer");
|
||
map.moveLayer("cluster-count","heatLayer")
|
||
map.moveLayer("unclustered-point","heatLayer")
|
||
}
|
||
|
||
}
|
||
|
||
function toPosition(item){
|
||
handlerLocation(item,17.2);
|
||
handlerLoadSearchResult(item);
|
||
}
|
||
|
||
function handlerFilter(item){
|
||
|
||
// handlerLoadPolygon("",item);
|
||
if(isRootLevel.value){
|
||
handlerLoadPolygon("",item,"","1");
|
||
}else{
|
||
handlerLoadPolygon("",item,"","");
|
||
}
|
||
}
|
||
function handlerLoadSearchResult(item) {
|
||
let geojson = {
|
||
type: "FeatureCollection",
|
||
features: [
|
||
{
|
||
type: "Feature",
|
||
geometry: {
|
||
type: "Point",
|
||
coordinates: item.location,
|
||
},
|
||
properties: {
|
||
name: item.id,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
// if (map.getSource("searchSource")) {
|
||
// map.getSource("searchSource").setData(geojson);
|
||
// } else {
|
||
// map.addSource("searchSource", {
|
||
// type: "geojson",
|
||
// data: geojson,
|
||
// });
|
||
// }
|
||
|
||
|
||
// if (map.hasImage("searchIcon")) {
|
||
// } else {
|
||
// map.loadImage(
|
||
// "/public/statistical/search-icon.png",
|
||
// function (error, image) {
|
||
// if (error) throw error;
|
||
// map.addImage("searchIcon", image);
|
||
// }
|
||
// );
|
||
// }
|
||
|
||
// if (map.getLayer("searchLayer")) {
|
||
// } else {
|
||
// map.addLayer({
|
||
// id: "searchLayer",
|
||
// type: "symbol",
|
||
// source: "searchSource",
|
||
// layout: {
|
||
// "icon-image": "searchIcon",
|
||
// "icon-size": 1.2,
|
||
// "text-field": "{name}",
|
||
// "text-offset": [0, 2],
|
||
// "text-anchor": "top",
|
||
// "text-size": 12,
|
||
// },
|
||
// paint: {
|
||
// "text-color": "#fff",
|
||
// },
|
||
// });
|
||
// }
|
||
}
|
||
// 加载热力图图斑数据
|
||
function handlerLoadHeatLayer(heatdata){
|
||
if(map.getSource("heatSource")){
|
||
map.getSource("heatSource").setData(heatdata);
|
||
}else{
|
||
map.addSource('heatSource', {
|
||
'type': 'geojson',
|
||
'data': heatdata
|
||
});
|
||
map.addLayer(
|
||
{
|
||
'id': 'heatLayer',
|
||
'type': 'heatmap',
|
||
'source': 'heatSource',
|
||
'maxzoom': 13,
|
||
'minzoom':7,
|
||
'layout':{
|
||
"visibility":"none"
|
||
},
|
||
'paint': {
|
||
'heatmap-weight': [
|
||
'interpolate',
|
||
['linear'],
|
||
['get', 'mag'],
|
||
0,
|
||
1,
|
||
7,
|
||
0
|
||
],
|
||
'heatmap-intensity': [
|
||
'interpolate',
|
||
['linear'],
|
||
['zoom'],
|
||
0,
|
||
1,
|
||
9,
|
||
3
|
||
],
|
||
'heatmap-color': [
|
||
'interpolate',
|
||
['linear'],
|
||
['heatmap-density'],
|
||
0,
|
||
'rgba(33,102,172,0)',
|
||
0.2,
|
||
'rgba(103,169,207,0.8)',
|
||
0.4,
|
||
'rgba(209,229,240,0.8)',
|
||
0.6,
|
||
'rgba(253,219,199,0.8)',
|
||
0.8,
|
||
'rgba(239,138,98,0.8)',
|
||
1,
|
||
'rgba(178,24,43,0.8)'
|
||
],
|
||
'heatmap-radius': [
|
||
'interpolate',['linear'],['zoom'],
|
||
4,
|
||
7,
|
||
11,
|
||
20
|
||
],
|
||
'heatmap-opacity': [
|
||
'interpolate',
|
||
['linear'],
|
||
['zoom'],
|
||
7,
|
||
0,
|
||
8,
|
||
1
|
||
]
|
||
}
|
||
}
|
||
);
|
||
}
|
||
|
||
|
||
|
||
if(map.getLayer('heatLayer')){
|
||
map.moveLayer('heatLayer', 'historyLayerLine');
|
||
map.moveLayer('heatLayer', 'historyLayerFill');
|
||
if(map.getLayer('clusters')){
|
||
map.moveLayer("clusters","heatLayer");
|
||
map.moveLayer("cluster-count","heatLayer")
|
||
map.moveLayer("unclustered-point","heatLayer")
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
// 地图定位
|
||
function handlerLocation(lngLat,zoom){
|
||
map.flyTo({
|
||
center: lngLat,
|
||
zoom: zoom,
|
||
bearing: 0,
|
||
speed: 1, // 飞行速度
|
||
curve: 2, // 飞行曲线
|
||
essential: true,
|
||
easing(t) {
|
||
// 飞行动画函数
|
||
return t;
|
||
},
|
||
});
|
||
};
|
||
|
||
// 获取县区边界数据
|
||
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")
|
||
}
|
||
}
|
||
}
|
||
|
||
// 渲染县界白板图层
|
||
const handlerLoadPanelLayer = (geojson)=>{
|
||
if(map.getSource("countyPanelLayer")){
|
||
map.getSource("countyPanelSource").setData(geojson);
|
||
}else{
|
||
map.addSource("countyPanelSource",{
|
||
type:"geojson",
|
||
data:geojson
|
||
})
|
||
map.addLayer(
|
||
{
|
||
"id": "countyPanelLayer",
|
||
"type": "fill",
|
||
"source": "countyPanelSource",
|
||
"layout":{
|
||
'visibility':'none'
|
||
},
|
||
"paint": {
|
||
'fill-color':[
|
||
'case',
|
||
['==', ['get', 'xzqdm_1'], "371302"],
|
||
"#49B0F9",
|
||
['==', ['get', 'xzqdm_1'], "371311"],
|
||
"#3EABFA",
|
||
['==', ['get', 'xzqdm_1'], "371312"],
|
||
"#27A2FB",
|
||
['==', ['get', 'xzqdm_1'], "3713122"],
|
||
"#34E6B1",
|
||
['==', ['get', 'xzqdm_1'], "3713001"],
|
||
"#1099FB",
|
||
['==', ['get', 'xzqdm_1'], "3713271"],
|
||
"#0695FB",
|
||
['==', ['get', 'xzqdm_1'], "371321"],
|
||
"#058DEE",
|
||
['==', ['get', 'xzqdm_1'], "371322"],
|
||
"#09C78E",
|
||
['==', ['get', 'xzqdm_1'], "371323"],
|
||
"#047DD4",
|
||
['==', ['get', 'xzqdm_1'], "371324"],
|
||
"#94D515",
|
||
['==', ['get', 'xzqdm_1'], "371325"],
|
||
"#0568B0",
|
||
['==', ['get', 'xzqdm_1'], "371326"],
|
||
"#3EABFA",
|
||
['==', ['get', 'xzqdm_1'], "371327"],
|
||
"#49B0F9",
|
||
['==', ['get', 'xzqdm_1'], "371328"],
|
||
"#27A2FB",
|
||
['==', ['get', 'xzqdm_1'], "371329"],
|
||
"#94D515",
|
||
"#1099FB",
|
||
],
|
||
'fill-opacity':0.9
|
||
}
|
||
},
|
||
)
|
||
|
||
|
||
// if(map.getLayer("countyPanelLayer")){
|
||
// map.moveLayer("countyPanelLayer","countyLayer");
|
||
// map.moveLayer("countyPanelLayer","historyLayerLine");
|
||
// map.moveLayer("countyPanelLayer","historyLayerFill");
|
||
// }
|
||
|
||
}
|
||
}
|
||
|
||
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);
|
||
});
|
||
|
||
}
|
||
|
||
// 加载地图遮罩
|
||
function handlerLoadMaskLayer(geojson){
|
||
map.addLayer({
|
||
//蒙版图层 //通过边界数据反选 达到挖洞效果
|
||
id: 'mb-tag',
|
||
type: 'fill',
|
||
source: {
|
||
type: 'geojson',
|
||
data: {
|
||
type: 'Feature',
|
||
geometry: {
|
||
type: 'Polygon',
|
||
coordinates: [
|
||
[
|
||
// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
|
||
[-180, 90],
|
||
[180, 90],
|
||
[180, -90],
|
||
[-180, -90],
|
||
],
|
||
geojson.DATA,
|
||
],
|
||
},
|
||
},
|
||
},
|
||
paint: {
|
||
'fill-color': '#ffffff',
|
||
'fill-opacity': 1 /* 透明度 */,
|
||
},
|
||
layout: {
|
||
visibility: 'visible',
|
||
},
|
||
});
|
||
}
|
||
|
||
|
||
|
||
// 获取乡镇数据
|
||
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);
|
||
})
|
||
|
||
}
|
||
// 渲染乡镇边界数据
|
||
const handlerLoadStreetLayer = (geojson)=>{
|
||
// 绘制线
|
||
if(map.getSource("streetSource")){
|
||
map.getSource("streetSource").setData(geojson);
|
||
}else{
|
||
map.addSource("streetSource",{
|
||
type:"geojson",
|
||
data:geojson,
|
||
minzoom:10,
|
||
maxzoom:24,
|
||
})
|
||
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,
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
let VillageGeojson= {};
|
||
const handlerLoadVillageLayer = ()=>{
|
||
// 绘制线
|
||
if(map.getSource("villageSource")){
|
||
map.getSource("villageSource").setData(VillageGeojson);
|
||
}else{
|
||
map.addSource("villageSource",{
|
||
type:"geojson",
|
||
data:VillageGeojson,
|
||
minzoom:12,
|
||
maxzoom:24,
|
||
})
|
||
map.addLayer(
|
||
{
|
||
"id": "villageLayer",
|
||
"type": "line",
|
||
"source": "villageSource",
|
||
"paint": {
|
||
'line-color': '#42befb', // 设置线的颜色
|
||
'line-width':2 // 设置线的宽度
|
||
},
|
||
minzoom:12,
|
||
maxzoom:24,
|
||
}
|
||
)
|
||
|
||
map.addLayer({
|
||
'id': 'villageLabelLayer',
|
||
'type': 'symbol',
|
||
'source': 'villageSource',
|
||
'layout': {
|
||
'text-field': ['get', 'zldwmc'],
|
||
'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,
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
}
|
||
|
||
// 控制图层显示隐层
|
||
/**
|
||
* 热力图：heatLayer
|
||
*
|
||
* 图斑线：historyLayerLine
|
||
*
|
||
* 图斑面：historyLayerFill
|
||
*
|
||
* 行政区划：countyLayer
|
||
*
|
||
*
|
||
*
|
||
* */
|
||
function handlerChangeLayerVisible(layerName,checked){
|
||
if (checked) {
|
||
map.setLayoutProperty(layerName, 'visibility', 'visible');
|
||
} else {
|
||
map.setLayoutProperty(layerName, 'visibility', 'none');
|
||
}
|
||
|
||
if(layerName == 'countyPanelLayer'){
|
||
if(map.getLayer("countyPanelLayer")){
|
||
map.moveLayer("countyPanelLayer","streetLayer");
|
||
map.moveLayer("countyPanelLayer","streetLabelLayer");
|
||
map.moveLayer("countyPanelLayer","countyLayer");
|
||
map.moveLayer("countyPanelLayer","historyLayerFill");
|
||
map.moveLayer("countyPanelLayer","historyLayerLine");
|
||
}
|
||
}
|
||
}
|
||
|
||
// 切换县区
|
||
function handlerChangeCounty(county,type=""){
|
||
handlerLoadPolygon(county.code,type);
|
||
handlerDealPoint(county.code);
|
||
handlerDealCountry(county.name);
|
||
|
||
}
|
||
|
||
const mapAngle = ref<String>( "2D")
|
||
|
||
const handlerChangeMapAngle = ()=>{
|
||
if(map){
|
||
const currentPitch = map.getPitch();
|
||
if (currentPitch === 0) {
|
||
map.easeTo({ pitch: 60, bearing: 0, duration: 1000 });
|
||
map.dragRotate.enable(); // 启用拖动旋转
|
||
map.pitchWithRotate = true; // 启用旋转时俯仰变化
|
||
mapAngle.value = "3D";
|
||
} else {
|
||
map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
|
||
map.dragRotate.disable(); // 禁用拖动旋转
|
||
map.pitchWithRotate = false; // 禁用旋转时俯仰变化
|
||
mapAngle.value = "2D";
|
||
}
|
||
|
||
}
|
||
}
|
||
// 回到初始视角
|
||
const handlerInitialize = ()=>{
|
||
map.flyTo({
|
||
center: [118.30207505530701, 35.30123435040745], // 设置中心点坐标
|
||
zoom: 8, // 设置缩放等级
|
||
});
|
||
|
||
|
||
}
|
||
|
||
onMounted(()=>{
|
||
mapboxgl.accessToken = MAPBOX_TOKEN;
|
||
map = initMap();
|
||
|
||
|
||
|
||
map.on("load",()=>{
|
||
|
||
// map.addLayer({
|
||
// 'id': 'wms-test-layer',
|
||
// 'type': 'raster',
|
||
// 'source': {
|
||
// 'type': 'raster',
|
||
// 'tiles': [
|
||
// // 'http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'
|
||
// 'http://192.168.10.132:8080/geoserver/ne/wms?service=WMS&version=1.1.0&request=GetMap&layers=ne:linyitif&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'
|
||
// ],
|
||
// 'tileSize': 256
|
||
// },
|
||
// 'paint': {}
|
||
// });;
|
||
|
||
handlerCheckUserOrgs();
|
||
// handlerLoadMaskLayer();
|
||
getMaskData();
|
||
handlerDealStreet();
|
||
handlerDealCountry();
|
||
|
||
map.flyTo({
|
||
center: [118.30207505530701, 35.30123435040745],
|
||
zoom: 8,
|
||
}),
|
||
map.on("click",(e)=>{
|
||
var center = map.getCenter(); // 获取当前视图中心点
|
||
var zoom = map.getZoom(); // 获取当前视图缩放级别
|
||
console.log(zoom);
|
||
console.log(center);
|
||
})
|
||
|
||
// 添加地形数据
|
||
map.addSource('mapbox-dem', {
|
||
'type': 'raster-dem',
|
||
'tiles':[VITE_GLOB_API_URL_VAR.value+'/mapbox_terrain/{z}/{x}/{y}.png'],
|
||
'tileSize': 256,
|
||
'maxzoom': 13,
|
||
'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";
|
||
|
||
})
|
||
})
|
||
|
||
|
||
// 抛出函数
|
||
defineExpose({
|
||
handlerChangeCounty, // 切换县区
|
||
handlerChangeLayerVisible, // 控制图层显示隐藏
|
||
handlerLoadPolygon,
|
||
});
|
||
|
||
</script>
|
||
<style type="less" scoped>
|
||
.map-container{
|
||
width:100%;
|
||
height:100%;
|
||
position:relative;
|
||
}
|
||
.search-container-box{
|
||
position:absolute;
|
||
width:330px;
|
||
height:40px;
|
||
top:72px;
|
||
left:73px;
|
||
z-index:9999;
|
||
}
|
||
|
||
.map-type-switch-container{
|
||
width:280px;
|
||
height:40px;
|
||
position:absolute;
|
||
top:72px;
|
||
right:23px;
|
||
z-index:9999;
|
||
font-size:22px;
|
||
color:#fff;
|
||
text-align:center;
|
||
line-height:40px;
|
||
cursor:pointer;
|
||
}
|
||
.map-type-switch-container .switch-button{
|
||
line-height:40px;
|
||
width:150px;
|
||
height:40px;
|
||
float:left;
|
||
background: url(/map/change-view-btn.png);
|
||
background-size:100% 100%;
|
||
}
|
||
|
||
.map-type-switch-container .switch-button span{
|
||
font-size:14px;
|
||
}
|
||
|
||
.home-button{
|
||
width:100px;
|
||
height:100px;
|
||
background:url(/map/home-btn.png);
|
||
background-size: 100% 100%;
|
||
float:right;
|
||
position:relative;
|
||
top:-25px;
|
||
line-height:100px;
|
||
text-align:center;
|
||
}
|
||
::v-deep .mapboxgl-ctrl-logo{
|
||
display: none!important;
|
||
}
|
||
</style>
|