vue3+leaflet天地图开发

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
// todo 项目使用请放开 leaflet 引入
// import L from 'leaflet';

const emit = defineEmits(["mapLoad"]);

var markers = ref([]);
const mapRef = ref();
const marker = ref();
const map = ref(null);
let current = ref(0);

// 默认多边形
let polygon = ref([]);
// 地图底图
// 第一种
let mapType = ref("vec");
let mapLabelType = ref("cva");
// 第二种
//'img'，'cia'
let mapType1 = ref(
  L.tileLayer(
    "https://t{s}.tianditu.gov.cn/" +
      "vec" +
      "_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" +
      "vec" +
      "&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=自己的token",
    {
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    }
  )
);
let mapLabelType1 = ref(
  L.tileLayer(
    "https://t{s}.tianditu.gov.cn/" +
      "cva" +
      "_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" +
      "cva" +
      "&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=自己的token",
    {
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    }
  )
);
let mapType2 = ref(
  L.tileLayer(
    "https://t{s}.tianditu.gov.cn/" +
      "img" +
      "_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" +
      "img" +
      "&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=自己的token",
    {
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    }
  )
);
let mapLabelType2 = ref(
  L.tileLayer(
    "https://t{s}.tianditu.gov.cn/" +
      "cia" +
      "_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" +
      "cia" +
      "&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=自己的token",
    {
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    }
  )
);
const initMap = () => {
  map.value.addLayer(mapType1.value);
  map.value.addLayer(mapLabelType1.value);
  map.value.on("click", ({ latlng }) => {
    console.log("坐标：", Object.values(latlng));
  });
  // 回显多边形
  var latlngs = [
    [32.014771671618604, 118.78512382507326],
    [32.01360723504821, 118.815336227417],
    [32.005164627449425, 118.81842613220216],
    [31.992135284867004, 118.81550788879396],
    [31.997885893345625, 118.7985134124756],
  ];
  polygon.value = L.polygon(latlngs, {
    color: "#000eff",
    fillColor: "#0000ed",
    weight: 1,
  });
  map.value.addLayer(polygon.value);
  // 地图初始化完成发送事件
  emit("mapLoad", map.value);
  return map.value;
};
// 绘制数组
let drawList = ref([]);
// 多边形图层
let drawObj = ref(null);
// 多边形对象
let gh = ref(null);
let markerList = ref([]);
let jk = ref(0);
// 绘制
const draw = () => {
  map.value.on("click", ({ latlng }) => {
    console.log("坐标：", Object.values(latlng));
    // 如果已经渲染过多形图，那就重置多边形点位坐标和数组
    if (jk.value == 1) {
      markerList.value.forEach((item) => {
        mapObj.value.removeLayer(item);
      });
      drawList.value = [];
      jk.value = 0;
    }
    // 防止重复绘制，否则会重叠
    if (gh.value) {
      map.value.removeLayer(gh.value);
    }
    if (
      drawList.value.find((item) => {
        return item === Object.values(latlng);
      })
    ) {
    } else {
      // 继续绘制
      drawList.value.push(Object.values(latlng));
      drawObj.value = L.featureGroup(
        drawList.value.map((item) => {
          return L.marker(item);
        })
      );
      // 绘制完成，形成多边形
      gh.value = L.polygon(drawList.value, {
        color: "#000",
        fillColor: "red",
        weight: 2,
      });
      map.value.addLayer(gh.value);
      marker.value = L.marker(latlng).addTo(mapObj.value);
      markerList.value.push(marker.value);
      drawObj.value.on("click", (e) => {
        console.log("批量创建的 marker 触发点击事件", e, "111111");
      });
    }
  });
};
// 删除
const delAll = () => {
  if (gh.value) {
    mapObj.value.removeLayer(gh.value);
    if (markerList.value.length) {
      // 删除多边形点位坐标
      markerList.value.forEach((item) => {
        mapObj.value.removeLayer(item);
      });
    }
  }
  map.value.off("click");
  jk.value = 1;
};
// 完成
const accomplish = () => {
  console.log(drawList.value);
  console.log(markerList.value);
  if (markerList.value.length) {
    markerList.value.forEach((item) => {
      mapObj.value.removeLayer(item);
    });
  }
  console.log(map.value);
  map.value.off("click");
  jk.value = 1;
};

const mapObj = ref();
const markerLayerGroup = ref();
// 清除图层组图层
const clearMarkerLayerGroup = () => {
  if (markerLayerGroup.value) {
    mapObj.value.removeLayer(markerLayerGroup.value);
    markerLayerGroup.value = null;
  }
};
// 创建多个 marker
const createMarkers = () => {
  // 加载前先清除
  clearMarkerLayerGroup();
  const points = [
    [32.0148855, 118.8276675],
    [32.0138855, 118.8477675],
    [31.99239761297989, 118.83490562438966],
  ];

  const markers = points.map((item, index) => {
    // 下面可以设置图标信息
    var markerOptions = {
      // icon:'',
      message: "这是测试信息" + index,
    };
    return L.marker(item, markerOptions);
  });

  // // 将 marker 加载到图层组
  markerLayerGroup.value = L.featureGroup(markers);

  // 绑定事件
  markerLayerGroup.value.on("click", (e) => {
    console.log("批量创建的 marker 触发点击事件", e);
    // 拿到自定义信息   e.layer.options.message
  });

  // 将图层组加载到地图
  markerLayerGroup.value.addTo(mapObj.value);
};
// 在 onMounted 中初始化地图
onMounted(() => {
  map.value = L.map(mapRef.value, {
    center: [29.63184912891887, 91.11785888671876],
    zoom: 5,
    minZoom: 3,
    maxZoom: 22,
    noWrap: true,
    // dragging: false,
    zoomControl: true,
    attributionControl: false,
  });
  mapObj.value = initMap();
  createMarkers();
});

const removeMap = () => {
  if (mapObj.value) {
    mapObj.value.remove();
  }
};
const change = () => {
  // console.log(mapObj.value);
  // console.log(map.value);
  console.log("切换地图");
  if (current.value % 2 === 0) {
    map.value.removeLayer(mapType1.value);
    map.value.removeLayer(mapLabelType1.value);
    map.value.addLayer(mapType2.value);
    map.value.addLayer(mapLabelType2.value);
  } else {
    map.value.removeLayer(mapType2.value);
    map.value.removeLayer(mapLabelType2.value);
    map.value.addLayer(mapType1.value);
    map.value.addLayer(mapLabelType1.value);
  }
  current.value++;
};
// 在组件卸载时删除地图
onUnmounted(() => {
  removeMap();
});
</script>

<template>
  <button @click="change">切换地图底图</button>
  <button @click="draw">开始绘制多边形</button>
  <button @click="accomplish">完成绘制多边形</button>
  <button @click="delAll">删除多边形</button>
  <div ref="mapRef" class="map" @click="didi"></div>
</template>

<style scoped lang="scss">
.map {
  height: 100vh;
  z-index: 0;
}
::v-deep {
  .leaflet-right {
    display: none !important;
  }
}
</style>

安装leaflet

npm install leaflet

在main.js中引入

import "leaflet/dist/leaflet.css";
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from "leaflet";

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/252876.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

linux环境安装可操作图库语言Gremlin的图框架HugeGraph

linux环境安装可操作图库语言Gremlin的图框架HugeGraph

原创/朱季谦 若你还没接触过图数据库&#xff0c;可能看到这个概念时&#xff0c;会比较蒙蔽。 图是什么&#xff1f;图数据库又是什么&#xff1f; 首先&#xff0c;在数据结构中&#xff0c;图是一种由顶点&#xff08;vertex&#xff09;集合及顶点间关系集合组成的一种非…
阅读更多...
FRP内网映射家用服务器至公网访问

FRP内网映射家用服务器至公网访问

兄弟们&#xff0c;服务器到货了&#xff0c;后续与大家分享内容就用它了。我预装的操作系统是Centos8,首先要解决的是远程访问的问题。 【特别注意】下述的端口&#xff0c;记得在阿里云安全组配置中放开端口入规则&#xff01;&#xff01; 1. FRP服务器配置 之前我有购买…
阅读更多...
如何将数据库导入MySQL的办法

如何将数据库导入MySQL的办法

在电脑cmd终端进行导入 首先找到MySQL中bin的位置 第一步&#xff1a;找到MySQL 第二步&#xff1a;进入MySQL 第三步&#xff1a;打开bin 第四步&#xff1a;输入cmd进入终端 第五步&#xff1a; 输入mysql -uroot -p 然后会弹出enter password&#xff1a; 输入你的密码…
阅读更多...
Leetcode的AC指南 —— 链表：24. 两两交换链表中的节点

Leetcode的AC指南 —— 链表：24. 两两交换链表中的节点

摘要&#xff1a; Leetcode的AC指南 —— 链表&#xff1a;24. 两两交换链表中的节点。题目介绍&#xff1a;给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能…
阅读更多...
[计网01] 物理层 详细解析笔记,特性

[计网01] 物理层 详细解析笔记,特性

计算机网络的物理层是网络协议栈中的第一层&#xff0c;负责传输原始的比特流&#xff08;bitstream&#xff09;通过物理媒介进行通信。物理层主要关注传输介质、信号的编码和调制、数据传输速率以及数据传输的物理连接等方面。 相关特性 机械特性&#xff08;Mechanical Ch…
阅读更多...
Java已死！

Java已死！

许多开发者仍然认为 Java 与当今时代息息相关&#xff0c;看完本文&#xff0c;你会发现 Java 的影响力已经大幅减弱。实际上&#xff0c;Java 是一种濒临灭绝的编程语言。尽管 Java 一直是世界上使用最广泛、最受欢迎的编程语言之一&#xff0c;但它很快就会面临消亡的危险。 …
阅读更多...
【C语言加油站】qsort函数的模拟实现

【C语言加油站】qsort函数的模拟实现

qsort函数的模拟实现 导言一、回调函数二、冒泡排序2.1 冒泡排序实现升序 三、qsort函数3.1 qsort函数的使用3.2 比较函数 四、通过冒泡排序模拟实现qsort函数4.1 任务需求4.2 函数参数4.3 函数定义与声明4.4 函数实现4.4.1 函数主体4.4.2 比较函数4.4.3 元素交换 4.5 my_qsort…
阅读更多...
单片机控制步进电机

单片机控制步进电机

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、步进电机的工作原理是什么&#xff1f;二、连线图三、程序1.参考程序2.实际测试 四、开发板1.原理图2.实际连接图3.参考程序4.测试5. 思考 五、步距角总结 …
阅读更多...
面向对象三大特征——继承

面向对象三大特征——继承

目录 1. 概述 2. 继承的限制 2.1 单继承 2.2 访问修饰符 2.3 . final 3. 重写 4. super 4.1super的作用 4.2访问父类的成员和被重写方法 4.3调用父类的构造器 1. 概述 多个类中存在相同属性和行为时&#xff0c;将这些内容抽取到单独一个类中&#xff0c;那么就无需在…
阅读更多...
【JavaEE】多线程案例 - 定时器

【JavaEE】多线程案例 - 定时器

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…
阅读更多...
中文论文修改和润色哪个好 神码ai

中文论文修改和润色哪个好 神码ai

大家好&#xff0c;今天来聊聊中文论文修改和润色哪个好&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff0c;可以借助此类工具&#xff1a; 标题&#xff1a;中文论文修改和润色&#xff0c;哪个更好&#x…
阅读更多...
【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面）

【OpenHarmony 北向应用开发】ArkTS语言入门（构建应用页面）

ArkTS语言入门 在学习ArkTS语言之前&#xff0c;我们首先需要一个能够编译并运行该语言的工具 DevEco Studio。 了解ArkTS ArkTS是OpenHarmony优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;继…
阅读更多...
关于找不到XINPUT1_3.dll,无法继续执行代码问题的5种不同解决方法

关于找不到XINPUT1_3.dll,无法继续执行代码问题的5种不同解决方法

一、xinput1_3.dll的作用 xinput1_3.dll是Windows操作系统中的一款动态链接库文件&#xff0c;主要用于支持游戏手柄和游戏输入设备。这款文件属于Microsoft Xbox 360兼容性库&#xff0c;它包含了与游戏手柄和其他输入设备相关的功能。在游戏中&#xff0c;xinput1_3.dll负责…
阅读更多...
（数据结构）单链表的插入删除

（数据结构）单链表的插入删除

代码实现 #include<stdio.h> #include<stdlib.h> typedef struct LNode {int data;struct LNode* next; }LNode, * LinkList; //创建头结点 LNode* InitList(LinkList L) {L (LNode*)malloc(sizeof(LNode));if (L NULL){printf("申请头结点失败\n");…
阅读更多...
git 上传大文件操作 lfs 的使用

git 上传大文件操作 lfs 的使用

我们要先去下载 下载后安装 我最后还是下载到了D:\git\Git\bin这个目录下 如何检查是否下载成功呢&#xff0c;用 git lfs install 在命令行运行就可以查看 下面怎么上传文件呢 首先我们还是要初始化文件的 git init 下一步输入命令 git lfs install 下一步 git lfs tra…
阅读更多...
如何在安装了巨魔2的iphone中运行Theos编译的本地化二进制工具:Bootstrap

如何在安装了巨魔2的iphone中运行Theos编译的本地化二进制工具:Bootstrap

如何在安装了巨魔2的iphone中运行Theos编译的本地化二进制工具:Bootstrap 一、首先从https://github.com/34306/iPA/releases/tag/bstr下载jb.zip、jb_with_jb_folder.zip、prefs_fix.ipa三个文件。 二、然后使用Filza文件管理器把jb.zip解压后复制到/var/containers/jb目录&…
阅读更多...
1836_emacs显示空白字符

1836_emacs显示空白字符

Grey 全部学习汇总&#xff1a; GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 全部学习内容汇总&#xff1a; 1836_emacs显示空白字符 show-trailing-whitespace是emacs中内置的一个变量&#xff0c;这个变量的值如果设置为nil那么不…
阅读更多...
c++ websocket 协议分析与实现

c++ websocket 协议分析与实现

前言 网上有很多第三方库&#xff0c;nopoll,uwebsockets,libwebsockets,都喜欢回调或太复杂&#xff0c;个人只需要在后端用&#xff0c;所以手动写个&#xff1b; 1:环境 ubuntu18 g(支持c11即可) 第三方库:jsoncpp,openssl 2:安装 jsoncpp 读取json 配置文件 用 自动安装 网…
阅读更多...
【案例】注册表简介，新建一个右键菜单打开方式选项

【案例】注册表简介，新建一个右键菜单打开方式选项

这里写目录标题 来源注册表的介绍注册表编辑器VScode的打开方式菜单![image-20231217201730121](https://img-blog.csdnimg.cn/img_convert/56c02643df9e8ec3afb4f3ac5cc0cdd5.png)如何自定义一个右键菜单备份注册表新建一个菜单选项”右键用记事本打开“ DWORDQWORD可扩充字符…
阅读更多...
社交网络分析3：社交网络隐私攻击、保护的基本概念和方法 + 去匿名化技术 + 推理攻击技术 + k-匿名 + 基于聚类的隐私保护算法

社交网络分析3：社交网络隐私攻击、保护的基本概念和方法 + 去匿名化技术 + 推理攻击技术 + k-匿名 + 基于聚类的隐私保护算法

社交网络分析3&#xff1a;社交网络隐私攻击、保护的基本概念和方法 去匿名化技术 推理攻击技术 k-匿名 基于聚类的隐私保护算法 写在最前面社交网络隐私泄露用户数据暴露的途径复杂行为的隐私风险技术发展带来的隐私挑战经济利益与数据售卖防范措施 社交网络 用户数据隐私…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站