GIS在县区级智慧环保平台应用
运用大数据、AI技术构建县区生态环境智慧监管平台，实现监测、预警、预防、处置全过程闭环管理。聚焦水、气、固废问题深度分析决策，为基层环保人员提供可靠依据，切实解决问题，推动监管精细化、决策可视化
·
技术参照实现：
java实现克里金插值导出geojson矢量数据（kriging）_克里金插值法 java实现-CSDN博客
高斯羽烟gis应用java实现模型计算_java生成高斯羽烟等值面格网点-CSDN博客
java实现大气质量插值图及六项污染物插值图图片导出_java 根据数据生成插值图-CSDN博客
iClientOL实现前端gis开发架构_前端iclientol-CSDN博客
运用大数据、AI技术构建县区生态环境智慧监管平台，实现监测、预警、预防、处置全过程闭环管理。聚焦水、气、固废问题深度分析决策，为基层环保人员提供可靠依据，切实解决问题，推动监管精细化、决策可视化。
业务痛点
方案概述
运用大数据、人工智能等技术，结合县区生态环境管理业务的具体需求，构建县区生态环境智慧监管平台，实现对环境监测、分析预警、风险预防、任务处理的全过程监管，实现生态环境问题从自动监测识别到问题解决的闭环式管理；平台围绕突出的水环境、气环境、固体废物等问题进行深度的形势和决策分析，利用科学的技术方法向县区基层环保人员提供可靠的数据依据，切实解决县区生态环境问题。
方案组成
业务场景
环境数据中心
环保大数据中心含数据基础、应用支撑平台。数据基础平台汇数据、维数据库、提服务，支持更新、报表导出。应用支撑平台供用户管理、权限、API等功能及统一用户管理、消息、日志等应用管理。
数据服务
数据集成
智慧环保一张图
将分散的空气质量、水质、污染源、生态资源等各类环境信息，整合汇聚在一张电子地图上，实现环境状况“一图感知”、问题“一图定位”、风险“一图预警”、治理“一图调度”。做到以图说数据、以图看分析、以图做决策。
可视化分析
智能决策
环境综合监管
平台对水、气、土、声、废、渣等前端物联网数据进行汇聚和整合，实现实时监测、智能查询、实时报警、智能分析等，平台全面展示区域环境质量状况、污染源排污情况，为环境监督管理和治理规划提供基础数据和决策支持。
智能分析
全景展示
智慧监督管理
通过智能环境综合监测监控平台实时报警信息触发巡查任务，提供移动端监管手段，为领导、环境管理人员及一线工作人员提供移动办公功能。实现智能环境监控、智能预警、任务处置全流程管理。
移动监管联动
智能预警
环境应急管理
建立智慧环境应急管理系统,提升生态环境系统的环境应急处置能力, 为环保行政主管部门提供应对突发环境事件的综合管理平台,平台实现对环境突发事件接报、处置、指挥、调度、评估的全过程闭环管理。
应急处置
综合指挥
一企一档
污染源企业建立信息管理系统，便于监管部门的监督管理，企业档案信息包括企业基本信息、产品信息、产废信息、排污许可证信息、企业披露信息、污染源在线监测信息等，为环保部门执法和日常管理提供支持。
企业监督管理
典型案例
经济开发区环境监测预警平台
经济开发区环境监测预警平台，多维度环境监管智能化管理系统。涵盖大气监测、水环境监测、污染源监测、雨污管网监测、非现场监管、“一企一档” 、及专家决策系统等核心功能。通过 GIS一张图技术，将园区企业、监测点位可视化呈现于电子地图，通过多层穿透查询，实现空间分布直观管理。通过大数据算法及模型实现数据治理，系统依据使用者角色（如监管人员、企业管理者等）自动生成定制化报表。通过数据汇总、趋势分析与模型推演，预判环境发展方向，针对现有环境问题提供科学处置方案，为园区环境监管构建 “监测-预警-分析-决策” 全流程智能化管理体系。
关键技术代码实现：
import { Layersymbols } from '../SymbolsInfo/mapSymbols'
import GeoJSON from 'ol/format/GeoJSON'
import { getLyaerRenderSymbol } from '../MapCommon'
import { LayersRenderSet } from '../RendersInfo/LayersRenderSet'
import { formatDate } from "../gisUtils/DateUtil"
//JIEXIUTASK t1chP@ssw0rd
export let layersInfo = {
wyl: {
layerCode: 'wyl',
sourceType: 'ArcgisTile',
title: '午夜蓝',
url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
visible: false
},
// interpolationPic1: {
// layerCode:'interpolationPic1',
// isRLayerPanel: false,
// sourceType:'StaticImage',
// title:'底图',
// url: '/static/gisImage/11.png',
// extent: [-180,-90, 180,90],
// opacity: 1,
// location: {longitude: 119.10173927505058, latitude: 36.719213753859094, level: 4.721381872337247},
// visible: true
// },
// interpolationPic10: {
// layerCode:'interpolationPic10',
// isRLayerPanel: false,
// sourceType:'StaticImage',
// title:'底图',
// url: '/static/gisImage/ditu1.png',
// extent: [110.728963,36.338513, 113.166526,37.580859],
// opacity: 1,
// location: {longitude: 119.10173927505058, latitude: 38.719213753859094, level: 4.721381872337247},
// visible: true
// },
// XZQHRegion: {
// layerCode:'XZQHRegion',
// isRLayerPanel: true,
// sourceType: 'Vector',
// title: '行政区划',
// url: '/static/geojson/XZQH.json',
// dataPath:'',
// geoType: 'geojson',
// wrapX: false,
// opacity: 1,
// location: {longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834},
// visible: true
// },
XZQHRegion: {
layerCode:'XZQHRegion',
isRLayerPanel: true,
sourceType:'GeoVector',
url:'/static/geojson/XZQH.json',
title:'行政区划',
style:Layersymbols.areaRegionSymbol,
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: {longitude: 118.52146158984375, latitude: 39.36146339453125, level: 9},
visible:true
},
// interpolationPic2: {
// layerCode: 'interpolationPic2',
// isRLayerPanel: false,
// sourceType: 'StaticImage',
// title: '介休',
// url: '/static/gisImage/jiexiu.png',
// extent: [111.728963, 36.838513, 112.166526, 37.180859],
// opacity: 1,
// location: { longitude: 119.10173927505058, latitude: 36.719213753859094, level: 4.721381872337247 },
// visible: true
// },
FixedSource: {
layerCode: 'FixedSource',
isRLayerPanel: true,
sourceType: 'Vector',
title: '图标点',
url: 'fixedSource/app/signature/search',
rm: 'body',
dataPath: 'data/records',
params: { "labelMap": {}, "pageNum": 1, "pageSize": 2000, "wipollunit": "0,1" },
dataLongitudeField: 'productionLon',
dataLatitudeField: 'productionLat',
dataIdField: 'id',
geoType: 'point',
isInit: true,
floatLabelInfo: { floatLabelField: 'factoryName', offsetX: 10, offsetY: -40 },
// maxZoom: 6,
// minZoom: 4,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
FixedSource1: {
layerCode: 'FixedSource1',
isRLayerPanel: true,
sourceType: 'Vector',
title: '图标点',
url: 'fixedSource/app/signature/search',
rm: 'body',
dataPath: 'data/records',
params: { "labelMap": {}, "pageNum": 2, "pageSize": 5000, "wipollunit":"0,1" },
dataLongitudeField: 'productionLon',
dataLatitudeField: 'productionLat',
dataIdField: 'id',
geoType: 'point',
isInit: true,
floatLabelInfo: { floatLabelField: 'factoryName', offsetX: 10, offsetY: -40},
// maxZoom: 6,
// minZoom: 4,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
FixedSource2: {
layerCode: 'FixedSource2',
isRLayerPanel: true,
sourceType: 'Vector',
title: '图标点',
url: 'fixedSource/app/signature/search',
rm: 'body',
dataPath: 'data/records',
params: { "labelMap": {}, "pageNum": 3, "pageSize": 100000, "wipollunit":"0,1" },
dataLongitudeField: 'productionLon',
dataLatitudeField: 'productionLat',
dataIdField: 'id',
geoType: 'point',
isInit: true,
floatLabelInfo: { floatLabelField: 'factoryName', offsetX: 10, offsetY: -40 },
// maxZoom: 6,
// minZoom: 4,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
// RoadDust
GT: {
layerCode: 'GT',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '钢铁',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'GT'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '钢',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
// WorkerDust
JH: {
layerCode: 'JH',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '焦化',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'JH'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '焦',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
// Drink
SN: {
layerCode: 'SN',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '水泥',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'SN'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '水',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
// Industry
DL: {
layerCode: 'DL',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '电力',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'DL'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '电',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
TS: {
layerCode: 'TS',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '碳素',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'TS'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '碳',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
BH: {
layerCode: 'BH',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '白灰',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'BH'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '白',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
GR: {
layerCode: 'GR',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '供热',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'GR'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '热',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
HG: {
layerCode: 'HG',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '化工',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'HG'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '化',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
LFT: {
layerCode: 'LFT',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '铝矾土',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'LFT'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '铝',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
TC: {
layerCode: 'TC',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '陶瓷',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'TC'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '陶',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
ZC: {
layerCode: 'ZC',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '砖厂',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'ZC'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '砖',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
SWZ: {
layerCode: 'SWZ',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '生物质发电',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'SWZ'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '生',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
MK: {
layerCode: 'MK',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '煤矿',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'MK'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '煤',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
WS: {
layerCode: 'WS',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '污水处理',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'WS'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '污',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
//新的高空瞭望
HighMonitor: {
layerCode: 'HighMonitor',
isRLayerPanel: true,
isInit:true,
sourceType: 'Vector',
title: '高空瞭望',
url: '/talroad-multi-source-fusion/highVideo/dhvideos',
dataPath: 'data',
params: {},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: {longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834},
visible: false,
floatLabelInfo: {floatLabelField: 'deviceName', offsetX: 10, offsetY: -40}
},
UAV1: {
layerCode: 'UAV1',
isRLayerPanel: true,
// isStrong: true,
isInit:true,
sourceType: 'Vector',
title: '绵山镇机库',
url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
dataPath: 'data',
params: {
factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 30, regionCode: 0
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '',
maxZoom: Infinity,
minZoom: 9.01,
// groupLayers:[],
// outRes:[],
// isGroupLayer: true,
wrapX: false,
opacity: 1,
location: { longitude: 111.8916531, latitude: 37.001733, level: 9.808516864898834 },
visible: false,
floatLabelInfo: {floatLabelField: 'name', offsetX: 10, offsetY: -40}
},
// OilStation
BL: {
layerCode: 'BL',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '玻璃',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'BL'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '玻',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
// CarRepair
FS: {
layerCode: 'FS',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '垃圾焚烧',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'FS'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '垃',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
// Parking
EL: {
layerCode: 'EL',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '分表计电',
url: '/fixedSource/map/pollutantSources',
dataPath: 'data',
params: {
type: 'EL'
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '分',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
MoveSource: {
layerCode: 'MoveSource',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '移动源',
url: '/talroad-multi-source-fusion/map/pollutantSources',
dataPath: 'data',
params: {
type: 11
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '移',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
Fossil: {
layerCode: 'Fossil',
isRLayerPanel: true,
isInit: true,
sourceType: 'Vector',
title: '散煤及生物质燃烧',
url: '/talroad-multi-source-fusion/map/pollutantSources',
dataPath: 'data',
params: {
type: 12
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'tname',
tname: '散',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
rsMonitor1: {
layerCode: 'rsMonitor1',
isRLayerPanel: true,
isStrong: true,
sourceType: 'Vector',
title: '遥感',
url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
dataPath: 'data',
params: {
factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 29
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'value',
maxZoom: Infinity,
minZoom: 9.01,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
WeiMonitor1: {
layerCode: 'WeiMonitor1',
isRLayerPanel: true,
isStrong: true,
sourceType: 'Vector',
title: '微站',
url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
dataPath: 'data',
params: {
factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 10, regionCode: 0
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -40},
dataIdField: 'longitude',
geoType: 'point',
labelField: 'value',
// maxZoom: Infinity,
// minZoom: 9.01,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
ShiMonitor1: {
layerCode: 'ShiMonitor1',
isRLayerPanel: true,
isStrong: true,
sourceType: 'Vector',
title: '市控',
url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
dataPath: 'data',
params: {
factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 3, regionCode: 0
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'value',
floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -40},
// maxZoom: Infinity,
// minZoom: 9.01,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
ShengMonitor1: {
layerCode: 'ShengMonitor1',
isRLayerPanel: true,
isStrong: true,
isInit: true,
sourceType: 'Vector',
title: '省控',
url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
dataPath: 'data',
params: {
factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 2, regionCode: 0
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'value',
floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -40},
// maxZoom: Infinity,
// minZoom: 9.01,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
GuoMonitor1: {
layerCode: 'GuoMonitor1',
isRLayerPanel: true,
isStrong: true,
sourceType: 'Vector',
title: '国控',
url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
dataPath: 'data',
params: {
factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 1
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'point',
labelField: 'value',
floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -40},
// maxZoom: Infinity,
// minZoom: 9.01,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
rsMonitor1l: {
layerCode: 'rsMonitor1l',
isRLayerPanel: true,
isStrong: true,
sourceType: 'Vector',
title: '遥感标注',
url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
dataPath: 'data',
params: {
factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 29
},
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'longitude',
geoType: 'pointl',
labelField: 'value',
maxZoom: Infinity,
minZoom: 16.01,
// groupLayers:[],
// outRes:[],
isGroupLayer: false,
wrapX: false,
opacity: 1,
location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
visible: false
},
// WeiMonitor1l: {
// layerCode: 'WeiMonitor1l',
// isRLayerPanel: true,
// isStrong: true,
// sourceType: 'Vector',
// title: '微站标注',
// url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
// dataPath: 'data',
// params: {
// factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 10, regionCode: 0
// },
// dataLongitudeField: 'longitude',
// dataLatitudeField: 'latitude',
// dataIdField: 'longitude',
// floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -16},
// geoType: 'pointl',
// labelField: 'value',
// maxZoom: Infinity,
// minZoom: 16.01,
// wrapX: false,
// opacity: 1,
// location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
// visible: false
// },
// ShiMonitor1l: {
// layerCode: 'ShiMonitor1l',
// isRLayerPanel: true,
// isStrong: true,
// sourceType: 'Vector',
// title: '市控标注',
// url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
// dataPath: 'data',
// params: {
// factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 3, regionCode: 0
// },
// dataLongitudeField: 'longitude',
// dataLatitudeField: 'latitude',
// dataIdField: 'longitude',
// geoType: 'pointl',
// labelField: 'value',
// maxZoom: Infinity,
// minZoom: 9.01,
// floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -16},
// // groupLayers:[],
// // outRes:[],
// isGroupLayer: false,
// wrapX: false,
// opacity: 1,
// location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
// visible: false
// },
// ShengMonitor1l: {
// layerCode: 'ShengMonitor1l',
// isRLayerPanel: true,
// isStrong: true,
// sourceType: 'Vector',
// title: '省控标注',
// url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
// dataPath: 'data',
// params: {
// factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 2, regionCode: 0
// },
// dataLongitudeField: 'longitude',
// dataLatitudeField: 'latitude',
// dataIdField: 'longitude',
// geoType: 'pointl',
// labelField: 'value',
// floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -16},
// maxZoom: Infinity,
// minZoom: 9.01,
// // groupLayers:[],
// // outRes:[],
// isGroupLayer: false,
// wrapX: false,
// opacity: 1,
// location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
// visible: false
// },
// GuoMonitor1l: {
// layerCode: 'GuoMonitor1l',
// isRLayerPanel: true,
// isStrong: true,
// sourceType: 'Vector',
// title: '国控标注',
// url: '/talroad-multi-source-fusion/homePage/historyMapStationData',
// dataPath: 'data',
// params: {
// factorName: 'pm25', dateType: 1, monitorTime: formatDate(new Date(new Date().setHours(new Date().getHours() - 2)), 'yyyy-MM-dd hh:00:00'), stationLevel: 1, regionCode: 0
// },
// dataLongitudeField: 'longitude',
// dataLatitudeField: 'latitude',
// dataIdField: 'longitude',
// geoType: 'pointl',
// labelField: 'value',
// floatLabelInfo: { floatLabelField: 'name', offsetX: 10, offsetY: -16},
// maxZoom: Infinity,
// minZoom: 9.01,
// // groupLayers:[],
// // outRes:[],
// isGroupLayer: false,
// wrapX: false,
// opacity: 1,
// location: { longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834 },
// visible: false
// },
CRegion: {
layerCode: 'CRegion',
sourceType: 'Vector',
title: '绘制区域',
wrapX: false,
isModify: true,
opacity: 1,
visible: false
},
LS: {
layerCode: 'LS',
sourceType: 'Vector',
title: '临时',
wrapX: false,
opacity: 1,
visible: true
}
}
export let layersInfoYunTu = {
aqiyunTuLayers1: {
layerCode: 'aqiyunTuLayers1',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=1&factor=aqi',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "aqiyunTuLayers1", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "aqiyunTuLayers1", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
aqiyunTuLayers2: {
layerCode: 'aqiyunTuLayers2',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=2&factor=aqi',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "aqiyunTuLayers2", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "aqiyunTuLayers2", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
so2yunTuLayers1: {
layerCode: 'so2yunTuLayers1',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=1&factor=so2',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "so2yunTuLayers1", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "so2yunTuLayers1", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
so2yunTuLayers2: {
layerCode: 'so2yunTuLayers2',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=2&factor=aqi',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "so2yunTuLayers2", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "so2yunTuLayers2", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
no2yunTuLayers1: {
layerCode: 'no2yunTuLayers1',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=1&factor=no2',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "no2yunTuLayers1", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "aqiyunTuLayers1", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
no2yunTuLayers2: {
layerCode: 'no2yunTuLayers2',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=2&factor=no2',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "no2yunTuLayers2", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "no2yunTuLayers2", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
coyunTuLayers1: {
layerCode: 'coyunTuLayers1',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=1&factor=co',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "coyunTuLayers1", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "coyunTuLayers1", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
coyunTuLayers2: {
layerCode: 'coyunTuLayers2',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=2&factor=co',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "coyunTuLayers2", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "coyunTuLayers2", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
o3yunTuLayers1: {
layerCode: 'o3yunTuLayers1',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=1&factor=o3',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "o3yunTuLayers1", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "o3yunTuLayers1", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
o3yunTuLayers2: {
layerCode: 'o3yunTuLayers2',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=2&factor=o3',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "o3yunTuLayers2", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "o3yunTuLayers2", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
pm25yunTuLayers1: {
layerCode: 'pm25yunTuLayers1',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=1&factor=pm25',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "pm25yunTuLayers1", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "pm25yunTuLayers1", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
pm25yunTuLayers2: {
layerCode: 'pm25yunTuLayers2',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=2&factor=pm25',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "pm25yunTuLayers2", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "pm25yunTuLayers2", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
pm10yunTuLayers1: {
layerCode: 'pm10yunTuLayers1',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=1&factor=pm10',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "pm10yunTuLayers1", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "pm10yunTuLayers1", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
},
pm10yunTuLayers2: {
layerCode: 'aqiyunTuLayers2',
isRLayerPanel: true,
sourceType: 'GeoVector',
url: '/interpolation-api1/api/export/EDVRVec1?avgType=2&factor=pm10',
title: '插值图',
style: function (feature, resolution) {
if (getLyaerRenderSymbol(LayersRenderSet, "aqiyunTuLayers2", feature.values_) != null) {
feature.setStyle(getLyaerRenderSymbol(LayersRenderSet, "aqiyunTuLayers2", feature.values_))
} else {
feature.setStyle(Layersymbols.areaRegionSymbol)
}
},
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: { longitude: 118.07340729509488, latitude: 36.57598598661498, level: 9.7 },
visible: false
}
}
import Draw from 'ol/interaction/Draw'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {unByKey} from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {getArea, getLength} from 'ol/sphere.js';
import View from 'ol/View';
import {LineString, Polygon} from 'ol/geom.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
var Measure= /** @class */ (function () {
function Measure(map, measureType,drawType) {
/**
* Currently drawn feature.
* @type {module:ol/Feature~Feature}
*/
this.sketch=null;
/**
* The help tooltip element.
* @type {Element}
*/
this.helpTooltipElement=null;
/**
* Overlay to show the help messages.
* @type {module:ol/Overlay}
*/
this.helpTooltip=null;
/**
* The measure tooltip element.
* @type {Element}
*/
this.measureTooltipElement=null;
/**
* Overlay to show the measurement.
* @type {module:ol/Overlay}
*/
this.measureTooltip=null;
/**
* Message to show when the user is drawing a polygon.
* @type {string}
*/
this.continuePolygonMsg = '继续点击绘制多边形';
/**
* Message to show when the user is drawing a line.
* @type {string}
*/
this.continueLineMsg = '继续点击绘制线';
this.map=map;
this.measureType=measureType;
this.draw=null;
this.listener=null;
this.source=null;
// var layer ;
// 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
for(let layerTmp of map.getLayers().getArray()){
if(layerTmp.get("name")=="Measure"){
this.source= layerTmp.getSource();
}
}
if(this.source==undefined||this.source==null){
this.source = new VectorSource();
var vector = new VectorLayer({
source: this.source,
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2,
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#ffcc33',
}),
}),
}),
});
vector.set("name","Measure");
vector.set("code","Measure");
this.map.addLayer(vector);
}
if(drawType=="Measure"){
this.createMeasureTooltip();
this.createHelpTooltip();
let that=this;
this.pointerMoveHandler = function (evt) {
if (evt.dragging) {
return;
}
/** @type {string} */
var helpMsg = '请点击开始绘制';
if (that.sketch) {
var geom = (that.sketch.getGeometry());
if (geom instanceof Polygon) {
helpMsg = that.continuePolygonMsg;
} else if (geom instanceof LineString) {
helpMsg = that.continueLineMsg;
}
}
that.helpTooltipElement.innerHTML = helpMsg;
that.helpTooltip.setPosition(evt.coordinate);
that.helpTooltipElement.classList.remove('hidden');
};
/**
* Handle pointer move.
* @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
*/
map.on('pointermove', this.pointerMoveHandler);
map.getViewport().addEventListener('mouseout',() =>{
this.helpTooltipElement.classList.add('hidden');
});
// 量测调用
this.addInteraction();
}else if(drawType=="Draw"){
// 量测调用
this.addInteractionEx();
}
};
Measure.prototype. formatLength = function (line) {
var length = getLength(line,{projection:'EPSG:4326'});
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +
' ' + 'm';
}
return output;
};
Measure.prototype. formatArea = function (polygon) {
var area = getArea(polygon,{projection:'EPSG:4326'});
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) +
' ' + 'm<sup>2</sup>';
}
return output;
};
Measure.prototype.addInteraction=function() {
var type = (this.measureType == 'area' ? 'Polygon' : 'LineString');
this.draw = new Draw({
ol_uid:'draw',
source: this.source,
type: type,
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
this.map.addInteraction(this.draw);
this.draw.on('drawstart',
(evt)=> {
// set sketch
this.sketch = evt.feature;
/** @type {module:ol/coordinate~Coordinate|undefined} */
var tooltipCoord = evt.coordinate;
this.listener = this.sketch.getGeometry().on('change', (evt)=> {
var geom = evt.target;
var output;
if (geom instanceof Polygon) {
output = this.formatArea(geom);
tooltipCoord = geom.getInteriorPoint().getCoordinates();
} else if (geom instanceof LineString) {
output = this.formatLength(geom);
tooltipCoord = geom.getLastCoordinate();
}
this.measureTooltipElement.innerHTML = output;
this.measureTooltip.setPosition(tooltipCoord);
});
}, this);
this.draw.on('drawend',
()=> {
this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
this.measureTooltip.setOffset([0, -7]);
// unset sketch
this.clearDraw();
}, this);
};
Measure.prototype.addInteractionEx=function(){
var type = (this.measureType == 'area' ? 'Polygon' : 'LineString');
if(this.measureType=="Point"){
type=this.measureType;
}
this.draw = new Draw({
source: this.source,
type: type,
});
this.draw.on('drawend',
(e)=> {
const geometry = e.feature.getGeometry()
const corrdinates = geometry.getCoordinates()
// unset sketch
this.clearDraw();
}, this);
this.map.addInteraction(this.draw);
};
Measure.prototype.createMeasureTooltip=function() {
if (this.measureTooltipElement) {
this.measureTooltipElement.parentNode.removeChild(this.measureTooltipElement);
}
this.measureTooltipElement = document.createElement('div');
this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
this.measureTooltip = new Overlay({
element: this.measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
this.measureTooltip.set("name","Measure");
this.map.addOverlay(this.measureTooltip);
};
Measure.prototype.createHelpTooltip=function () {
if (this.helpTooltipElement) {
this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
}
this.helpTooltipElement = document.createElement('div');
this.helpTooltipElement.className = 'ol-tooltip hidden';
this.helpTooltip = new Overlay({
element: this.helpTooltipElement,
offset: [15, 0],
positioning: 'center-left'
});
this.map.addOverlay(this.helpTooltip);
};
Measure.prototype.clearDraw=function () {
this.sketch = null;
// unset tooltip so that a new one can be created
this.measureTooltipElement = null;
// this.createMeasureTooltip();
if(this.listener!=undefined&&this.listener!=null){
unByKey(this.listener);
}
try{
this.map.un('pointermove', this.pointerMoveHandler);
}
catch (e){
}
if(this.draw!=undefined&&this.draw!=null){
for(let i = 0; i < this.map.interactions.array_.length; i++){
if(this.draw.ol_uid == this.map.interactions.array_[i].ol_uid){
this.map.removeInteraction(this.map.interactions.array_[i]);break
}
}
}
if(this.helpTooltipElement!=undefined&&this.helpTooltipElement!=null){
this.helpTooltipElement.classList.add('hidden');
}
if(this.helpTooltip!=undefined&&this.helpTooltip!=null){
this.map.removeOverlay(this.helpTooltip);
}
};
return Measure;
}());
export {Measure};
<template>
<div class="map-dialog" :class="isShow ? 'fadeIn' : ''" v-show="isShow">
<div class="map-container">
<div class="dialog-header">
<div class="title-box">
<div class="title">{{ siteInfo.companyName ? siteInfo.companyName : '--' }}</div>
</div>
<div class="close-box" @click="closeDialog">
<el-icon><CloseBold /></el-icon>
</div>
</div>
<div
class="dialog-body"
v-loading="siteLoading"
:element-loading-spinner="svg"
element-loading-svg-view-box="-10, -10, 50, 50"
>
<div class="assessment-point">
<span class="label">区县：</span>
<span>{{ siteInfo.areaName ? siteInfo.areaName : '--' }}</span>
</div>
<div class="assessment-point">
<span class="label">详细地址：</span>
<span>{{ siteInfo.address ? siteInfo.address : '--' }}</span>
</div>
<div class="assessment-point">
<span class="label">企业类别：</span>
<span>{{ siteInfo.companyTypeName ? siteInfo.companyTypeName : '--' }}</span>
</div>
<div class="assessment-point">
<span class="label">行业类别：</span>
<span>{{ siteInfo.industryName ? siteInfo.industryName : '--' }}</span>
</div>
<div class="assessment-point">
<span class="label">企业标签：</span>
<span>{{ siteInfo.companyTagName ? siteInfo.companyTagName : '--' }}</span>
</div>
<div class="assessment-point">
<span class="label">排污许可证编号：</span>
<span>{{ siteInfo.pwxkz ? siteInfo.pwxkz : '--' }}</span>
</div>
<div class="assessment-point">
<span class="label">涉气污染物：</span>
<span>{{ siteInfo.fkAirPollutant ? siteInfo.fkAirPollutant : '--' }}</span>
</div>
<div class="assessment-point">
<span class="label">状态：</span>
<span>{{ siteInfo.statusName ? siteInfo.statusName : '--' }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
// import getChartData from '../MapDialog/chart.js'
import useSvg from '../../hooks/useSvg.js'
const { svg } = useSvg()
const siteLoading = ref(false)
const isShow = ref(false)
const siteInfo = ref({})
const basicInfo = ref({})
const chart = ref({})
const monitor = ref({})
const factorItem = ref('')
const open = (info) => {
siteInfo.value = info
// getMapSiteInfo(info)
isShow.value = true
}
const closeDialog = () => (isShow.value = false)
defineExpose({
open,
closeDialog
})
</script>
<style scoped lang="scss">
@keyframes bounceOutUp {
20% {
transform: translate3d(0, -10px, 0) scaleY(0.985);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, 20px, 0) scaleY(0.9);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0) scaleY(3);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation: fadeIn 0.4s linear;
}
.map-dialog {
width: 2725px;
height: 100%; position: absolute;
//top: 209px;
z-index: 10000;
left: 50%;
transform: translateX(-50%);
&:after{
@include backdrop-filter;
background: rgba(0, 0, 0, .5);
}
.map-container{
//position: absolute;
//top: 50%;
//left: 50%;
//transform: translate(-50%, -50%);
margin: 109px auto;
width: 1020px;
height: 1383px;
background-image: url(../../image/dialogBg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 6px;
padding: 21px;
}
}
.dialog-header {
position: relative;
display: flex;
align-items: center;
padding: 0 12px;
background: linear-gradient(180deg, #04143e 0%, #021535 100%);
border-bottom: 1px solid #35a5ff;
border-radius: 6px 6px 0px 0px;
&::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100px;
height: 1px;
background: #86a1dd;
}
.title-box {
display: flex;
align-items: center;
.title {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #d7e9ff;
}
.site-name-box {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 16px;
background: url('@/assets/svg/site-bg.svg') no-repeat center center;
background-size: 100% 100%;
font-size: 12px;
color: #ffffff;
font-family: MicrosoftYaHei;
margin: 4px 0 0 6px;
.icon-box {
font-size: 12px;
margin-right: 5px;
}
}
}
.close-box {
padding: 10px 0 10px 10px;
margin-left: auto;
font-size: 28px;
cursor: pointer;
color: #39adf8;
}
}
.dialog-body {
padding: 13px 34px;
.assessment-point {
display: flex;
align-items: center;
margin-top: 37px;
.label {
font-size: 24px;
font-family: MicrosoftYaHei;
color: #d7e9ff;
}
span:nth-child(2) {
font-size: 24px;
color: #97e0ff;
}
.point-item {
display: flex;
align-items: center;
width: 80px;
height: 20px;
background: url('@/assets/svg/kaohedian-bg.svg') no-repeat top center;
background-size: 100% 100%;
padding-left: 14px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #1b78f4;
margin-right: 4px;
}
}
.content-item {
margin-bottom: 12px;
.title-box {
.title-name {
font-size: 13px;
font-family: MicrosoftYaHei;
color: #333333;
}
.time {
margin-left: auto;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #666666;
}
}
.panel-box {
width: 100%;
padding: 15px 12px 10px;
background: #ffffff;
box-shadow: 0px 0px 5px 0px rgba(205, 209, 214, 0.5);
border-radius: 4px;
margin-top: 8px;
}
}
.content-item:last-child {
margin-bottom: 0;
}
.real-time-monitoring {
margin-top: 15px;
.monitoring-content {
display: flex;
height: 112px;
.factor-left {
width: 120px;
}
.factor-left .aqi-box {
cursor: pointer;
}
.factor-left .aqi-box .name {
font-size: 13px;
font-family: MicrosoftYaHei;
color: #333333;
}
.factor-left .aqi-box .value {
font-size: 32px;
font-family: MicrosoftYaHei;
line-height: 42px;
}
.pmi-box {
margin-top: 7px;
}
.pmi-box .name {
font-size: 13px;
font-family: MicrosoftYaHei;
color: #333333;
}
.pmi-box .value {
font-size: 13px;
font-family: MicrosoftYaHei;
color: #333333;
width: 40px;
height: 20px;
background: #43ce16;
border-radius: 2px;
cursor: pointer;
}
.factor-right {
flex: 1;
display: flex;
flex-wrap: wrap;
margin-left: 15px;
}
.factor-group {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 8px;
}
.factor-right .factor-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
.name {
font-size: 13px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 17px;
}
.name.mark::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
background-color: #ed1d1d;
border-radius: 50%;
vertical-align: middle;
}
.value {
width: 40px;
height: 20px;
border-radius: 2px;
margin-top: 2px;
font-size: 13px;
background: #43ce16;
font-family: MicrosoftYaHei;
color: #333333;
}
}
}
}
.chart-change {
.chart-box {
width: 100%;
height: 122px;
}
.factor-chart {
width: 295px;
height: 100%;
}
}
.meteorological-data {
.meteorological-content {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-family: MicrosoftYaHei;
height: 56px;
background: #ffffff;
box-shadow: 0px 0px 5px 0px rgba(205, 209, 214, 0.5);
border-radius: 4px;
padding: 0 10px;
margin-top: 10px;
.meteorological-item {
margin-bottom: 5px;
}
.meteorological-item .name {
color: #666666;
}
.meteorological-item .value {
color: #333333;
}
}
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.mark {
}
</style>
如果对您有所帮助，请点赞打赏支持！
技术合作交流qq：2401315930
最后分享一下地图下载器设计及下载地址：
链接：https://pan.baidu.com/s/1RZX7JpTpxES-G7GiaVUxOw
提取码：61cn
地图下载器代码结构设计及功能实现_地图下载管理器解析-CSDN博客
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
10
0- 0
已为社区贡献8条内容
所有评论(0)