OpenLayers 综合案例-加载gif图

看过的知识不等于学会。唯有用心总结、系统记录,并通过温故知新反复实践,才能真正掌握一二

作为一名摸爬滚打三年的前端开发,开源社区给了我饭碗,我也将所学的知识体系回馈给大家,助你少走弯路!
OpenLayers、Leaflet 快速入门 ,每周保持更新 2 个案例
Cesium 快速入门,每周保持更新 4 个案例

OpenLayers 综合案例-加载gif图

Vue 3 + OpenLayers 实现的 WebGIS 应用提供了完整的加载gif图功能,案例参考官方示例 Animated GIF

介绍

  1. 需要使用到 gifler 库来加载 gif 图像。
  2. gifler不支持ES6模块导入,需要使用 CDN 引入。
  3. 在 OpenLayers 中使用 gif 图像时,需要将其作为 ol/style/Icon 的图像源。
html 复制代码
<!-- 通过 CDN 引入 gifler 库 -->
<script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>

MP4效果动画链接地址

技术栈

该环境下代码即拿即用

bash 复制代码
Vue 3.5.13+
Openlayers 10.5.0+
Vite 6.3.5+
vue 复制代码
<template>
  <div ref="mapContainer" id="map"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Map from "ol/Map.js";
import XYZ from "ol/source/XYZ.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import VectorSource from "ol/source/Vector.js";
import VectorLayer from "ol/layer/Vector.js";
import Style from "ol/style/Style.js";
import Icon from "ol/style/Icon.js";
import "ol/ol.css";
// 引入gif动图
import gifUrl from "./assets/globe.gif";
const mapContainer = ref(null);
let map = null;
const view = new View({
  center: [116.4074, 39.9042], // 北京市中心经纬度
  zoom: 10,
  projection: "EPSG:4326", // 默认使用Web Mercator投影,需要设置为EPSG:4326经纬度
});
onMounted(() => {
  map = new Map({
    target: mapContainer.value,
    layers: [
      new TileLayer({
        source: new XYZ({
          // 高德地图瓦片服务地址
          url: "https://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}",
        }),
      }),
    ],
    view,
  });
  loadGif();
});
// 加载gif
const loadGif = () => {
  const iconFeature = new Feature({
    geometry: new Point([116.4074, 39.9042]),
  });

  const vectorSource = new VectorSource({
    features: [iconFeature],
  });

  const vectorLayer = new VectorLayer({
    source: vectorSource,
  });

  map.addLayer(vectorLayer);

  // 使用gifler加载gif
  const gif = gifler(gifUrl);
  gif.frames(
    document.createElement("canvas"),
    function (ctx, frame) {
      if (!iconFeature.getStyle()) {
        iconFeature.setStyle(
          new Style({
            image: new Icon({
              img: ctx.canvas,
              opacity: 0.8,
            }),
          })
        );
      }
      ctx.clearRect(0, 0, frame.width, frame.height);
      ctx.drawImage(frame.buffer, frame.x, frame.y);
      map.render();
    },
    true
  );

  // 鼠标悬停时显示手型
  map.on("pointermove", function (e) {
    const hit = map.hasFeatureAtPixel(e.pixel);
    map.getTargetElement().style.cursor = hit ? "pointer" : "";
  });
};
</script>
<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
相关推荐
胡gh4 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
言兴5 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_5 小时前
TailWind CSS
前端·css·postcss
烛阴6 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧6 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment7 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点8 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile8 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年8 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神8 小时前
coze娱乐ai换脸
前端