HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge

dianlixunjian
徐景良 2024-08-07 17:09:33 +08:00
parent bee75e2dd5
commit f96fa2f2ef
9 changed files with 295310 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/router/routes/index.ts
View File

@ -91,12 +91,20 @@ export const SubjectRoute: AppRouteRecordRaw = {
title: '主题',
},
};
export const VideoSupervisionRoute: AppRouteRecordRaw = {
path: '/videosupervision',
name: 'videosupervision',
component: () => import('@/views/sys/exception/VideoSupervision.vue'),
meta: {
title: '视频监管',
},
};
export const LargeScreenRoute: AppRouteRecordRaw = {
path: '/largeScreen',
name: 'largeScreen',
component: () => import('@/views/sys/exception/Exception.vue'),
meta: {
title: '大屏',
title: '数据大屏',
},
};
export const FORMCALLPAGE_ROUTE: AppRouteRecordRaw = {
@ -136,4 +144,5 @@ export const basicRoutes = [
SubjectRoute,
FORMCALLPAGE_ROUTE,
LargeScreenRoute,
VideoSupervisionRoute
];

6
src/views/sys/exception/Converge/index.vue
View File

@ -228,10 +228,10 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
'paint': {
'fill-color': [
"case",
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //补办手续
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //补办手续
"#AD04F4",
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //拆除复耕
"#FDF104",
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //拆除复耕
"#F4E004",
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
"#0AF703",
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法

2
src/views/sys/exception/LargeScreenMap/index.vue
View File

@ -416,7 +416,7 @@ function handlerLoadHeatLayer(heatdata){
1,
'rgba(178,24,43,1)'
],
'heatmap-radius': 20,
'heatmap-radius': 10,
'heatmap-opacity': 0.9
}
}

18
src/views/sys/exception/VideoSupervision.vue Normal file
View File

@ -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>

63
src/views/sys/exception/VideoSupervision/map/config.ts Normal file
View File

@ -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,
}
}

108475
src/views/sys/exception/VideoSupervision/map/data.json Normal file
View File

File diff suppressed because it is too large Load Diff

186069
src/views/sys/exception/VideoSupervision/map/linyishi.ts Normal file
View File

File diff suppressed because it is too large Load Diff

671
src/views/sys/exception/VideoSupervision/map/map.vue Normal file
View File

@ -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>

0
src/views/sys/exception/VideoSupervision/uav/uav.vue Normal file
View File