vue3+leaflet天地图开发

news2024/11/16 7:29:55
<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=b72aa81ac2b3cae941d1eb213499e15e",
    {
      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=b72aa81ac2b3cae941d1eb213499e15e",
    {
      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=b72aa81ac2b3cae941d1eb213499e15e",
    {
      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=b72aa81ac2b3cae941d1eb213499e15e",
    {
      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.coloradmin.cn/o/1315235.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring对JUnit4和junit5的支持

Junit4支持 第一步&#xff1a;准备工作&#xff1a; 引入JUnit4的依赖&#xff0c;Spring对JUnit支持的依赖还是&#xff1a;spring-test&#xff0c;如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://ma…

Cadence SPB17.4 -Allegro - 做Logo封装及添加中文丝印

Cadence SPB17.4 -Allegro - 做Logo封装及添加中文丝印 Chapter1 Cadence SPB17.4 -Allegro - 做Logo封装Chapter2 Allegro添加中文字体的简单有效方法Chapter3 Allegro添加Logo方法方法一方法二 链接&#xff1a;https://pan.baidu.com/s/1eUgUOjOfNam3rqZyQOov_g 提取码&…

Java技术栈 —— Log4j 2、Logpack、SLF4j日志框架介绍

Log4j 2、Logpack、SLF4j日志框架介绍 Log4j 2、Logpack、SLF4j日志框架&#xff0c;及其区别1.1 Log4j 21.1.1 日志级别1.1.2 日志输出目标位置1.1.3 日志刷新机制1.1.4 结构化打印日志1.1.5 异步打印日志1.1.6 在Cloud云环境汇集日志信息 1.2 LogPack1.3 SLF4j1.4 区别 Log4j…

tcp连接全过程各种状态详解

文章目录 TCP的一些重要特性tcp连接全过程各种状态参考资料 TCP的一些重要特性 TCP是一种可靠、面向连接、全双工、流控制、拥塞控制、有序传输、无差错传输、无重复传输、无丢失传输等特点的协议。为了实现这些特点&#xff0c;TCP必须对上层应用程序发送的数据进行分段、重组…

玩转大数据18:大规模数据处理与分布式任务调度

引言 在数字化时代&#xff0c;数据成为了一种宝贵的资源&#xff0c;对于企业和组织来说&#xff0c;如何有效地处理和分析这些数据成为了关键的竞争力。大规模数据处理与分布式任务调度作为大数据处理的核心技术&#xff0c;为解决这一问题提供了有效的解决方案。 随着数据…

Python如何匹配库的版本

目录 1. 匹配库的版本 2. Python中pip&#xff0c;库&#xff0c;编译环境的问题回答总结 2.1 虚拟环境 2.2 pip&#xff0c;安装库&#xff0c;版本 1. 匹配库的版本 &#xff08;别的库的版本冲突同理&#xff09; 在搭建pyansys环境的时候&#xff0c;安装grpcio-tools…

阿赵UE学习笔记——1.安装UE

大家好&#xff0c;我是阿赵&#xff0c;这是一个新的开始&#xff0c;这次先简单介绍一下UE的安装方法。   安装Unreal Engine(简称UE)&#xff0c;需要先按照一个EPIC Games Launcher。 这个其实是EPIC的游戏中心&#xff0c;你可以理解成和Steam差不多&#xff0c;是一个…

盲盒小程序如何搭建?

随着移动互联网的发展&#xff0c;为了让消费者方便快捷地体验盲盒抽取乐趣&#xff0c;线上盲盒系统的开发成为了一个必要的过程。 今天本文将为大家介绍盲盒系统的搭建过程。 盲盒系统搭建过程 开发需求 在开发盲盒系统前&#xff0c;需要对盲盒市场深入分析&#xff0c;了…

IntelliJ IDEA 运行 若依分离版后端

一、本地运行 一、选择打开IntelliJ IDEA项目 二、选择若依项目 如&#xff1a;java123 三、等待右下角的准备工作&#xff08;有进度条的&#xff09;完成 四、修改MySQL 五、修改资源上传目录 六、修改redis 七、然后点击运行 八、成功图 九、测试访问 二、部署服务器运行 …

Linux-----12、时间日期

# 时间日期 # 时区设置 在Linux (opens new window)系统中&#xff0c;默认使用的是UTC时间。 即使在安装系统的时候&#xff0c;选择的时区是亚洲上海&#xff0c;Linux默认的BIOS时间&#xff08;也称&#xff1a;硬件时间&#xff09;也是UTC时间 (opens new window)。 在…

uniapp 单选按钮 选中默认设备

需求1&#xff1a;选中默认设备&#xff0c;113 和114 和139都可以选中一个默认设备 选中多个默认设备方法&#xff1a; async toSwitch(typeItem, title) {const res await this.setDefaultDev(typeItem.ibdr_devsn, typeItem.ibdr_pid)if (!res) {this.common.toast(切换默…

011 数据结构_哈希

前言 本文将会向你介绍哈希概念&#xff0c;哈希方法&#xff0c;如何解决哈希冲突&#xff0c;以及闭散列与开散列的模拟实现 1. 哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经…

Spring容器中scope为prototype类型Bean的回收机制

文章目录 一、背景二、AutowireCapableBeanFactory 方法 autowireBean 分析三、Spring 容器中 scope 为 prototype 类型 Bean 的回收机制四、总结 一、背景 最近做 DDD 实践时&#xff0c;遇到业务对象需要交给 Spring 管理才能做一些职责内事情。假设账号注册邮箱应用层代码流…

【ARM Trace32(劳特巴赫) 使用介绍 1.2 - ARM 系统调试中常见的挑战】

请阅读【Trace32 ARM 专栏导读】 文章目录 ARM 系统调试中常见的挑战ARM 系统调试接口简例DAP-Debug Access portDAP 状态检查多核调试虚拟/物理地址Cache 数据一致性问题系统异常系统复位系统死机PC 采样Memory 采样RAM/Core Dump 分析小概率问题ARM 系统调试中常见的挑战 调试…

PyTorch官网demo解读——第一个神经网络(1)

神经网络如此神奇&#xff0c;feel the magic 今天分享一下学习PyTorch官网demo的心得&#xff0c;原来实现一个神经网络可以如此简单/简洁/高效&#xff0c;同时也感慨PyTorch如此强大。 这个demo的目的是训练一个识别手写数字的模型&#xff01; 先上源码&#xff1a; fr…

数据结构奇妙旅程之栈和队列

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

Linux---重定向命令

1. 重定向命令的介绍 重定向也称为输出重定向&#xff0c;把在终端执行命令的结果保存到目标文件。 2. 重定向命令的使用 命令说明>如果文件存在会覆盖原有文件内容&#xff0c;相当于文件操作中的‘w’模式>>如果文件存在会追加写入文件末尾&#xff0c;相当于文件…

[C++] 虚函数、纯虚函数和虚析构(virtual)

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/weixin_43197380&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 Loewen丶原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&…

http正向代理测试,nginx反向代理中转正向代理服务器

有3台服务器如下&#xff1a; 192.168.111.201&#xff08;反向代理到正向代理服务器&#xff09; 192.168.111.202&#xff08;正向代理服务器&#xff09; 192.168.111.203&#xff08;目标WEB系统&#xff09; 防火墙网络策略如图所示: 1、192.168.111.200 只能访问 192.168…

【送书活动】智能汽车、自动驾驶、车联网的发展趋势和关键技术

文章目录 前言01 《智能汽车》推荐语 02 《SoC底层软件低功耗系统设计与实现》推荐语 03 《SoC设计指南》推荐语 05 《智能汽车网络安全权威指南&#xff08;上册&#xff09;》推荐语 06 《智能汽车网络安全权威指南&#xff08;下册&#xff09;》推荐语 后记赠书活动 前言 …