openlayers 加载geoserver管线并报警闪烁
2024-05-07 13:21:30
一、下载vue地图包
npm install ol
yarn add ol二、DOM加载
<div id="mapDiv" v-loading="loading"></div>三、代码如下
<script>import "ol/ol.css";import Map from "ol/Map";import View from "ol/View";import {GeoJSON} from 'ol/format';import SourceVector from 'ol/source/Vector';import {defaults} from "ol/control.js";import {Tile, Vector} from "ol/layer";import {XYZ} from "ol/source";import {Stroke, Style} from "ol/style";import {bbox as bboxStrategy} from 'ol/loadingstrategy';export default {name: "TdMap",data() {return {map: null,alarmList: [], //报警列表mapBaseLayerPipe: {}, //管网图层timer1:null,timer2:null,//geoserver管线数据整合信息pipeList:{ruHe:{//名称type:'py_map',//类型typeName:'ruHe',//名称maxFeatures:5000,//大小color:"#3973ff",//管线颜色width:5//管线宽度},},};},mounted() {this.initMap();},methods: {/*** 初始化地图*/initMap() {let vm = this;let layers = [];let titleText = vm.addTile('cva', 'bb3927811976d4d451ed2159271b76ba');//天地图注记图let mapLayer = vm.addTile('vec', '901339dbb203e65286a9b9702278dbd8');//天地图线画图layers.push.apply(layers,[mapLayer,titleText]);/*加载管网信息*/Object.keys(vm.pipeList).forEach( key => {vm.addPipe(vm.pipeList[key],layers);//加载WFS});vm.map = new Map({layers: layers,target: document.getElementById("mapDiv"),controls: defaults({ zoom: false }),view: new View({center: [106.6933822631836, 35.993614196777344],//当前中心点zoom: 11,//默认缩放级别minZoom: 11,//最小缩放级别maxZoom: 18,//最大缩放级别projection: "EPSG:4326"})});let is_first = true;vm.map.on("postrender", function () {if(is_first){is_first = false;/*加载报警信息*/vm.getAlarmInfo();}});/*允许鼠标点击地图*/vm.map.on("click", function (evt) {let pixel = vm.map.getEventPixel(evt.originalEvent);let feature = vm.map.forEachFeatureAtPixel(pixel, function (feature) {return feature;});if (feature) {let id = String(feature.getId()).split('.')[0];if(vm.pipeList[id]) vm.handleClickPipe(feature,evt.coordinate);} else {//点击地图空白处触发}});/*鼠标划过地图*/vm.map.on("pointermove", function (e) {let pixel = vm.map.getEventPixel(e.originalEvent);let feature = vm.map.forEachFeatureAtPixel(pixel, function (feature) {return feature;});/*移入显示小手,鼠标滑过地图空白区域则不展示*/vm.map.getTargetElement().style.cursor = feature ? "pointer" : '';});},/*添加天地图图层*/addTile(type, tk) {return new Tile({//天地图线画图source: new XYZ({url: `http://t0.tianditu.gov.cn/${type}_c/wmts?tk=${tk}&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${type}&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`,projection: "EPSG:4326"})});},/*添加WFS*/addPipe(data,arr) {let vm = this;let vectorSource = new SourceVector({format: new GeoJSON(),url: function() {return `http://geoserver服务器地址/geoserver/${data.type}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${data.type}:${data.typeName}&maxFeatures=${data.maxFeatures}&outputFormat=application/json`},strategy: bboxStrategy});let pipeLayer = new Vector({source: vectorSource,style: function (feature) {let id = feature.id_.split('.')[0];vm.setPipeStyle(feature,id,data.color,data.width);}});vm.mapBaseLayerPipe[data.type+'_'+data.typeName] = pipeLayer;arr.push(pipeLayer);},/*管网样式*/setPipeStyle(feature,id,color,width){feature.setStyle(new Style({stroke: new Stroke({color: id ? color : '#f00',width: id ? width : 1,EPSG: "4326"})}));},/********************报警列表请求****************/getAlarmInfo: async function () {let vm = this;/*此处省略加载报警返回数据*/vm.alarmList = data;//报警数据clearInterval(vm.timer1);clearInterval(vm.timer2);vm.timer1 = null;vm.timer2 = null;if(vm.alarmList.length){vm.timer1 = setInterval(() => {Object.keys(vm.mapBaseLayerPipe).forEach( key => {let Features = vm.mapBaseLayerPipe[key].getSource().getFeatures();if(Features){Features.forEach( item => {vm.styleAnimateFunc(item);});}});},1000);vm.timer2 = setInterval(() => {Object.keys(vm.mapBaseLayerPipe).forEach( key => {let Features = vm.mapBaseLayerPipe[key].getSource().getFeatures();if(Features){Features.forEach( item => {vm.styleAnimateFunc2(item);});}});},2000);}else{Object.keys(vm.mapBaseLayerPipe).forEach( key => {let Features = vm.mapBaseLayerPipe[key].getSource().getFeatures();if(Features){Features.forEach( item => {vm.styleAnimateFunc2(item);});}});}},styleAnimateFunc(feature){let vm = this;let id = feature.getId();let list = id.split('.');//获取当前管线id/*获取与当前管网匹配的报警数据*/let data =vm.alarmList.find( item => {return id === item.id});/*当前管线有报警数据*/if(data){feature.setStyle(new Style({stroke: new Stroke({/**1、根据报警等级展示对应颜色；2、当前管线宽度小于3时，将默认宽度调整为3，反之展示管线自身宽度*/color:data.alarm_type === '1' ? '#ffe700' : data.alarm_type === '2' ? '#ff7200' : '#f00',width:vm.pipeList[list[0]].width <3 ? 3 : vm.pipeList[list[0]].width,EPSG: "4326"})}));}else{/*无报警时展示默认颜色和宽度*/feature.setStyle(new Style({stroke: new Stroke({color:vm.pipeList[list[0]].color,width:vm.pipeList[list[0]].width,EPSG: "4326"})}));}},styleAnimateFunc2(feature){let vm = this;let id = feature.getId();let list = id.split('.');feature.setStyle(new Style({stroke: new Stroke({color:vm.pipeList[list[0]].color,width:vm.pipeList[list[0]].width,EPSG: "4326"})}));},/****************管网点击操作********************/handleClickPipe(feature,coordinate) {if (feature) {let ID = feature.getId();alert(ID,[coordinate[0], coordinate[1]])}},}};
</script>
openlayers 加载geoserver管线并报警闪烁相关推荐
- Vue+Openlayers加载Geoserver发布的TileWMS后更换shp数据源的流程
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的 ...
- Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
- Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
- Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
- openlayers 加载geoserver （多个、单个）WFS服务并鼠标移入高亮
一.单个加载 1.加载单个WFS服务(可重复调用): 2.鼠标移入显示高亮: 3.鼠标点击展示当前点击信息弹窗: 4.可通过 vm.pipeLayer[type].setVisible(true/fa ...
- Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示: Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADA ...
- Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
- Leaflet中加载Geoserver发布的WMS服务显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
- Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
最新文章
- 用gogs搭建属于自己的git网站
- 如何在本地运行查看github上的开源项目
- ACL 2021 | 基于依存句法驱动注意力图卷积神经网络的关系抽取
- 4.02Day12函数 装饰器
- c语言第一个mfc程序,c语言之MFC的进程和线程
- 有感而发 - 日新月异的SAP开发技术
- 第六节：框架搭建之EF的Fluent Api模式的使用流程
- 垃圾回收算法与实现系列-Java堆内存溢出原因
- 算法导论 10.1-6
- [转]ASP.NET MVC中你必须知道的13个扩展点
- Layui数据表格动态禁用checkbox
- html导出excel设置宽度,导出excel图片如何把大小控制
- Matlab画图常用的指令是啥,matlab画图常用命令
- 性能测试之LoadRunner11安装步骤
- foxmail超大附件服务器文件怎么删,电脑中使用Foxmail发送超大附件的方法
- 【Unity】AvProVideo 实现当前视频播放完毕自动加载下一视频
- 吐槽大会 之博客园两个月使用体验
- 带你Git从入门到精通
- linux 1.0 如何运行,观点|Linux 1.0 之旅：回顾这一切的开始
- 一键解锁iPhone屏幕密码