admin管理员组文章数量:1650879
文章目录
- 1. 写在前面
- 1.1 实现方式一
- 1.2 实现方式二
- 1.3 实现方式三(本文采用的方式)
- 2. 效果图
- 3. 核心代码
- 4. 完整代码
1. 写在前面
实现点的闪烁效果可以有很多种,下面列举几个常见的实现方式:
1.1 实现方式一
可以使用overlay去实现,overlay原理就是创建一个div,通过css样式去控制闪烁(如:如何用css3做openLayers3的闪烁效果),想要遍历实现的话,就创建多个overlay的div。这种也是网上百度出来最多的一种。缺点就是如果批量生成可能会造成卡顿,因为是直接创建的div页面元素。
1.2 实现方式二
使用openlayers3 的postcompose
机制去实现,原理跟本文的postrender
机制差不多,只是openlayers3 和 openlayers6的方法不同了。(如:openlayers3实现点动态扩散)
1.3 实现方式三(本文采用的方式)
使用openlayers6 的
postrender机制生成,本文采用的这种
。像迁移图等,也是通过postrender
机制去渲染,openlayers 的 内部机制肯定会比 使用overlay去批量生成的更加流畅。
2. 效果图
3. 核心代码
依靠
render
机制实现点的闪烁效果,可以控制点的大小,闪烁速度,闪烁颜色等参数。
分析
- 遍历生成feature要素点
- 闪烁的动画播放。仍然要依靠render机制,这里我还是使用比较熟悉的postrender事件回调函数。
let radius = 0;
pointLayer.on("postrender", (evt) => {
if (radius >= 20) radius = 0;
var opacity = (20 - radius) * (1 / 20); //不透明度
var pointStyle = new Style({
image: new Circle({
radius: radius,
stroke: new Stroke({
color: "rgba(255,0,0" + opacity + ")",
width: 3 - radius / 10, //设置宽度
}),
}),
});
// 获取矢量要素上下文
let vectorContext = getVectorContext(evt);
vectorContext.setStyle(pointStyle);
pointFeature.forEach((feature) => {
vectorContext.drawGeometry(feature.getGeometry());
});
radius = radius + 0.3; //调整闪烁速度
//请求地图渲染(在下一个动画帧处)
this.map.render();
});
4. 完整代码
<template>
<div id="app">
<div id="Map" ref="map" />
</div>
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature } from "ol";
import { Style, Circle, Stroke } from "ol/style";
import { Point } from "ol/geom";
import { defaults as defaultControls } from "ol/control";
import { fromLonLat } from "ol/proj";
import { getVectorContext } from "ol/render";
// 边界json数据
export default {
data() {
return {
map: null,
radius: 0,
};
},
mounted() {
this.initMap();
const coordinates = [
{ x: "106.918082", y: "31.441314" }, //重庆
{ x: "86.36158200334317", y: "41.42448570787448" }, //新疆
{ x: "89.71757707811526", y: "31.02619817424643" }, //西藏
{ x: "116.31694544853109", y: "39.868508850821115" }, //北京
{ x: "103.07940932026341", y: "30.438580338450862" }, //成都
];
this.addDynamicPoints(coordinates);
},
methods: {
/**
* 初始化地图
*/
initMap() {
this.map = new Map({
target: "Map",
controls: defaultControls({
zoom: true,
}).extend([]),
layers: [
new TileLayer({
source: new XYZ({
url: "http://map.geoq/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
}),
}),
],
view: new View({
center: fromLonLat([108.522097, 37.272848]),
zoom: 4.7,
maxZoom: 19,
minZoom: 4,
}),
});
},
/**
* 批量添加闪烁点
*/
addDynamicPoints(coordinates) {
// 设置图层
let pointLayer = new VectorLayer({ source: new VectorSource() });
// 添加图层
this.map.addLayer(pointLayer);
// 循环添加feature
let pointFeature = [];
for (let i = 0; i < coordinates.length; i++) {
// 创建feature,一个feature就是一个点坐标信息
const feature = new Feature({
geometry: new Point(fromLonLat([coordinates[i].x, coordinates[i].y])),
});
pointFeature.push(feature);
}
//把要素集合添加到图层
pointLayer.getSource().addFeatures(pointFeature);
// 关键的地方在此:监听postrender事件,在里面重新设置circle的样式
let radius = 0;
pointLayer.on("postrender", (evt) => {
if (radius >= 20) radius = 0;
var opacity = (20 - radius) * (1 / 20); //不透明度
var pointStyle = new Style({
image: new Circle({
radius: radius,
stroke: new Stroke({
color: "rgba(255,0,0" + opacity + ")",
width: 3 - radius / 10, //设置宽度
}),
}),
});
// 获取矢量要素上下文
let vectorContext = getVectorContext(evt);
vectorContext.setStyle(pointStyle);
pointFeature.forEach((feature) => {
vectorContext.drawGeometry(feature.getGeometry());
});
radius = radius + 0.3; //调整闪烁速度
//请求地图渲染(在下一个动画帧处)
this.map.render();
});
},
},
};
</script>
<style lang="scss" scoped>
html,
body {
height: 100%;
}
#app {
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: none;
#Map {
height: 888px;
min-height: calc(100vh - 50px);
}
}
</style>
版权声明:本文标题:openlayers6【二十八】批量设置闪烁点,feature要素通过postrender机制批量生成动态点 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729531387a1204851.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论