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

示例效果

效果图如下：

实现思路
kriging 渲染空间插值在容器 canvas，然后 canvas 容器以图片图层形式叠加在 leaflet 地图上

• 核心源码

<template>
  <canvas id="canvasMap" style="display: none"></canvas>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:克里金插值渲染显示</span>
  </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 = () => {
  // 创建地图对象
  map = L.map("map", {
    attributionControl: false,
  }).setView([38.65953686, 120.8696333], 9);
  //创建底图数据源
  const baseLayer2 = L.tileLayer(config.baseMaps[1].Url); //ArcGIS影像图
  map.addLayer(baseLayer2); //地图默认加载的底图


  let positions = [];
  world[0].forEach(function (point) {
    positions.push([point[1], point[0]]);
  });
  const scope = L.polyline(positions, { color: "red" }).addTo(map);
  map.fitBounds(scope.getBounds());
  loadkriging();
  const imageBounds = [
    [39.18501934760944, 121.75573509037618],
    [39.39127165938733, 122.01776807642929],
  ];
  L.imageOverlay(returnImgae(), imageBounds, { opacity: 0.8 }).addTo(map);
};
……
</script>

完整文章以及源码下载跳转到小专栏