vue3-openlayers marker 光晕扩散（光环扩散）（postrender 事件和 render 方法）

无心使然云中漫步2024-06-29 16:06

本篇介绍一下使用 vue3-openlayers marker 光晕扩散（光环扩散）（postrender 事件和 render 方法）

1 需求

  • marker 光晕扩散（光环扩散）

2 分析

marker 光晕扩散（光环扩散）使用 postrender 事件和 render 方法

关于即时渲染的知识点请看上篇《openlayers marker 光晕扩散（光环扩散）（postrender 事件和 render 方法）》

3 实现

3.1 实现一(光环)

javascript 复制代码 
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="width: 100%; height: 100%"
    ref="mapRef"
  >
    <ol-view ref="view" :center="center" :zoom="zoom" :projection="projection" />

    <ol-tile-layer>
      <ol-source-tianditu
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
        ref="sourceRef"
      ></ol-source-tianditu>
    </ol-tile-layer>
    <ol-tile-layer>
      <ol-source-tianditu
        :isLabel="true"
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
      ></ol-source-tianditu>
    </ol-tile-layer>
    <ol-vector-layer ref="vectorLayerRef" @postrender="handlePostRender">
      <ol-source-vector>
        <ol-feature>
          <ol-geom-point :coordinates="[110, 30]"></ol-geom-point>
          <ol-style>
            <ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon>
          </ol-style>
        </ol-feature>
        <ol-feature>
          <ol-geom-point :coordinates="[112, 31]"></ol-geom-point>
          <ol-style>
            <ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon>
          </ol-style>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
  <div class="toolbar">
    <el-button type="primary" @click="handleClick">{{ animationFlag ? '停止' : '开始' }}</el-button>
  </div>
</template>

<script setup lang="ts">
import iconSrc from '@/assets/image/truck.png';
import { getVectorContext } from 'ol/render.js';
import { easeOut } from 'ol/easing.js';
import { Circle, Stroke, Style } from 'ol/style';

const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const mapRef = ref();
const key = '替换为天地图key';
const sourceRef = ref(null);
const vectorLayerRef = ref(null);
const animationFlag = ref(false);
const duration = ref([3000, 1000]);
const start = ref([0, 0]);

const handleClick = () => {
  if (!animationFlag.value) {
    start.value = start.value.map(i => Date.now());
    vectorLayerRef.value.vectorLayer.changed();
  }
  animationFlag.value = !animationFlag.value;
};

const handlePostRender = e => {
  if (animationFlag.value) {
    const time = e.frameState.time;
    vectorLayerRef.value.vectorLayer
      .getSource()
      .getFeatures()
      .forEach((f, idx) => {
        // 时间戳差（毫秒）
        let elapsedTime = time - start.value[idx];
        if (elapsedTime >= duration.value[idx]) {
          start.value[idx] = Date.now();
          elapsedTime = duration.value[idx];
        }
        // 获取矢量上下文
        const vectorContext = getVectorContext(e);
        // elapsedRatio值0到1之间
        const elapsedRatio = elapsedTime / duration.value[idx];
        const radius = easeOut(elapsedRatio) * 25 + 5;
        const opacity = easeOut(1 - elapsedRatio);

        const style = new Style({
          image: new Circle({
            radius: radius,
            stroke: new Stroke({
              color: 'rgba(255, 0, 0, ' + opacity + ')',
              width: 1 + opacity
            })
          })
        });
        // 将feature渲染到画布中。
        vectorContext.drawFeature(f.clone(), style);
      });
    mapRef.value.map.render();
  }
};
</script>
<style scoped lang="scss">
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

3.2 实现二(光晕)

javascript 复制代码 
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="width: 100%; height: 100%"
    ref="mapRef"
  >
    <ol-view ref="view" :center="center" :zoom="zoom" :projection="projection" />

    <ol-tile-layer>
      <ol-source-tianditu
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
        ref="sourceRef"
      ></ol-source-tianditu>
    </ol-tile-layer>
    <ol-tile-layer>
      <ol-source-tianditu
        :isLabel="true"
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
      ></ol-source-tianditu>
    </ol-tile-layer>
    <ol-vector-layer ref="vectorLayerRef" @postrender="handlePostRender">
      <ol-source-vector>
        <ol-feature>
          <ol-geom-point :coordinates="[110, 30]"></ol-geom-point>
        </ol-feature>
        <ol-feature>
          <ol-geom-point :coordinates="[112, 31]"></ol-geom-point>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
    <ol-vector-layer >
      <ol-source-vector>
        <ol-feature>
          <ol-geom-point :coordinates="[110, 30]"></ol-geom-point>
          <ol-style>
            <ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon>
          </ol-style>
        </ol-feature>
        <ol-feature>
          <ol-geom-point :coordinates="[112, 31]"></ol-geom-point>
          <ol-style>
            <ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon>
          </ol-style>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
  <div class="toolbar">
    <el-button type="primary" @click="handleClick">{{ animationFlag ? '停止' : '开始' }}</el-button>
  </div>
</template>

<script setup lang="ts">
import iconSrc from '@/assets/image/truck.png';
import { getVectorContext } from 'ol/render.js';
import { easeOut } from 'ol/easing.js';
import { Circle, Fill, Stroke, Style } from 'ol/style';

const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const mapRef = ref();
const key = '替换为天地图key';
const sourceRef = ref(null);
const vectorLayerRef = ref(null);
const animationFlag = ref(false);
const duration = ref([3000, 1000]);
const start = ref([0, 0]);

const handleClick = () => {
  if (!animationFlag.value) {
    start.value = start.value.map(i => Date.now());
    vectorLayerRef.value.vectorLayer.changed();
  }
  animationFlag.value = !animationFlag.value;
};

const handlePostRender = e => {
  if (animationFlag.value) {
    const time = e.frameState.time;
    vectorLayerRef.value.vectorLayer
      .getSource()
      .getFeatures()
      .forEach((f, idx) => {
        // 时间戳差（毫秒）
        let elapsedTime = time - start.value[idx];
        if (elapsedTime >= duration.value[idx]) {
          start.value[idx] = Date.now();
          elapsedTime = duration.value[idx];
        }
        // 获取矢量上下文
        const vectorContext = getVectorContext(e);
        // elapsedRatio值0到1之间
        const elapsedRatio = elapsedTime / duration.value[idx];
        const radius = easeOut(elapsedRatio) * 25 + 5;
        const opacity = easeOut(1 - elapsedRatio);

        const style = new Style({
          image: new Circle({
            radius: radius,
            fill: new Fill({
              color: 'rgba(228, 147, 87, ' + opacity + ')'
            }),
            stroke: new Stroke({
              color: 'rgba(255, 0, 0, ' + opacity + ')',
              width: 1 + opacity
            })
          })
        });
        // 将feature渲染到画布中。
        vectorContext.drawFeature(f.clone(), style);
      });
    mapRef.value.map.render();
  }
};
</script>
<style scoped lang="scss">
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
相关推荐
DARLING Zero two♡24 分钟前
关于我、重生到500年前凭借C语言改变世界科技vlog.16——万字详解指针概念及技巧
c语言·开发语言·科技
Gu Gu Study27 分钟前
【用Java学习数据结构系列】泛型上界与通配符上界
java·开发语言
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
芊寻(嵌入式)1 小时前
C转C++学习笔记--基础知识摘录总结
开发语言·c++·笔记·学习
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器，日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么？简单到看完就理解！
开发语言·前端·javascript·ecmascript
有梦想的咸鱼_1 小时前
go实现并发安全hashtable 拉链法
开发语言·golang·哈希算法
海阔天空_20131 小时前
Python pyautogui库：自动化操作的强大工具
运维·开发语言·python·青少年编程·自动化
天下皆白_唯我独黑1 小时前
php 使用qrcode制作二维码图片
开发语言·php
夜雨翦春韭1 小时前
Java中的动态代理
java·开发语言·aop·动态代理
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解