vue+leaflet示例:图斑历史时空播放(附源码下载)

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动demo命令：npm run dev
  （3）打包demo命令： npm run build:release

示例效果

本篇主要是 leaflet 通过调用 geoserver 发布的图斑地图服务 WMS，以 L.tileLayer.wms 图层加载形式叠加显示在地图，配合时间轴 timeline.js 插件来动态播放图斑变化效果，图斑随着时间轴的时间变化，核心是利用 L.tileLayer.wms 图层的属性过滤条件：cql_filter。
时间轴 timeline.js 插件的 github 地址：https://github.com/ilkeryilmaz/timelinejs

• 核心源码

<template>
  <div class="titleContainer center">
    <span>vue+leaflet示例:图斑历史时空播放</span>
  </div>
  <div class="timeline-container timeline-theme-1">
    <div class="timeline js-timeline">
      <div data-time="2019-08-27">
        <div id="map"></div>
      </div>
      <div data-time="2019-08-26" style="display: none"></div>
      <div data-time="2019-08-25" style="display: none"></div>
      <div data-time="2019-08-24" style="display: none"></div>
      <div data-time="2019-08-23" style="display: none"></div>
      <div data-time="2019-08-22" style="display: none"></div>
      <div data-time="2019-08-21" style="display: none"></div>
      <div data-time="2019-08-20" style="display: none"></div>
      <div data-time="2019-08-19" style="display: none"></div>
      <div data-time="2019-08-18" style="display: none"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import config from "../config";
import { useRouter } from "vue-router";
const router = useRouter();
let map = null;
onMounted(() => {
  initMap();
});
const initMap = () => {
  //时间轴timeline控件引用github地址:https://github.com/ilkeryilmaz/timelinejs
  $(".js-timeline").Timeline({
    autoplay: false, //设置是否自动播放
    isreplay: true, //在timeline原有的源码基础上，自己添加的一个属性，用来设置是否循环播放
    autoplaySpeed: 1500, //设置播放时间间隔
    pauseOnHover: false,
  });
  //动态计算map容器大小
  $("#map").width($(".timeline-list").width());
  $("#map").height($(".timeline-list").height());
  map = L.map("map", {
    attributionControl: false,
    //crs: L.CRS.EPSG4326,
    center: [23.431365122122635, 113.2348930835724],
    zoom: 15,
  });
  const baseLayer = L.tileLayer(
    "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    {
      maxZoom: 18,
    }
  ).addTo(map);

  window.timeSpotList = [
    "2019-08-27T16:00:00Z",
    "2019-08-26T16:00:00Z",
    "2019-08-25T16:00:00Z",
    "2019-08-24T16:00:00Z",
    "2019-08-23T16:00:00Z",
    "2019-08-22T16:00:00Z",
    "2019-08-21T16:00:00Z",
    "2019-08-20T16:00:00Z",
    "2019-08-19T16:00:00Z",
    "2019-08-18T16:00:00Z",
  ];
  //地图叠加历史扰动图斑
  window.spotWmsLayer = L.tileLayer
    .wms("http://localhost:8080/geoserver/gwc/service?", {
      layers: "DGSYS:historySpot", //需要加载的图层
      format: "image/png", //返回的数据格式
      transparent: true,
      cql_filter: "atime = 2019-08-27T16:00:00Z",
    })
    .addTo(map);
};
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

下载源码（包括图斑测试数据在内）：GIS之家的学习交流圈