tauri2+typescript+vue+vite+leaflet等的简单联合使用（一）

项目目标

主要的目的是学习tauri。

流程

1、搭建项目

2、简单的在项目使用leaflet

3、打包

准备项目

环境准备

废话不多说，直接开始

需要有准备能运行Rust的环境和Node，对于Rust可以参考下面这位大佬的文章，Node不必细说。

Rust 和 Cargo 安装指南-CSDN博客https://blog.csdn.net/qq_44154915/article/details/139365116

建立项目

进入tauri2

官网https://tauri.app/start/

笔者将使用pnpm建立项目，项目名称为ttvvl

如下

使用VSCode或者WebStorm打开项目

安装依赖

pnpm install

运行

pnpm tauri dev

然后就在compiling

这笔者感到疑惑，可能是第一次运行，搞了许久

运行结果

没有问题。

看一下文件夹的属性

6个G，有点大。

如果以

pnpm run dev

点击按钮，会出现错误

观察上面的代码，我们可以发现，这个是invoke好像是个方法。第一个参数是个字符串greet

第二个参数是个对象，属性是name。

同时找到src-tauri/src/lib.rs中的代码，如下

fn 是Rust的关键字，相当与定义了一个函数，函数名叫greet，参数name

format！是个格式化字符串的函数

其他不是很懂，但我们可以把这段代码给deepseek，问一问

解答如下

从这里我们可以得到关键信息——被这个宏标记的函数能被前端调用。

因为Rust函数的函数名叫greet，而invoke的第一个参数是字符串greet，我们可以很容易猜测

二者必然有关系，我们可以检验一下

修改函数名为greets，运行

发现报错了

我们可以看到下面还有一个函数

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().plugin(tauri_plugin_opener::init()).invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect("error while running tauri application");
}

可以问一问deepseek

原来下面那个函数是入口函数，invoke_handler是注册器，因此，把中括号里面的greet改成greets

应该可以运行了，（每次都要编译，有点慢）。

如果点击按钮，下面应该不会出现字

事实确实如此。

那么推断很有可能是正确的，那么我们把字符串greet改成greets，就可以出现字了

事实确实如此，笔者明白了。

再次观察，Rust函数greets返回值是String，

而返回格式化后的字符串，对于App.vue中的TypeScript代码，打印出greetMsg.value的值

在运行后的的tauri中，可以打开开发者工具，打印结果如下。

既然如此，感觉明白了，invoke作为Rust与TypeScript交互的关键函数。

安装leaflet有关依赖

pnpm install leaflet leaflet-geoman-free

因为使用typescipt，还需要安装类型定义包

 pnpm install --save @types/leaflet.pm @types/leaflet

显示地图

这也是很麻烦的事情。

安装vue-router

pnpm install vue-router

新建一些目录和文件，如下

在router目录的index.ts中

import {createRouter, createWebHashHistory, Router, RouteRecordRaw, RouterOptions} from "vue-router";
const routes:RouteRecordRaw[]=[{path:"/",redirect:"/map",children:[{path:"map",component:()=>import("../views/Map.vue")}]}
]
const options:RouterOptions={history:createWebHashHistory(),routes
}
const router:Router=createRouter(options)
export default router

暂时先这么写

main.ts的内容

import { createApp } from "vue";
import App from "@/App.vue";
import router from "@/router";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
const app=createApp(App);
app.use(router);
app.config.globalProperties.$L = L;app.mount("#app");

将L作为Vue的全局属性，并且引入插件leaflet-geoman-free及相关样式

关于@符号，不多解释。

在constant/data.ts中

export const MAP_URL= "https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png";

这个是地图瓦片的URL。通过它就能访问地图。

在utils/Map.ts中

import {MAP_URL} from "@/constant/data.ts";
import L from 'leaflet';
const GetMap = (control: any=null, //控件language:any = 'zh' //语言
): L.Map => {const options: L.MapOptions = {center: [30.6667, 104.0667], //中心点minZoom: 0,maxZoom: 30,zoom: 10,zoomControl: true,doubleClickZoom: true,attributionControl: true,dragging: true,boxZoom: true,scrollWheelZoom: true,zoomSnap: 0.5,};const map = L.map('map', options);L.tileLayer(MAP_URL, {attribution: '',}).addTo(map);map.pm.addControls(control); map.pm.setLang(language);return map;
};
export default GetMap;

如果不写

import L from 'leaflet'

Vue: 'L' refers to a UMD global, but the current file is a module. Consider adding an import instead.

在views/Map.vue中

<script setup lang="ts">
import GetMap from "@/utils/Map.ts";
import { onMounted } from 'vue';
let map: any = null
onMounted(() => {map = GetMap();map.on('click', (e: any) => {console.log(e);});
})
</script><template>
<div id="map"></div>
</template><style scoped>
#map {height: 100vh;width: 200vh;
}
</style>

运行，结果如下

地图定位到成都市。

显示控件

可以查看leaflet-geoman-free文档

Introduction | Documentation for Leaflet-Geomanhttps://geoman.io/docs/leaflet在constant/data.ts中

export const MAP_CONTROL={
}

可以写一些设置，但有默认选项，就不改了。

在views/Map.vue中导入MAP_CONTROL，作为GetMap的参数

map = GetMap(MAP_CONTROL);

，使用控件，运行结果如下

搞点小操作1——计算两点之间的距离

操作过程

点两个点，通过invoke函数发送经纬度到rust函数，返回结果

计算距离函数

使用Haversine 公式

haversine公式计算两经纬度点距离-CSDN博客https://blog.csdn.net/spatial_coder/article/details/116605509使用Rust实现,src-tauri/src/lib.rs的代码如下

const EARTH_RADIUS_KM: f64 = 6371.0; // 地球半径，单位：公里
#[tauri::command]
// 计算两个经纬度点之间的距离（单位：公里）
fn haversine_distance(start:[f64;2],end:[f64;2]) -> f64 {// 将经纬度从度数转换为弧度let lat1_rad = start[0].to_radians();let lon1_rad =  start[1].to_radians();let lat2_rad = end[0].to_radians();let lon2_rad = end[1].to_radians();// 经纬度差值let dlat = lat2_rad - lat1_rad;let dlon = lon2_rad - lon1_rad;// Haversine 公式let a = (dlat / 2.0).sin().powi(2) + lat1_rad.cos() * lat2_rad.cos() * (dlon / 2.0).sin().powi(2);let c = 2.0 * a.sqrt().atan2((1.0 - a).sqrt());// 计算距离EARTH_RADIUS_KM * c
}#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().plugin(tauri_plugin_opener::init()).invoke_handler(tauri::generate_handler![haversine_distance]).run(tauri::generate_context!()).expect("error while running tauri application");
}

以公里作为单位

对两个点marker的思考

点了两个点marker，我们通过leaflet和有关插件的某些事件可以获得这两个点的属性，

我们可以修改这些属性。

那应该然后修改？

可以尝试使用tauri的多窗口。

marker位于父窗口，发送信号到子窗口，在子窗口进行修改，返回父窗口。

父子窗口以及发送信号

关于窗口的配置

src-tauri/capabilities/default.json

{"$schema": "../gen/schemas/desktop-schema.json","identifier": "default","description": "Capability for the main window","windows": ["main","marker-name"],"permissions": ["core:default","opener:default","core:window:allow-hide","core:window:allow-show"]
}

在子窗口添加一个路由

src/router/index.ts

    {path:"/name",component:()=>import("../views/name.vue")}

src-tauri/tauri.conf.json

"windows": [{"title": "ttvvl","label": "main","width": 800,"height": 600},{"title": "点位窗口","width": 400,"height": 300,"label": "marker-name","resizable": true,"parent": "main","visible": false,"url":"#/name","decorations": false,"center": true}],

参数的具体含义，可以参考官网或者deekssek

{"windows": [{"label": "main", // 窗口的唯一标识符"title": "My Tauri App", // 窗口标题"width": 800, // 窗口宽度"height": 600, // 窗口高度"x": null, // 窗口初始水平位置（null 表示由系统决定）"y": null, // 窗口初始垂直位置（null 表示由系统决定）"minWidth": null, // 窗口最小宽度"minHeight": null, // 窗口最小高度"maxWidth": null, // 窗口最大宽度"maxHeight": null, // 窗口最大高度"resizable": true, // 是否允许调整窗口大小"fullscreen": false, // 是否全屏"focus": true, // 窗口是否在创建时获得焦点"visible": true, // 窗口是否可见"decorations": true, // 是否显示窗口装饰（标题栏、边框等）"alwaysOnTop": false, // 窗口是否始终置顶"maximized": false, // 窗口是否最大化"transparent": false, // 窗口背景是否透明"center": true, // 窗口是否居中"theme": "system", // 窗口主题（"system"、"light"、"dark"）"url": "index.html", // 窗口加载的页面路径"fileDropEnabled": true, // 是否启用文件拖放功能"skipTaskbar": false, // 是否在任务栏中显示窗口"shadow": true, // 是否显示窗口阴影"acceptFirstMouse": false, // 是否接受首次鼠标点击事件"tabbingIdentifier": null, // macOS 标签页标识符"titleBarStyle": "visible", // macOS 标题栏样式（"visible"、"transparent"、"overlay"）"hiddenTitle": false // 是否隐藏标题栏标题}]
}

父窗口

src/views/Map.vue

<script setup lang="ts">
//@ts-nocheck
import GetMap from "@/utils/Map.ts";
import {MAP_CONTROL} from "@/constant/data.ts";
import {invoke} from "@tauri-apps/api/core";
import {emit,listen} from "@tauri-apps/api/event";
import {onMounted, ref} from 'vue';
import WindowManager from '@/utils/window';const windowManager = new WindowManager();
let startName=ref<String>('起点');
let endName=ref<String>('终点');
let markerWindow,mainWindow,markerIndex=null;
let map: any = null
let markerList: L.Marker[] = [];
let distance=ref<number>(0);listen('message-to-main-window', (event)=>{  //监听消息let payload:any=event.payloadif(payload.close){windowManager.closeWindow('marker-name')mainWindow.show()}if(markerIndex===null){return}if(markerIndex===0){startName.value='起点'+payload.tooltipContent}else{endName.value='终点'+payload.tooltipContent}markerList[markerIndex].bindTooltip(payload.tooltipContent)
});
async function sendMsg(tooltipContent:String,nowClickMarkerId:Number) {  //发送消息markerWindow=await windowManager.getWindowByLabel('marker-name') //子窗口mainWindow=await windowManager.getWindowByLabel('main')  //父窗口if(markerWindow) {mainWindow.hide()markerWindow.show();markerIndex=markerList.findIndex((marker:L.Marker)=>marker._leaflet_id===nowClickMarkerId)emit('message-to-second-window', { //发送消息 参数lat: markerList[0].getLatLng().lat,lng: markerList[0].getLatLng().lng,markerIndex:markerIndex,tooltipContent:tooltipContent})}
}async function get_distance(){let start=markerList[0].getLatLng(); //开始点let end=markerList[1].getLatLng();   //终点let startArray=[start.lat,start.lng];let endArray=[end.lat,end.lng];distance.value = await invoke('haversine_distance', { //发送给rust tauristart: startArray,end: endArray});
}
onMounted(() => {// openWindow()map = GetMap(MAP_CONTROL);map.on('pm:create', (e: any) => { //  map create事件let marker:L.Marker = e.marker;marker.on('click',(e)=>{ // marker的点击事件let nowClickMarkerId=e.target._leaflet_id  // 获取marker的idsendMsg(e.target.getTooltip(),nowClickMarkerId)  // 发送消息})markerList.push(marker);let length = markerList.length;if(length==2){  // 起始点 和终点get_distance()  //获取距离}else if(length>2){markerList[0].remove(); //移除第一个点markerList.shift();get_distance()   // 获取距离}})})
</script><template>
<div id="map"><div id="distance-text" v-if="markerList.length>=2">从{{startName}}到{{endName}}的距离为</div><div><button type="button" id="show" >{{distance}}</button></div><div id="unit">公里</div></div>
</template><style scoped>
#map {margin: 0 auto;width: 100%;height: 900px;
}
#show {max-width: 200px;max-height: 50px;padding: 10px;background-color: blue;color: white;text-align: center;position: absolute;top: 100px;right: 10px;z-index: 999;border-radius: 20px;
}
#distance-text {max-width: 200px;max-height: 50px;padding: 10px;background-color: #af8433;color: white;text-align: center;position: absolute;top: 10px;right: 10px;z-index: 999;border-radius: 20px;
}
#unit {max-width: 200px;max-height: 50px;padding: 10px;background-color: #af8433;color: white;text-align: center;position: absolute;top: 150px;right: 10px;z-index: 999;border-radius: 20px;
}</style>

子窗口

src/views/Name.vue

<script setup>
import {listen,emit} from "@tauri-apps/api/event";
import {onMounted, ref} from "vue";
let lat = ref(0);
let lng = ref(0);
let markerIndex = ref(0); // 0 替换成起点 1 替换成终点
let inputValue = ref('');
let oldTooltip=nullconst handleClicked = () => {emit('message-to-main-window', {tooltipContent:inputValue.value,close: true,});
}
const handleCancel = () => {emit('message-to-main-window', {tooltipContent:oldTooltip,close: true,});
}
onMounted(() => {listen('message-to-second-window', (event) => {let payload = event.payload;lat.value = payload.lat;lng.value = payload.lng;markerIndex.value = payload.markerIndex;inputValue.value=payload.tooltipContent;oldTooltip=payload.tooltipContent});}
)</script>
<template><div  data-tauri-drag-region class="titlebar"  ><h1>{{markerIndex===0?'起点':'终点'}}</h1><div v-if="lat>0">纬度：{{lat  }}</div><div v-if="lng>0">经度：{{lng  }}</div><div>名称<br/><input v-model="inputValue"></input></div><br/><button type="button" @click="handleClicked" class="sure">确定</button><button type="button" @click="handleCancel" class="cancel">取消</button></div>
</template>
<style >
.sure{padding: 10px ;margin-right: 10vw;background-color: #5174ff;
}
.cancel{padding: 10px ;margin-right: 10vw;background-color: #ffb43e;}</style>

窗口管理

src/utils/window.ts

import { getAllWebviewWindows } from '@tauri-apps/api/webviewWindow';export class WindowManager {async getWindowByLabel(label: string) {const windows = await getAllWebviewWindows();return windows.find((win) => win.label === label);}async closeWindow(label: string) {const window = await this.getWindowByLabel(label);if (window) {window.hide();}}
}export default WindowManager;

运行结果

运行结果倒是没问题，代码写得不行，算了。不管那些。

打包

本地打包

打包成exe命令

pnpm tauri build

因为笔者不是第一次打包，如果是第一次打包，需要下载一些东西，笔者就不展示了，可参考下面这位大佬的过程。

从零开始的 Tauri 开发 & 打包成 exe 【Windows 平台】_tauri 打包-CSDN博客https://blog.csdn.net/u010263423/article/details/136006546对于leaflet打包，会出现一个bug，解决过程可看这篇文章

解决Vue+Vite打包后Leaflet的marker图标不显示的问题_leaflet l.marker 没有-CSDN博客https://blog.csdn.net/qq_63401240/article/details/139972362?spm=1001.2014.3001.5502总之。打包结果