merge
parent
bee75e2dd5
commit
f96fa2f2ef
|
|
@ -91,12 +91,20 @@ export const SubjectRoute: AppRouteRecordRaw = {
|
||||||
title: '主题',
|
title: '主题',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
export const VideoSupervisionRoute: AppRouteRecordRaw = {
|
||||||
|
path: '/videosupervision',
|
||||||
|
name: 'videosupervision',
|
||||||
|
component: () => import('@/views/sys/exception/VideoSupervision.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '视频监管',
|
||||||
|
},
|
||||||
|
};
|
||||||
export const LargeScreenRoute: AppRouteRecordRaw = {
|
export const LargeScreenRoute: AppRouteRecordRaw = {
|
||||||
path: '/largeScreen',
|
path: '/largeScreen',
|
||||||
name: 'largeScreen',
|
name: 'largeScreen',
|
||||||
component: () => import('@/views/sys/exception/Exception.vue'),
|
component: () => import('@/views/sys/exception/Exception.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '大屏',
|
title: '数据大屏',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
export const FORMCALLPAGE_ROUTE: AppRouteRecordRaw = {
|
export const FORMCALLPAGE_ROUTE: AppRouteRecordRaw = {
|
||||||
|
|
@ -136,4 +144,5 @@ export const basicRoutes = [
|
||||||
SubjectRoute,
|
SubjectRoute,
|
||||||
FORMCALLPAGE_ROUTE,
|
FORMCALLPAGE_ROUTE,
|
||||||
LargeScreenRoute,
|
LargeScreenRoute,
|
||||||
|
VideoSupervisionRoute
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -228,10 +228,10 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
|
||||||
'paint': {
|
'paint': {
|
||||||
'fill-color': [
|
'fill-color': [
|
||||||
"case",
|
"case",
|
||||||
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //补办手续
|
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //补办手续
|
||||||
"#AD04F4",
|
"#AD04F4",
|
||||||
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //拆除复耕
|
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //拆除复耕
|
||||||
"#FDF104",
|
"#F4E004",
|
||||||
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
||||||
"#0AF703",
|
"#0AF703",
|
||||||
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
||||||
|
|
|
||||||
|
|
@ -416,7 +416,7 @@ function handlerLoadHeatLayer(heatdata){
|
||||||
1,
|
1,
|
||||||
'rgba(178,24,43,1)'
|
'rgba(178,24,43,1)'
|
||||||
],
|
],
|
||||||
'heatmap-radius': 20,
|
'heatmap-radius': 10,
|
||||||
'heatmap-opacity': 0.9
|
'heatmap-opacity': 0.9
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<div class="main-container">
|
||||||
|
<Map></Map>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import Map from './VideoSupervision/map/map.vue'
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="less" scoped>
|
||||||
|
.main-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
export const MAPBOX_TOKEN = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||||
|
|
||||||
|
export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
|
||||||
|
|
||||||
|
export const MAP_VIEWER = {
|
||||||
|
"兰山区":{
|
||||||
|
center:{lng: 118.35182370979693, lat: 35.183090621691385},
|
||||||
|
zoom:10.048587811931847
|
||||||
|
},
|
||||||
|
"河东区":{
|
||||||
|
center:{lng: 118.59697279346507, lat: 35.18490235060048},
|
||||||
|
zoom:10,
|
||||||
|
},
|
||||||
|
"罗庄区":{
|
||||||
|
center:{lng: 118.32214269732968, lat: 34.88793861991461},
|
||||||
|
zoom:10.348587811931848,
|
||||||
|
},
|
||||||
|
"高新区":{
|
||||||
|
center:{lng: 118.22321338283429, lat: 35.02848900013085},
|
||||||
|
zoom:11.197175623863698,
|
||||||
|
},
|
||||||
|
"沂河新区":{
|
||||||
|
center:{lng: 118.56406202558459, lat: 35.02402208121399},
|
||||||
|
zoom:9.848587811931848,
|
||||||
|
},
|
||||||
|
"费县":{
|
||||||
|
center:{lng: 118.07423584053117, lat: 35.25200708547465},
|
||||||
|
zoom:9.700000000000005,
|
||||||
|
},
|
||||||
|
"平邑县":{
|
||||||
|
center:{lng: 117.7943998613617, lat: 35.397797381650626},
|
||||||
|
zoom:9.5,
|
||||||
|
},
|
||||||
|
"蒙阴县":{
|
||||||
|
center:{lng: 118.16071230795704, lat: 35.706258658571166},
|
||||||
|
zoom:9.500000000000002,
|
||||||
|
},
|
||||||
|
"沂水县":{
|
||||||
|
center:{lng: 118.7262955596875, lat: 35.875369642007094},
|
||||||
|
zoom:9.500000000000002,
|
||||||
|
},
|
||||||
|
"沂南县":{
|
||||||
|
center:{lng: 118.45908849919756, lat: 35.49273684421736},
|
||||||
|
zoom:9.748587811931854,
|
||||||
|
},
|
||||||
|
"兰陵县":{
|
||||||
|
center:{lng: 118.10841982910361, lat: 34.81986176408728},
|
||||||
|
zoom:9.597175623863698,
|
||||||
|
},
|
||||||
|
"郯城县":{
|
||||||
|
center:{lng: 118.32120708234048, lat: 34.635986538650336},
|
||||||
|
zoom:9.7,
|
||||||
|
},
|
||||||
|
"临沭县":{
|
||||||
|
center:{lng: 118.74187031029359, lat: 34.850952753798644},
|
||||||
|
zoom:9.848587811931848,
|
||||||
|
},
|
||||||
|
"莒南县":{
|
||||||
|
center:{lng: 118.96807389575793, lat: 35.186365164136504},
|
||||||
|
zoom:9.848587811931848,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,671 @@
|
||||||
|
<template>
|
||||||
|
<div :id="mapContainerName" class="map-container"></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} from '@/api/tiankongdi'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { waiData } from "./linyishi";
|
||||||
|
import { getAppEnvConfig } from '@/utils/env';
|
||||||
|
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||||
|
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
|
||||||
|
|
||||||
|
const mapContainerName = ref<String>()
|
||||||
|
mapContainerName.value = "mapContainer-"+generateUUID();
|
||||||
|
//
|
||||||
|
|
||||||
|
const emits = defineEmits(["onload","handlerGetDetails"])
|
||||||
|
|
||||||
|
let map:Map;
|
||||||
|
|
||||||
|
// init map
|
||||||
|
const initMap = () => {
|
||||||
|
return new mapboxgl.Map({
|
||||||
|
container:mapContainerName.value,
|
||||||
|
language: 'zh-cmn',
|
||||||
|
projection: 'equirectangular', // wgs84参考系
|
||||||
|
style: {
|
||||||
|
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||||||
|
version: 8,
|
||||||
|
sources: {
|
||||||
|
'dianzi': {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [
|
||||||
|
`https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||||||
|
],
|
||||||
|
tileSize: 256,
|
||||||
|
},
|
||||||
|
'dianzi-biaozhu': {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [
|
||||||
|
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||||||
|
],
|
||||||
|
tileSize: 256,
|
||||||
|
},
|
||||||
|
'weixing': {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [
|
||||||
|
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
|
||||||
|
],
|
||||||
|
tileSize: 256,
|
||||||
|
},
|
||||||
|
'yingxiang': {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [
|
||||||
|
`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,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
layers: [
|
||||||
|
{
|
||||||
|
id: 'dianzi',
|
||||||
|
type: 'raster',
|
||||||
|
source: 'dianzi',
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 18,
|
||||||
|
layout: {
|
||||||
|
visibility: 'none',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'dianzi-biaozhu',
|
||||||
|
type: 'raster',
|
||||||
|
source: 'dianzi-biaozhu',
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 18,
|
||||||
|
layout: {
|
||||||
|
visibility: 'none',
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
id: 'weixing',
|
||||||
|
type: 'raster',
|
||||||
|
source: 'weixing',
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 18,
|
||||||
|
layout: {
|
||||||
|
visibility: 'visible',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'yingxiang',
|
||||||
|
type: 'raster',
|
||||||
|
source: 'yingxiang',
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 18,
|
||||||
|
layout: {
|
||||||
|
visibility: 'none',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
maxZoom:18,
|
||||||
|
minZoom:1,
|
||||||
|
zoom: 10,
|
||||||
|
pitch:0,
|
||||||
|
center: [117.984425,35.270654],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取图斑面数据
|
||||||
|
const polygonVisibility = ref<String>("none");
|
||||||
|
|
||||||
|
function handlerLoadPolygon(code="",filter="",type=""){
|
||||||
|
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 = ["any",["==", ["get", "is_illegal"], 1],["!=", ["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", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]];
|
||||||
|
break;
|
||||||
|
case "拆除复耕":
|
||||||
|
map_filter = ["all",["==", ["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];
|
||||||
|
}
|
||||||
|
|
||||||
|
// alert(map_filter);
|
||||||
|
// console.log("map_filter123",map_filter);
|
||||||
|
|
||||||
|
if(map.getSource("historyLayerLine")){
|
||||||
|
polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
|
||||||
|
map.removeLayer("historyLayerLine")
|
||||||
|
map.removeLayer("historyLayerFill")
|
||||||
|
map.removeSource("historyLayerLine")
|
||||||
|
map.removeSource("historyLayerFill");
|
||||||
|
}
|
||||||
|
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\",'],
|
||||||
|
minzoom: 1,
|
||||||
|
maxzoom: 20
|
||||||
|
},
|
||||||
|
"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",
|
||||||
|
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
||||||
|
"#F70303",
|
||||||
|
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||||||
|
"#0382F7",
|
||||||
|
["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
|
||||||
|
"#AD04F4",
|
||||||
|
["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
|
||||||
|
"#F4E004",
|
||||||
|
// 默认
|
||||||
|
"#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\",'],
|
||||||
|
//
|
||||||
|
minzoom: 1,
|
||||||
|
maxzoom: 20
|
||||||
|
},
|
||||||
|
"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",
|
||||||
|
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
||||||
|
"#F70303",
|
||||||
|
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||||||
|
"#0382F7",
|
||||||
|
["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
|
||||||
|
"#AD04F4",
|
||||||
|
["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
|
||||||
|
"#F4E004",
|
||||||
|
// 默认
|
||||||
|
"#F70303",
|
||||||
|
],
|
||||||
|
'fill-opacity': 0.4
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
map.on("click","historyLayerFill",(e)=>{
|
||||||
|
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:parseFloat((5*Math.random()).toFixed(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 handlerLoadMaskLayer(){
|
||||||
|
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],
|
||||||
|
],
|
||||||
|
waiData.DATA,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
paint: {
|
||||||
|
'fill-color': '#ffffff',
|
||||||
|
'fill-opacity': 0.8 /* 透明度 */,
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
visibility: 'visible',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载热力图图斑数据
|
||||||
|
function handlerLoadHeatLayer(heatdata){
|
||||||
|
console.log("heatdata123",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":"visible"
|
||||||
|
},
|
||||||
|
// 'paint': {
|
||||||
|
// 'heatmap-weight': [
|
||||||
|
// 'interpolate',
|
||||||
|
// ['linear'],
|
||||||
|
// ['get', 'mag'],
|
||||||
|
// 1,
|
||||||
|
// 2,
|
||||||
|
// 3,
|
||||||
|
// 4
|
||||||
|
// ],
|
||||||
|
// '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'],
|
||||||
|
// 2,
|
||||||
|
// 7,
|
||||||
|
// 11,
|
||||||
|
// 20
|
||||||
|
// ],
|
||||||
|
// 'heatmap-opacity': [
|
||||||
|
// 'interpolate',
|
||||||
|
// ['linear'],
|
||||||
|
// ['zoom'],
|
||||||
|
// 7,
|
||||||
|
// 0,
|
||||||
|
// 8,
|
||||||
|
// 1
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
'paint': {
|
||||||
|
'heatmap-weight': 1,
|
||||||
|
'heatmap-intensity': 1,
|
||||||
|
'heatmap-color': [
|
||||||
|
'interpolate',
|
||||||
|
['linear'],
|
||||||
|
['heatmap-density'],
|
||||||
|
0,
|
||||||
|
'rgba(33,102,172,0)',
|
||||||
|
0.2,
|
||||||
|
'rgba(51, 71, 255 ,0.7)',
|
||||||
|
0.4,
|
||||||
|
'rgba(51, 255, 81 ,0.7)',
|
||||||
|
0.6,
|
||||||
|
'rgba(253,219,199,0.8)',
|
||||||
|
0.8,
|
||||||
|
'rgba(255, 90, 51,0.8)',
|
||||||
|
0.9,
|
||||||
|
'rgba(214,34,8,0.9)',
|
||||||
|
1,
|
||||||
|
'rgba(178,24,43,1)'
|
||||||
|
],
|
||||||
|
'heatmap-radius': 10,
|
||||||
|
'heatmap-opacity': 0.9
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
handlerLoadConvergeLayer(heatdata);
|
||||||
|
|
||||||
|
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`,
|
||||||
|
}).then(res=>{
|
||||||
|
handlerLoadCountyLayer(res.data);
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 渲染边界数据
|
||||||
|
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 // 设置线的宽度
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
map.moveLayer("heatLayer","countLayer");
|
||||||
|
// map.moveLayer("historyLayerLine","countLayer");
|
||||||
|
// map.moveLayer("historyLayerFill","countLayer");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 控制图层显示隐层
|
||||||
|
/**
|
||||||
|
* 热力图：heatLayer
|
||||||
|
*
|
||||||
|
* 图斑线：historyLayerLine
|
||||||
|
*
|
||||||
|
* 图斑面：historyLayerFill
|
||||||
|
*
|
||||||
|
* 行政区划：countyLayer
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
function handlerChangeLayerVisible(layerName,checked){
|
||||||
|
if (checked) {
|
||||||
|
map.setLayoutProperty(layerName, 'visibility', 'visible');
|
||||||
|
} else {
|
||||||
|
map.setLayoutProperty(layerName, 'visibility', 'none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换县区
|
||||||
|
function handlerChangeCounty(county,type=""){
|
||||||
|
handlerDealCountry(county.name);
|
||||||
|
handlerLoadPolygon(county.code,type);
|
||||||
|
handlerDealPoint(county.code);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载汇聚图
|
||||||
|
function handlerLoadConvergeLayer(geojson){
|
||||||
|
if(map.getSource("earthquakes")){
|
||||||
|
map.getSource("earthquakes").setData(geojson);
|
||||||
|
}else{
|
||||||
|
map.addSource('earthquakes', {
|
||||||
|
type: 'geojson',
|
||||||
|
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
|
||||||
|
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
|
||||||
|
data: geojson,
|
||||||
|
cluster: true,
|
||||||
|
clusterMaxZoom: 14, // Max zoom to cluster points on
|
||||||
|
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addLayer({
|
||||||
|
id: 'clusters',
|
||||||
|
type: 'circle',
|
||||||
|
source: 'earthquakes',
|
||||||
|
filter: ['has', 'point_count'],
|
||||||
|
layout:{
|
||||||
|
'visibility':'none',
|
||||||
|
},
|
||||||
|
paint: {
|
||||||
|
// Use step expressions (https://docs.mapbox.com/style-spec/reference/expressions/#step)
|
||||||
|
// with three steps to implement three types of circles:
|
||||||
|
// * Blue, 20px circles when point count is less than 100
|
||||||
|
// * Yellow, 30px circles when point count is between 100 and 750
|
||||||
|
// * Pink, 40px circles when point count is greater than or equal to 750
|
||||||
|
'circle-color': [
|
||||||
|
'step',
|
||||||
|
['get', 'point_count'],
|
||||||
|
// '#51bbd6',
|
||||||
|
// 100,
|
||||||
|
// '#f1f075',
|
||||||
|
// 750,
|
||||||
|
// '#f28cb1'
|
||||||
|
|
||||||
|
'rgba(51, 71, 255 ,0.6)',
|
||||||
|
50,
|
||||||
|
'rgba(51, 255, 81 ,0.6)',
|
||||||
|
200,
|
||||||
|
'rgba(253,219,199,0.9)',
|
||||||
|
300,
|
||||||
|
'rgba(255, 90, 51,1)',
|
||||||
|
400,
|
||||||
|
'rgba(214,34,8,0.9)',
|
||||||
|
700,
|
||||||
|
'rgba(178,24,43,1)'
|
||||||
|
|
||||||
|
],
|
||||||
|
'circle-radius': [
|
||||||
|
'step',
|
||||||
|
['get', 'point_count'],
|
||||||
|
20,
|
||||||
|
100,
|
||||||
|
30,
|
||||||
|
750,
|
||||||
|
40
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addLayer({
|
||||||
|
id: 'cluster-count',
|
||||||
|
type: 'symbol',
|
||||||
|
source: 'earthquakes',
|
||||||
|
filter: ['has', 'point_count'],
|
||||||
|
layout: {
|
||||||
|
'visibility':'none',
|
||||||
|
'text-field': ['get', 'point_count_abbreviated'],
|
||||||
|
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
|
||||||
|
'text-size': 12
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addLayer({
|
||||||
|
id: 'unclustered-point',
|
||||||
|
type: 'circle',
|
||||||
|
source: 'earthquakes',
|
||||||
|
filter: ['!', ['has', 'point_count']],
|
||||||
|
layout:{
|
||||||
|
'visibility':'none',
|
||||||
|
},
|
||||||
|
paint: {
|
||||||
|
'circle-color': '#11b4da',
|
||||||
|
'circle-radius': 4,
|
||||||
|
'circle-stroke-width': 1,
|
||||||
|
'circle-stroke-color': '#fff'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(map.getLayer('clusters')){
|
||||||
|
map.moveLayer("clusters","heatLayer");
|
||||||
|
map.moveLayer("cluster-count","heatLayer")
|
||||||
|
map.moveLayer("unclustered-point","heatLayer")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
onMounted(()=>{
|
||||||
|
mapboxgl.accessToken = MAPBOX_TOKEN;
|
||||||
|
map = initMap();
|
||||||
|
map.on("load",()=>{
|
||||||
|
// handlerDealCountry();
|
||||||
|
// handlerDealPoint();
|
||||||
|
// handlerLoadPolygon();
|
||||||
|
handlerLoadMaskLayer();
|
||||||
|
emits("onload");
|
||||||
|
map.on("click",(e)=>{
|
||||||
|
var center = map.getCenter(); // 获取当前视图中心点
|
||||||
|
var zoom = map.getZoom(); // 获取当前视图缩放级别
|
||||||
|
console.log(zoom);
|
||||||
|
console.log(center);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 抛出函数
|
||||||
|
defineExpose({
|
||||||
|
handlerChangeCounty, // 切换县区
|
||||||
|
handlerChangeLayerVisible, // 控制图层显示隐藏
|
||||||
|
handlerLoadPolygon,
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style type="less" scoped>
|
||||||
|
.map-container{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
::v-deep .mapboxgl-ctrl-logo{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue