Vue中使用Openlayer实现加载动画效果

注意:实现动画时不能有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加载动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp

  • vue项目中openlayers绘制行政区划

    vue项目中openlayers画行政区划(区域范围),供大家参考,具体内容如下 原理 在地图上画需要的范围,实际上就是在地图上打上一圈点,然后依次将这些点用线连接,就形成了范围 引用相应的ol模块 import VectorLayer from 'ol/layer/Vector' import VectorSource from 'ol/source/Vector' import { Map, View, Feature } from 'ol' import { Style, Icon, St

  • Vue中使用Openlayer实现加载动画效果

    注意:实现动画时不能有scoped!!!!  通过gif <template> <div class="test"> <div id="map" ref="map" style="width: 100vw; height: 100vh"></div> </div> </template> <script> import "ol/ol.

  • Vue+Openlayer中使用select选择要素的实现代码

    效果图: 实现代码: <template> <div id="map" ref="map" style="width: 100vw; height: 100vh"></div> </template> <script> import "ol/ol.css"; import { Map, View } from "ol"; import { OSM,

  • vue+openlayers绘制省市边界线

    本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码,供大家参考,具体内容如下 1.创建项目 vue init webpack ol_vue 2.安装ol依赖包 npm install ol 3.引入axios npm install axios --save 文件目录:src/main.js import Vue from 'vue' import router from './router' import App from './App' import axios fro

  • Vue+Openlayers自定义轨迹动画

    本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码,供大家参考,具体内容如下 <template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline" target="_bank" >Openla

  • vue使用openlayers实现移动点动画

    本文实例为大家分享了vue使用openlayers实现移动点动画的具体代码,供大家参考,具体内容如下 做项目时,本来打算仿照官网的Example中动画制作,引入vue中后,发现它引用的库函数一直报错,最后我去vue中安装的依赖库中去查找这个函数,果然没有.也就是说官方例子使用的库和我安装的OL库存在一定差异. 后来我还是用笨方法去解决了,最终效果如下: 总体思路是将移动目标实例一个Overlay对象,然后将如图5个经纬度点没两点之间分割成多个(200个),之后通过定时器不断setPositon.

  • vue-openlayers实现地图坐标弹框效果

    本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

  • vue中img src 动态加载本地json的图片路径写法

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu

  • jQuery生成假加载动画效果

    在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("

  • Android仿网易一元夺宝客户端下拉加载动画效果(一)

    上上周写的一个demo,仿照网易一元夺宝的下拉刷新效果. 原效果是(第一部分)一个小太阳拉下来,然后松开回弹上去, (第二部分)再掉下来一个硬币进行中轴旋转. 本文实现的效果的是第一部分的,效果演示图如下: Gif图看起来比较卡顿...其实真机演示效果还是很流畅的. 下面分析实现过程: 当时因为时间有限没有写在下拉刷新的组件中,也没有封装成一个单独的组件,只是在主布局后面写了一个View然后实现相应的操作,进行封装并不难,这里就不花时间BB了,下面是布局文件: <RelativeLayout x

  • Android 使用 Path 实现搜索动态加载动画效果

    今天实现一个搜索动态加载数据的动画效果,还是先看效果吧,用文字描述干巴巴的,看图说话什么都明白了, 实现这个就是使用Path中的getSegment()不断的去改变它截取片段的start和stop,再结合动画,今天就分步骤实现它,看完以后你也会觉的不是很难,只是没想到这么实现而已,所以要多见识,所谓眼界决定你的高度,还是延续我写博客的习惯,一步步分析,第一步就是绘制如下图: 如果单纯的绘制这个图很简单很简单的,绘制一个圆,然后再绘制一根线就搞定,但是要考虑这里的效果,就不能这么干了,如果你看了上

  • Android实现仿微软系统加载动画效果

    效果图: 实现步骤: 初始化五个圆球分别设置中心点,方便画圆 利用ValueAnimator的值变化来获取旋转角度 onDraw来分别画每个圆 具体代码实现: 1.创建Circle对象 package com.sjl.keeplive.track; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.PointF; public class Circle { private

  • ios基于MJRefresh实现上拉刷新和下拉加载动画效果

    本文介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,分享给大家,具体如下: 目录 1. 头部刷新动画 2.尾部刷新动画 头部刷新动画 #import <MJRefresh/MJRefresh.h> @interface HZNormalHeader : MJRefreshGifHeader @end #import "HZNormalHeader.h" @implementation HZNormalHeader #pragma mark - 重写父类的方

  • vue实现滑动到底部加载更多效果

    本文实例为大家分享了vue实现滑动到底部加载更多的具体代码,供大家参考,具体内容如下 思路: 如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了 template: <template> <div class="content"> <div class="logo"> <div> <img v-if="server[0].t

  • vue实现页面加载动画效果

    我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 <template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < cu

随机推荐