注意：实现动画时不能有scoped！！！！
通过gif
<template>
<div class="test">
<div id="map" ref="map" style="width: 100vw; height: 100vh"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { map, view, overlay } from "ol";
import tilelayer from "ol/layer/tile";
import osm from "ol/source/osm";
export default {
name: "gif",
data() {
return {
map: {},
overlay: {},
markerpoint: {},
geojsondata: {
type: "featurecollection",
features: [
{
type: "feature",
properties: {
title: "警报1",
},
geometry: {
type: "point",
coordinates: [91.48879670091165, 37.83814884701121],
},
},
{
type: "feature",
properties: {
title: "警报2",
},
geometry: {
type: "point",
coordinates: [99.19515576149941, 26.713646654711134],
},
},
{
type: "feature",
properties: {
title: "警报3",
},
geometry: {
type: "point",
coordinates: [123.74363825288785, 44.363694825734726],
},
},
],
},
};
},
mounted() {
this.initmap();
this.addgif();
},
methods: {
// 初始化地图
initmap() {
this.map = new map({
target: "map",
layers: [
new tilelayer({
source: new osm(),
}),
],
view: new view({
projection: "epsg:4326",
center: [104.912777, 34.730746],
zoom: 4.5,
}),
});
},
// 使用overlay添加gif动态图标点位信息
addgif() {
let coordinates = this.getcoordinatesbygeojson(this.geojsondata);
for (const i in coordinates) {
let gif_span = document.createelement("span");
document.documentelement.appendchild(gif_span);
this.$nexttick(() => {
this.markerpoint = new overlay({
position: coordinates[i],
element: gif_span,
positioning: "center-center",
});
this.map.addoverlay(this.markerpoint);
});
}
},
//根据geojson数据获取坐标集
getcoordinatesbygeojson(geojsondata) {
let coordinates = [];
geojsondata.features.map((feature) => {
coordinates = [...coordinates, feature.geometry.coordinates];
});
return coordinates;
},
},
};
</script>
<style lang='scss' >
.test {
span {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: url("https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/gif.gif")
no-repeat;
background-size: 80px 80px;
}
}
</style>
通过关键帧@keyframes
<template>
<div class="test">
<div id="map" ref="map" style="width: 100vw; height: 100vh"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { map, view, overlay } from "ol";
import tilelayer from "ol/layer/tile";
import osm from "ol/source/osm";
export default {
name: "gif",
data() {
return {
map: {},
overlay: {},
point_overlay: {},
geojsondata: {
type: "featurecollection",
features: [
{
type: "feature",
properties: {
title: "警报1",
},
geometry: {
type: "point",
coordinates: [91.48879670091165, 37.83814884701121],
},
},
{
type: "feature",
properties: {
title: "警报2",
},
geometry: {
type: "point",
coordinates: [99.19515576149941, 26.713646654711134],
},
},
{
type: "feature",
properties: {
title: "警报3",
},
geometry: {
type: "point",
coordinates: [123.74363825288785, 44.363694825734726],
},
},
],
},
};
},
mounted() {
this.initmap();
this.addgif();
},
methods: {
// 初始化地图
initmap() {
this.map = new map({
target: "map",
layers: [
new tilelayer({
source: new osm(),
}),
],
view: new view({
projection: "epsg:4326",
center: [104.912777, 34.730746],
zoom: 4.5,
}),
});
},
// 使用overlay添加gif动态图标点位信息
addgif() {
let coordinates = this.getcoordinatesbygeojson(this.geojsondata);
for (const i in coordinates) {
let point_div = document.createelement("div");
point_div.classname = "css_animation";
point_div.id = `coordinate_${i}`;
document.documentelement.appendchild(point_div);
this.$nexttick(() => {
this.point_overlay = new overlay({
position: coordinates[i],
element: point_div,
positioning: "center-center",
});
this.map.addoverlay(this.point_overlay);
});
}
},
//根据geojson数据获取坐标集
getcoordinatesbygeojson(geojsondata) {
let coordinates = [];
geojsondata.features.map((feature) => {
coordinates = [...coordinates, feature.geometry.coordinates];
});
return coordinates;
},
},
};
</script>
<style lang='scss' >
.test {
.css_animation {
height: 50px;
width: 50px;
border-radius: 50%;
background: rgba(255, 0, 0, 0.9);
box-shadow: inset 0 0 8px red;
transform: scale(0);
animation: myfirst 3s;
animation-iteration-count: infinite; //无限循环
}
@keyframes myfirst {
to {
transform: scale(2);
background: rgba(0, 0, 0, 0);
box-shadow: inset 0 0 50px rgba(255, 0, 0, 0);
}
}
}
</style>
既可加载动画，又可获取动画所在要素点的属性
注意：该代码存在问题。目前只能要么点击获取属性，要么展示动画，而不能同时存在，还有待优化！
<template>
<div class="test">
<div id="map" ref="map" style="width: 100vw; height: 100vh"></div>
<div
id="popup"
style="
position: absolute;
background-color: rgba(47, 57, 90, 0.678);
bottom: 20px;
left: 30px;
border: 1px solid white;
padding: 10px;
width: 60px;
"
>
{{ properties.title }}
</div>
</div>
</template>
<script>
import "ol/ol.css";
import { map, view, overlay } from "ol";
import { osm, vector as vectorsource } from "ol/source";
import { vector as vectorlayer, tile as tilelayer } from "ol/layer";
import geojson from "ol/format/geojson";
import select from "ol/interaction/select";
import { altkeyonly, click, pointermove } from "ol/events/condition";
import { fill, stroke, style, circle } from "ol/style";
export default {
name: "gif",
data() {
return {
map: {},
layer: {},
overlay: {},
point_overlay: {},
geojsondata: {
type: "featurecollection",
features: [
{
type: "feature",
properties: {
title: "警报1",
},
geometry: {
type: "point",
coordinates: [91.48879670091165, 37.83814884701121],
},
},
{
type: "feature",
properties: {
title: "警报2",
},
geometry: {
type: "point",
coordinates: [99.19515576149941, 26.713646654711134],
},
},
{
type: "feature",
properties: {
title: "警报3",
},
geometry: {
type: "point",
coordinates: [123.74363825288785, 44.363694825734726],
},
},
],
},
select: {},
properties: {
title: "",
},
};
},
mounted() {
this.initmap();
// this.addgif();//注释掉后，点击可获取feature属性
},
methods: {
// 初始化地图
initmap() {
this.layer = new vectorlayer({
source: new vectorsource({
features: new geojson().readfeatures(this.geojsondata),
}),
});
this.map = new map({
target: "map",
layers: [
new tilelayer({
source: new osm(),
}),
this.layer,
],
view: new view({
projection: "epsg:4326",
center: [104.912777, 34.730746],
zoom: 4.5,
}),
});
this.select = new select({
condition: click, //单击选择
});
this.map.addinteraction(this.select);
let overlayer_popup = new overlay({
element: document.getelementbyid("popup"),
positioning: "center-center", //一定要加上，否则会有偏移
});
this.select.on("select", (e) => {
let coordinate = e.mapbrowserevent.coordinate; //获取选择的坐标
let featureselect = e.selected[0]; //选中的feature要素
if (e.selected.length !== 0) {
overlayer_popup.setposition(coordinate);
this.map.addoverlay(overlayer_popup);
} else {
overlayer_popup.setposition("");
}
if (featureselect) {
this.properties = featureselect.getproperties(); //获取当前要素的所有属性
//设置选中的样式
featureselect.setstyle(
new style({
image: new circle({
radius: 10,
fill: new fill({
//矢量图层填充颜色，以及透明度
color: "rgba(255,0,0,0.5)",
}),
stroke: new stroke({
//边界样式
color: "rgba(100, 90, 209, 0.6)",
width: 3,
}),
}),
})
);
}
});
// 设置鼠标划过矢量要素的样式
this.map.on("pointermove", (e) => {
const ishover = this.map.hasfeatureatpixel(e.pixel);
this.map.gettargetelement().style.cursor = ishover ? "pointer" : "";
});
},
// 使用overlay添加gif动态图标点位信息
addgif() {
let coordinates = this.getcoordinatesbygeojson(this.geojsondata);
for (const i in coordinates) {
let point_div = document.createelement("div");
point_div.classname = "css_animation";
point_div.id = `coordinate_${i}`;
document.documentelement.appendchild(point_div);
this.$nexttick(() => {
this.point_overlay = new overlay({
position: coordinates[i],
element: point_div,
positioning: "center-center",
});
this.map.addoverlay(this.point_overlay);
});
}
},
//根据geojson数据获取坐标集
getcoordinatesbygeojson(geojsondata) {
let coordinates = [];
geojsondata.features.map((feature) => {
coordinates = [...coordinates, feature.geometry.coordinates];
});
return coordinates;
},
},
};
</script>
<style lang='scss' scoped>
.test {
}
</style>
<style lang='scss' >
.test {
.css_animation {
height: 50px;
width: 50px;
border-radius: 50%;
background: rgba(255, 0, 0, 0.9);
box-shadow: inset 0 0 8px red;
transform: scale(0);
animation: myfirst 3s;
animation-iteration-count: infinite; //无限循环
}
@keyframes myfirst {
to {
transform: scale(2);
background: rgba(0, 0, 0, 0);
box-shadow: inset 0 0 50px rgba(255, 0, 0, 0);
}
}
}
</style>
到此这篇关于vue+openlayer加载动画的文章就介绍到这了,更多相关vue openlayer加载动画内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
黄山市民网：https://www.huangshanshimin.com/
