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 >
<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>
完整文章以及原始碼下載跳轉到小專欄
GIS之家作品店鋪：GIS之家作品店鋪GIS之家原始碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢
掃碼關注GIS之家微信公眾號，訊息發送“gis之家”可免費獲取地圖資料以及arcgis系列安裝包等資源
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548845.html
標籤：其他