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
Analysis of the principle and usage of MySQL continuous aggregation
This article uses examples to illustrate the prin...
Analysis and opinions on the design structure of the large picture on the homepage of Taobao Mall (picture)
After I analyzed the Taobao details page last time...
Vue implements form validation function
This article mainly describes how to implement fo...
Native js to realize bouncing ball
On a whim, I wrote a case study of a small ball b...
Implementation code for installing vsftpd in Ubuntu 18.04
Install vsftpd $ sudo apt-get install vsftpd -y S...
Summary of Button's four Click response methods
Button is used quite a lot. Here I have sorted ou...
How to set utf-8 encoding in mysql database
Modify /etc/my.cnf or /etc/mysql/my.cnf file [cli...
Share 5 helpful CSS selectors to enrich your CSS experience
With a lot of CSS experience as a web designer, we...
3D tunnel effect implemented by CSS3
The effect achievedImplementation Code html <d...
What are your principles for designing indexes? How to avoid index failure?
Table of contents Primary key index Create indexe...
Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging
Copy code The code is as follows: <!-- Prevent...
Detailed explanation of the principle of js Proxy
Table of contents What is Proxy Mode? Introducing...
Zabbix redis automatic port discovery script returns json format
When we perform automatic discovery, there is alw...
How to use JSZip compression in CocosCreator
CocosCreator version: 2.4.2 Practical project app...
CSS3 click button circular progress tick effect implementation code
Table of contents 8. CSS3 click button circular p...