网站建设视频演示,展示型装饰网站模板下载,动画制作大师,长尾关键词1.项目框架搭建
项目地址#xff1a;Webgis: 一个关于webgis、天地图、Leaflet、Vue、数据库的学习框架。
①git到本地#xff0c;vscode打开。 ② 配置后端
搜索下载MySQL插件#xff08;前提#xff1a;电脑中装有MySQL才可应用#xff09;。
连接数据库。
配置基本…1.项目框架搭建
项目地址Webgis: 一个关于webgis、天地图、Leaflet、Vue、数据库的学习框架。
①git到本地vscode打开。 ② 配置后端
搜索下载MySQL插件前提电脑中装有MySQL才可应用。
连接数据库。
配置基本信息如ip、port、账号、密码。
保存连接如下图连接成功。 下图
1.api定义接口启动数据库服务。
2.config数据库配置文件。
3.models数据库遥感数据表。 首先配置连接信息如。 创建conda环境再安装必要依赖。 点击运行创建表提示连接成功。 ③配置遥感图层处理脚本
配置环境其中 osgeo比较麻烦单独给出修改文件路径运行脚本。
conda install -c conda-forge gdal
参考osgeo python安装入门实例_osgeo库安装-CSDN博客 配置读取路径个人问题点击运行脚本。 遥感处理文件夹下生成out_geotiff文件夹、前端的public下也生成out_geotiff文件夹。
脚本具体实现看后续... ④配置前端
配置环境安装必要依赖不是conda环境。 运行npm run serve看到前端页面。 2.项目框架代码学习
①前端
导入基本地图
templatediv idbaseMap styleheight: 100vh; width: 100%; /div
/templatescript
//地图
import { onMounted, ref } from vue;
import L from leaflet;
import leaflet/dist/leaflet.css;
import leaflet.chinatmsproviders;
import leaflet-geotiff;
import /utils/leaflet-geotiff-plotty.js;export default {setup() {// 地图初始化const MapKey 4be8e59596e4cee92183d2a61d77ce0c;// const MapKey d70045af77b5a8c2fac6a69b80ffdd7a;const map ref(null);const layerVisibility ref([false, false, false]);const allLayers ref([]); // 存储所有加载的遥感图层const layerGroup ref(L.layerGroup()).value; // 使用 layerGroup 管理图层onMounted(() {// 初始化地图map.value L.map(baseMap, {center: L.latLng(45.757000, 126.642000),//哈尔滨// center: L.latLng(45.75075431739313, 127.5517068330741),//宾县//center: L.latLng(46.05075431739313,126.8517068330741),//呼兰区//center: L.latLng(55.23545507478532, 10.106575515900523),//田块分割//center: L.latLng(29.676840, -95.369222),zoom: 8,zoomControl: true,attributionControl: false,});// 加载天地图基础图层let satelliteTileLayer L.layerGroup([L.tileLayer.chinaProvider(TianDiTu.Satellite.Map, { key: MapKey }),L.tileLayer.chinaProvider(TianDiTu.Satellite.Annotion, { key: MapKey })]);// 加载遥感图层satelliteTileLayer.addTo(map.value);layerGroup.addTo(map.value); // 将 layerGroup 添加到地图});return {map,layerGroup,layerVisibility, // 添加到返回对象中allLayers,};}
};
/script
测试页面 测试代码
templatediv classcontainerdivh1WebGIS Test/h1/divdiv stylemargin-bottom: 20px;!-- 农田遥感指数图层选择框 --el-col :span3.5 v-fortype in [NDVI, WET, NDBSI] :keytypeel-button stylewidth: 130px; clicktoggleLayer(type, qixingnongchang){{ type }}/el-button/el-col!-- 隐藏所有图层 --el-col :span2.5el-button stylewidth: 120px; clickhideAllLayers隐藏所有图层/el-button/el-col/divdiv idbaseMap styleheight: 500px; width: 50%; /div/div
/templatescript
import { onMounted, ref } from vue;
import L from leaflet;
import leaflet/dist/leaflet.css;
import leaflet.chinatmsproviders;
import leaflet-geotiff;
import /assets/leaflet-geotiff-plotty.js;
import axios from axios;
export default {data() {return {activeName: third,currentTime: ,data: [], // 用于存储从 API 获取的返回遥感数据activeLayers: [],};},methods: {// 根据 activeName 获取对应日期getDateByActiveName() {const dateMap {first: 2024-05-03,second: 2024-06-04,third: 2024-07-14,fourth: 2024-08-31,fifth: 2024-09-24,sixth: 2024-10-26,};console.log(1.获取对应日期, dateMap[this.activeName]);return dateMap[this.activeName] || null;},//展示图层async toggleLayer(type, FieldName) {//layerKey图层名称console.log(type:, type, FieldName:, FieldName);const layerKey ${this.getDateByActiveName()}_${type}_${FieldName}; // 使用 date、type 和 FieldName 组合作为唯一标识console.log(2.layerKey: , layerKey)// 如果图层已经显示则隐藏否则加载并显示if (this.layerVisibility[layerKey]) {console.log(3.隐藏图层:, layerKey);this.hideLayer(layerKey); // 隐藏图层} else {console.log(3.显示图层:, layerKey);// 将当前激活的图层标识符 layerKey 添加到 activeLayers 数组中。this.activeLayers.push(layerKey); // 将图层标记为活跃/*** await 是用于等待一个 Promise 对象完成的关键字。它只能在 async 函数内部使用。当执行到这一行代码时程序会暂停执行直到 fetchData 函数执行完成并返回结果。* fetchData 是一个异步函数其主要功能是向服务器发送请求以获取遥感数据并将这些数据加载为 GeoTIFF 图层以在地图上进行显示。*/await this.fetchData(type, FieldName); // 加载并显示图层}},/*** * param type 遥感指数类型* param FieldName * 首先获取当前的日期然后使用 Axios 库向指定的 API 发送一个 POST 请求包含必要的过滤条件例如日期、类型和字段名。* 通过 API 返回的数据将被处理并转换为地图可显示的图层。* 图层加载完成后将图层添加到 layerGroup 中并设置图层可见性。*/async fetchData(type, FieldName) {const date1 this.getDateByActiveName();console.log(4.对应日期为:, date1);const filters { Date: date1, type: type, FieldName: FieldName, };try {// 通过向指定的 API 发送 POST 请求来获取遥感数据。const response await axios.post(http://127.0.0.1:5002/api/remote_sensing, filters);// 将 API 返回的数据存储在 data 数组中this.data response.data;console.log(5.Data fetched:, response.data);// 遍历数据并加载为 GeoTIFF 图层/*** 1遍历数据数组this.data.forEach((layerData) { 使用forEach方法遍历this.data数组。this.data包含从API获取的遥感数据而layerData是当前遍历到的每一个数据项。* * 2遍历每一项数据获取其FileNameUrl、SouthWestLatitude、SouthWestLongitude、NorthEastLatitude、NorthEastLongitude、Max、Min等属性。* FileNameUrl: GeoTIFF文件的URL地址用于加载图层。* Max和Min: 用于显示图层数据的最小值和最大值。* * 3定义边界坐标创建一个bounds数组来定义图层的地理范围。其中西南角和东北角的经纬度分别被转换为浮点数使用parseFloat以确保它们是数值型数据。这是重要的一步因为地图需要准确的地理坐标来渲染。*/this.data.forEach((layerData) {const { FileNameUrl, SouthWestLatitude, SouthWestLongitude, NorthEastLatitude, NorthEastLongitude, Max, Min } layerData;const bounds [[parseFloat(SouthWestLatitude), parseFloat(SouthWestLongitude)],[parseFloat(NorthEastLatitude), parseFloat(NorthEastLongitude)],];/*** bounds 属性指定了图层的地理范围即这个图层在地图上显示的区域。* renderer 属性指定了图层的渲染方式。这里使用了 plotty 渲染器它可以将遥感数据转换为可视化的图像。* L.LeafletGeotiff.plotty 是一个 Leaflet 插件用于将 GeoTIFF 数据转换为可视化的图层。* options 对象包含了图层的边界、渲染器和透明度。* opacity 属性指定了图层的透明度。*/const options {bounds: bounds,renderer: L.LeafletGeotiff.plotty({displayMin: parseFloat(Min),displayMax: parseFloat(Max),colorScale: viridis,noDataValue: -1,}),opacity: 1,};/*** 1创建 GeoTIFF 图层使用 L.leafletGeotiff 方法创建了一个 GeoTIFF 图层。FileNameUrl 是图层数据的 URL指向一个 GeoTIFF 文件而 options 是一个配置对象包含了边界、渲染器和透明度等信息。* 2将图层添加到 layerGroup 中使用 addLayer 方法将图层添加到 layerGroup 中。* 3allLayers 数组: 存储图层和类型将图层和类型存储在 allLayers 数组中。* 4设置图层可见性将图层的可见性设置为 true。*/// 创建 GeoTIFF 图层const geoTiffLayer L.leafletGeotiff(FileNameUrl, options);console.log(6.FileNameUrl:, FileNameUrl, bounds:, bounds, options:, options);console.log(6.geoTiffLayer:, geoTiffLayer);this.layerGroup.addLayer(geoTiffLayer); // 添加图层到 layerGroupconsole.log(6.layerGroup:, this.layerGroup);const layerKey ${this.getDateByActiveName()}_${type}_${FieldName}; // 使用 date0、type 和 number 组合作为唯一标识this.allLayers.push({ layer: geoTiffLayer, type: layerKey }); // 存储图层和类型console.log(6.allLayers:, this.allLayers);this.layerVisibility[type] true;/*** Q:为什么FileNameUrl是 output_geotiff\20240714_RemoteSensingIndex\20240714_qixingnongchang_NDVI_geotiff.tif但是可以访问到public文件夹* A:因为FileNameUrl是API返回的路径而public文件夹是后端服务的静态资源目录两者是两个不同的概念。API返回的路径是相对于后端服务的而public文件夹是相对于前端页面的。因此当API返回的路径指向public文件夹中的文件时前端页面可以通过该路径访问到该文件。* 后端返回数据* result* [{id: 23, Createtime: 2024-11-27 11:10:02, *FileName: 20240714_qixingnongchang_NDVI_geotiff.tif, *FileNameUrl: output_geotiff\\20240714_RemoteSensingIndex\\20240714_qixingnongchang_NDVI_geotiff.tif, *type: NDVI, SouthWestLatitude: 47.0486, SouthWestLongitude: 132.631, NorthEastLatitude: 47.2315, NorthEastLongitude: 133.183, Max: 0.908199, Min: 0.000760456, Mean: 0.738675, Date: 2024-07-14, FieldName: qixingnongchang}] * * 前端页面访问路径http://127.0.0.1:5000/public/output_geotiff/20240714_RemoteSensingIndex/20240714_qixingnongchang_NDVI_geotiff.tif*//*** 设置中心点和缩放级别使用 setView 方法设置中心点和缩放级别。这里使用了经纬度和缩放级别的平均值来设置中心点和缩放级别。* 这里的经纬度和缩放级别的计算方法是* 1. 计算中心点的经纬度使用 SouthWestLatitude、SouthWestLongitude、NorthEastLatitude、NorthEastLongitude 四个属性的平均值来计算中心点的经纬度。* 2. 计算缩放级别根据中心点的经纬度和边界坐标的距离来计算缩放级别。如果边界坐标的距离小于 0.1 公里则使用 11 级否则使用 13 级。*/const x (parseFloat(SouthWestLatitude) parseFloat(NorthEastLatitude)) / 2;const y (parseFloat(SouthWestLongitude) parseFloat(NorthEastLongitude)) / 2;const z (parseFloat(NorthEastLatitude) - parseFloat(SouthWestLatitude));this.map.setView(L.latLng(x, y), z 0.1 ? 11 : 13);console.log(时期${date1}显示图层: ${type}名称${FieldName});this.layerVisibility[layerKey] true; // 更新图层可见状态});} catch (error) {console.error(Error fetching data:, error);}},// 隐藏图层hideLayer(layerKey) {//const layerKey ${this.getDateByActiveName()}_${type}_${FieldName}; // 使用 date0、type 和 number 组合作为唯一标识// 遍历 allLayers 数组找到匹配的图层并隐藏this.allLayers this.allLayers.filter(({ layer, type: layerType }) {console.log(layerKey)// 如果图层类型和 layerKey 匹配则隐藏图层并返回 false否则返回 trueif (layerType layerKey) {this.layerGroup.removeLayer(layer);this.layerVisibility[layerKey] false;return false;}return true;});},// 隐藏所有图层hideAllLayers() {// 遍历 allLayers 数组隐藏所有图层this.allLayers.forEach(({ layer }) {// 隐藏每个图层:this.layerGroup.removeLayer(layer);});this.allLayers [];Object.keys(this.layerVisibility).forEach((key) {this.layerVisibility[key] false;});console.log(已隐藏所有图层);},},setup() {// 地图初始化// const MapKey 4be8e59596e4cee92183d2a61d77ce0c;const MapKey d70045af77b5a8c2fac6a69b80ffdd7a;const map ref(null);const layerVisibility ref([false, false, false]);const allLayers ref([]); // 存储所有加载的遥感图层const layerGroup ref(L.layerGroup()).value; // 使用 layerGroup 管理图层onMounted(() {// 初始化地图map.value L.map(baseMap, {center: L.latLng(45.757000, 126.642000),//哈尔滨// center: L.latLng(45.75075431739313, 127.5517068330741),//宾县//center: L.latLng(46.05075431739313,126.8517068330741),//呼兰区//center: L.latLng(55.23545507478532, 10.106575515900523),//田块分割//center: L.latLng(29.676840, -95.369222),zoom: 8,zoomControl: true,attributionControl: false,});// 加载天地图基础图层let satelliteTileLayer L.layerGroup([L.tileLayer.chinaProvider(TianDiTu.Satellite.Map, { key: MapKey }),L.tileLayer.chinaProvider(TianDiTu.Satellite.Annotion, { key: MapKey })]);// 加载遥感图层satelliteTileLayer.addTo(map.value);layerGroup.addTo(map.value); // 将 layerGroup 添加到地图});return {map,layerGroup,layerVisibility, // 添加到返回对象中allLayers,};}
};
/scriptstyle scoped
.container {display: flex;flex-direction: column;/* 垂直布局 */justify-content: center;/* 垂直居中 */align-items: center;/* 水平居中 */height: 100vh;/* 使容器占满整个视口高度 */
}
/style②遥感图处理脚本
