Using Openlayer in Vue to realize loading animation effect
|
Note: You cannot use scoped animations! ! ! ! via 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: "Alarm 1",
},
geometry:
type: "Point",
coordinates: [91.48879670091165, 37.83814884701121],
},
},
{
type: "Feature",
properties:
title: "Alarm 2",
},
geometry:
type: "Point",
coordinates: [99.19515576149941, 26.713646654711134],
},
},
{
type: "Feature",
properties:
title: "Alarm 3",
},
geometry:
type: "Point",
coordinates: [123.74363825288785, 44.363694825734726],
},
},
],
},
};
},
mounted() {
this.initMap();
this.addGif();
},
methods: {
// Initialize the map 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,
}),
});
},
// Use Overlay to add GIF dynamic icon point information 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);
});
}
},
//Get the coordinate set based on geojson data 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>Through keyframes @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: "Alarm 1",
},
geometry:
type: "Point",
coordinates: [91.48879670091165, 37.83814884701121],
},
},
{
type: "Feature",
properties:
title: "Alarm 2",
},
geometry:
type: "Point",
coordinates: [99.19515576149941, 26.713646654711134],
},
},
{
type: "Feature",
properties:
title: "Alarm 3",
},
geometry:
type: "Point",
coordinates: [123.74363825288785, 44.363694825734726],
},
},
],
},
};
},
mounted() {
this.initMap();
this.addGif();
},
methods: {
// Initialize the map 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,
}),
});
},
// Use Overlay to add GIF dynamic icon point information 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);
});
}
},
//Get the coordinate set based on geojson data 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; // infinite loop}
@keyframes myfirst {
to {
transform: scale(2);
background: rgba(0, 0, 0, 0);
box-shadow: inset 0 0 50px rgba(255, 0, 0, 0);
}
}
}
</style>It can load animations and obtain the attributes of the feature points where the animations are located.
<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: "Alarm 1",
},
geometry:
type: "Point",
coordinates: [91.48879670091165, 37.83814884701121],
},
},
{
type: "Feature",
properties:
title: "Alarm 2",
},
geometry:
type: "Point",
coordinates: [99.19515576149941, 26.713646654711134],
},
},
{
type: "Feature",
properties:
title: "Alarm 3",
},
geometry:
type: "Point",
coordinates: [123.74363825288785, 44.363694825734726],
},
},
],
},
select: {},
properties:
title: "",
},
};
},
mounted() {
this.initMap();
// this.addGif(); //After commenting out, click to get feature attributes},
methods: {
// Initialize the map 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, //Click to select});
this.map.addInteraction(this.select);
let overlayer_popup = new Overlay({
element: document.getElementById("popup"),
positioning: "center-center", //Must add it, otherwise there will be offset});
this.select.on("select", (e) => {
let coordinate = e.mapBrowserEvent.coordinate; //Get the selected coordinates let featureSelect = e.selected[0]; //Selected 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(); //Get all properties of the current feature //Set the selected style featureSelect.setStyle(
new Style({
image: new Circle({
radius: 10,
fill: new Fill({
//Vector layer fill color and transparency color: "rgba(255,0,0,0.5)",
}),
stroke: new Stroke({
//Border style color: "rgba(100, 90, 209, 0.6)",
width: 3,
}),
}),
})
);
}
});
// Set the style of the mouse over the vector element this.map.on("pointermove", (e) => {
const isHover = this.map.hasFeatureAtPixel(e.pixel);
this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
});
},
// Use Overlay to add GIF dynamic icon point information 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);
});
}
},
//Get the coordinate set based on geojson data 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; // infinite loop}
@keyframes myfirst {
to {
transform: scale(2);
background: rgba(0, 0, 0, 0);
box-shadow: inset 0 0 50px rgba(255, 0, 0, 0);
}
}
}
</style>This is the end of this article about Vue+Openlayer loading animation. For more related Vue Openlayer loading animation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: MySQL cursor principle and usage example analysis
>>: Analysis of common basic operations of MySQL database [create, view, modify and delete database]
Recommend
Ubuntu installs multiple versions of CUDA and switches at any time
I will not introduce what CUDA is, but will direc...
Linux system opens ports 3306, 8080, etc. to the outside world, detailed explanation of firewall settings
Many times, after we install a web service applic...
Detailed explanation of Nginx http resource request limit (three methods)
Prerequisite: nginx needs to have the ngx_http_li...
How to modify the forgotten password when installing MySQL on Mac
1. Install MySQL database on mac 1. Download MySQ...
Detailed explanation of MySQL three-value logic and NULL
Table of contents What is NULL Two kinds of NULL ...
25 Examples of Using Circular Elements in Web Design
Today, this post lists some great examples of circ...
Solution for importing more data from MySQL into Hive
Original derivative command: bin/sqoop import -co...
Implementation of textarea adaptive height solution in Vue
Table of contents Hidden Problems Solution to ada...
Practical basic Linux sed command example code
The Linux stream editor is a useful way to run sc...
Example code of the spread operator and its application in JavaScript
The spread operator allows an expression to be ex...
CentOS uses local yum source to build LAMP environment graphic tutorial
This article describes how to use the local yum s...
Detailed steps for installing MinIO on Docker
Table of contents 1. Check whether the docker env...
Implementing search box function with search icon based on html css
Preface Let me share with you how to make a searc...
Two ways to create SSH server aliases in Linux
Preface If you frequently access many different r...
How to install MySQL and MariaDB in Docker
Relationship between MySQL and MariaDB MariaDB da...