openlayers如何使用（三）动态数据加载

如何在地图中动态添加点元素，并动态加载数据
① 循环获取数据

    mounted() {this.mapT();this.drowMap();this.clickOnMap();this.addOverlay();this.addOverlay_Line();this.mousePosition();this.mapDianClick();// 循环获取数据this.alarmPointsState = setInterval(()=>{this.getAlarmPointsData();},3000)},

getAlarmPointsData(){let that = this;Api.getGisData().then(res=>{this.mapData2 = {};this.basicPoints2 = [];this.alarmPoints = [];this.alarmFeatures = [];//     重新构建时清除叠加层this.map.getOverlays().getArray().slice(0).forEach(function(overlay) {if (overlay.id != undefined) {that.map.removeOverlay(overlay);}})this.mapData2 = JSON.parse(res.Data);this.basicPoints2 = this.mapData2.Gislnglats;for (let i = 0; i < this.basicPoints2.length; i++) {if (this.basicPoints2[i].Type == 3) {this.alarmPoints.push(this.basicPoints2[i]);}}})
},

② 监听数据的变化
利用计算属性来监听我们所需要的点数据alarmPoints的变化

computed: {watchObj(){let {alarmPoints} = this;return {alarmPoints}},
},

现在数据是动态的了，那么如何去实时的创建我们需要的点呢
③ 实时构建点元素

setFeature(){// 循环数据for (let i = 0; i < this.alarmPoints.length; i++) {// 设置坐标let position = [this.alarmPoints[i].Longitude, this.alarmPoints[i].Latitude]; // 构建点元素this.alarmFeaturePoint = new Feature({geometry: new Point(fromLonLat(position))}); // 设置点样式let style = new Style({image: new Icon({anchor: [0.5, 0.5],              // 锚点opacity: 1,scale: 1,src: 'img/icon2/gzd.png',}),})this.alarmFeaturePoint.setStyle(style);this.alarmFeatures.push(this.alarmFeaturePoint);// 创建涟漪的动态效果var point_div = document.createElement('div');point_div.className = "css_animationz";this.point_overlay = new Overlay({element: point_div,positioning: 'center-center',id: '111'});// 将此效果通过叠加层去展示this.point_overlay.setPosition(fromLonLat([this.alarmPoints[i].Longitude, this.alarmPoints[i].Latitude]))this.map.addOverlay(this.point_overlay);}this.newsource.addFeatures(this.alarmFeatures);
},

// 涟漪效果的css样式
.css_animationz{height: 30px;width: 30px;border-radius: 25px;background: rgba(255, 0, 0, 0.9);transform: scale(0);animation: myfirst 2s;animation-iteration-count: infinite;
}
@keyframes myfirst{to{transform: scale(3);background: rgba(0, 0, 0, 0);}
}

到这里我们动态创建的点就完成了，我们只需要将点加载进图层中就可以了，我们将创建图层写到另一个方法中，通过监听数据来构建

④ 构建图层

mapDianClick(){//矢量标注的数据源this.newsource = new VectorSource();//矢量标注图层this.newlayer = new VectorLayer({source:this.newsource,zIndex: 1});this.map.addLayer(this.newlayer); this.setFeature();
},

⑤ 清除图层
在循环构建点元素的时候，我们每构建一个点，在下次重新构建的时候需要清除掉之前的所有点，才能重新渲染，这就需要在进入构建方法前清除掉之前的图层与叠加层

所以我们需要一个清除的方法

claerMap(){// this.map.getOverlays().clear(); // 清除掉地图中所有的叠加层this.map.removeLayer(this.newlayer); // 清除地图中的图层
},

如果有多个叠加层，则可以在进入构建点方法时去清除叠加层，在此方法中清除会使所有叠加层失效

将此方法在监听数据时调用

watch: {   watchObj: {handler() {this.claerMap();this.mapDianClick();},deep: true,},

到这里我们就完成了动态数据实时加载点的效果

openlayers如何使用（三）动态数据加载相关推荐

echarts 通过ajax实现动态数据加载
首先先把官网上的demo拿过来,这时候的柱状图数据以及xy的数据都为空样式如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transi ...
TreeView的图标个性化和动态数据加载
1.简述如图,需要在页面上实现一个这样的树状图,具体要求如下: 1.最顶层的行的收缩图标为绿色小三角,其余层存在子节点的行的收缩图标为一个朝右的尖括号和一个绿色小三角,无子节点的行无需图 ...
bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
深度学习-Pytorch：项目标准流程【构建、保存、加载神经网络模型；数据集构建器Dataset、数据加载器DataLoader（线性回归案例、手写数字识别案例）】
1.拿到文本,分词,清晰数据(去掉停用词语): 2.建立word2index.index2word表 3.准备好预训练好的word embedding 4.做好DataSet / Dataloader ...
[Aaronyang] 写给自己的WPF4.5 笔记6[三巴掌-大数据加载与WPF4.5 验证体系详解 2/3]
我要做回自己--Aaronyang的博客(www.ayjs.net) 博客摘要: Virtualizing虚拟化DEMO 和大数据加载的思路及相关知识 WPF数据提供者的使用ObjectDataPr ...
【java】springboot项目启动数据加载内存中的三种方法
文章目录一.前言二.加载方式 2.1. 第一种:使用@PostConstruct注解(properties/yaml文件). 2.2. 第二种:使用@Order注解和CommandLineRunn ...
ignite mysql_apache ignite系列（三）：数据处理(数据加载，数据并置，数据查询)
使用ignite的一个常见思路就是将现有的关系型数据库中的数据导入到ignite中,然后直接使用ignite中的数据,相当于将ignite作为一个缓存服务,当然ignite的功能远不止于此,下面以将 ...
spark SQL（三）数据源 Data Source----通用的数据加载/保存功能
Spark SQL 的数据源------通用的数据加载/保存功能 Spark SQL支持通过DataFrame接口在各种数据源上进行操作.DataFrame可以使用关系变换进行操作,也可以用来创建临 ...
geoserver 发布矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示（三）（小白必备：超详细教程）
前两篇分别讲了如何利用geoserver 发布矢量切片和openlayers 加载.接下来我们说如何用leaflet 展示,既然做我们就作全面吧,谁让我们gis 就是这么苦逼呢,哈哈. 环境: g ...

openlayers如何使用（三）动态数据加载

openlayers如何使用（三）动态数据加载相关推荐

最新文章

热门文章