在leafet上画圆、多边形、线、矩形

在leaflet上画圆、多边形、线、矩形

<template><div id="map" class="map"></div>
</template><script>
import L from 'leaflet';
export default {data () {return {myGroup: '',};},mounted () {this.initMaps()this.huizhiroute()this.huizhiround()this.huizhipolygon()},methods: {initMaps () {const map = L.map('map', {zoomControl: false,attributionControl: false}).setView([39.9042, 116.4074], 10);L.tileLayer('https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',).addTo(map)const myGroup = L.layerGroup()// 将图层组添加到地图上myGroup.addTo(map); // 假设你的地图实例是名为 map 的变量this.myGroup = myGroup},//绘制航线huizhiroute (obj) {let xian = [[39.9042, 116.4074],[39.5042, 116.4074]]L.polyline(xian, { color: 'red' }).addTo(this.myGroup);// console.log(this.routelist,'obj');},//绘制圆形空域huizhiround (obj) {L.circle([39.9042, 116.4074], { radius: 30000 }).addTo(this.myGroup);},//绘制多边形huizhipolygon (obj) {let duo = [[39.9042, 116.4074],[39.7042, 117.4074],[39.8042, 116.4074]]L.polygon(duo, { color: 'pink' }).addTo(this.myGroup);},},}
</script><style lang="less" scoped>
.map {height: 100%;width: 100%;
}
</style>

参考文档链接: leaflet

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

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

相关文章

Houdini的PythonScript基本使用

前言 Houdini内置了Python脚本和相应的编辑器, 很多时候想灵活的制作各种Houdini工具, 基本是必须用到 Python。Houdini官方的python提供了非常完善的接口, 比如可以创建各种节点&#xff0c;连接各种节点&#xff0c;遍历节点各种数据&#xff0c;遍历节点参数等等。 Houdin…

Spring中Bean的生命周期详解

目录 Bean的定义和作用Bean的生命周期概述Bean实例化阶段依赖注入阶段初始化阶段Bean的使用销毁阶段完整的Bean生命周期流程示例代码总结 Bean的定义和作用 在Spring框架中&#xff0c;Bean是指由Spring IoC容器管理的Java对象。Bean是构建Spring应用程序的基本单元&#xf…

word避免画质画质模糊方法

问题描述&#xff1a;   近期写文档时会高频率贴图&#xff0c;粘图过程中发现Word会自动压缩图片画质&#xff0c;而且压缩得很严重&#xff0c;下面是一幅图被压缩前后的画质对比 &#xff08;图片压缩前&#xff09; &#xff08;图片压缩后&#xff09; 解决方案&#x…

基于JSP的九宫格日志网站

你好呀&#xff0c;我是学长猫哥&#xff01;如果有需求可以文末加我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;浏览器/服务器&#xff08;B/S&#xff09;结构 系统展示 首页 管理员功能模块 用户功能模块 摘要 本…

GPT-4o VS GPT-3.5 完胜

前言&#xff1a; 最近&#xff0c;GPT-4o已经限时免费开放了&#xff0c;试了一下&#xff0c;然后&#xff0c;说我的时间到了&#xff0c;然后&#xff0c;有给我转到3.5&#xff0c;正好遇到一个问题做一下对吧&#xff0c;感觉4O完胜啊。3.5还是很好胡诌&#xff0c;也就…

[Algorithm][动态规划][子序列问题][最长定差子序列][最长的斐波那契子序列的长度]详细讲解

目录 1.最长定差子序列1.题目链接2.算法原理详解3.代码实现 2.最长的斐波那契子序列的长度1.题目链接2.算法原理详解3.代码实现 1.最长定差子序列 1.题目链接 最长定差子序列 2.算法原理详解 思路&#xff1a; 确定状态表示 -> dp[i]的含义 以i位置元素为结尾的所有子序列…

Python知识点3---条件判断语句

提前说一点&#xff1a;如果你是专注于Python开发&#xff0c;那么本系列知识点只是带你入个门再详细的开发点就要去看其他资料了&#xff0c;而如果你和作者一样只是操作其他技术的Python API那就足够了。 Python的条件判断语句和其他的语言有些不一样&#xff0c;它只有if语…

【从加载数据库驱动包,理解java SPI】

SPI&#xff08;Service Provider Interface&#xff09; 从1.6引入&#xff0c;基于ClassLoader 来加载并发现服务的机制 对于msyql驱动 引入依赖 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><v…

11.2 选择排序

目录 11.2 选择排序 11.2.1 算法特性 11.2 选择排序 选择排序&#xff08;selection sort&#xff09;的工作原理非常简单&#xff1a;开启一个循环&#xff0c;每轮从未排序区间选择最小的元素&#xff0c;将其放到已排序区间的末尾。 设数组的长度为 &#x1d45b;…

华东师范大学研究团队《Ecology Letters 》揭示植物如何改变其物候以响应全球变化

自工业革命以来&#xff0c;人类活动导致多种环境因子同时发生变化&#xff0c;包括气候变暖、降水模式改变、氮沉降增加和大气CO2升高。这些变化预计会影响植物生命周期事件的季节时序—植物物候&#xff08;Nature Reviews Earth & Environment | 傅伯杰院士团队发文阐述…

[C][栈帧]详细讲解

目录 1.栈帧1.进程地址空间2.栈帧说明 2.认识相关寄存器3.认识相关汇编命令4.过程理解5.栈帧总结6.补充 1.栈帧 1.进程地址空间 .进程地址空间 2.栈帧说明 调用函数&#xff0c;形成栈帧函数返回&#xff0c;释放栈帧局部变量是存放在栈区上的栈区内存的使用习惯是&#xff…

BPTT算法详解:深入探究循环神经网络(RNN)中的梯度计算【原理理解】

引言 在深度学习领域中&#xff0c;我们经常处理的是独立同分布&#xff08;i.i.d&#xff09;的数据&#xff0c;比如图像分类、文本生成等任务&#xff0c;其中每个样本之间相互独立。然而&#xff0c;在现实生活中&#xff0c;许多数据具有时序结构&#xff0c;例如语言模型…

什么是PLAB?

接上文PLAB---》 可以看到和TLAB很像&#xff0c;PLAB即 Promotion Local Allocation Buffers。用在年轻代对象晋升到老年代时。 在多线程并行执行YGC时&#xff0c;可能有很多对象需要晋升到老年代&#xff0c;此时老年代的指针就"热"起来了&#xff0c;于是搞了个…

Google Cloudbuild yaml file 中 entrypoint 和 args 的写法

编写cloudbuild.yaml 时有几个关键参数 entrypoint 和 args 的基本介绍 id: 显示在 cloud build logs 里的item 名字 name: docker 镜像名字 - 下面的命令会在这个镜像的1个容器instance 内执行 entrypoint: 执行的命令入口 &#xff0c; 只能有1个对象 args&#xff1a; 命名…

函数的创建和调用

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 提到函数&#xff0c;大家会想到数学函数吧&#xff0c;函数是数学最重要的一个模块&#xff0c;贯穿整个数学学习过程。在Python中&#xff0c;函数…

深入解析 YOLOv8 中的 `conv.py`(代码图文全解析-下)

&#x1f60e; 作者介绍&#xff1a;我是程序员行者孙&#xff0c;一个热爱分享技术的制能工人。计算机本硕&#xff0c;人工制能研究生。公众号&#xff1a;AI Sun&#xff0c;视频号&#xff1a;AI-行者Sun &#x1f388; 本文专栏&#xff1a;本文收录于《yolov8》系列专栏&…

【linux软件基础知识】与调度相关的进程描述符

进程描述符 每个进程描述符都包括几个与调度相关的字段,如下代码所示: //include/asm-arm/thread_info.h /** low level task data that entry.S needs immediate access to.* __switch_to() assumes cpu_context follows immediately after cpu_domain.*/ struct thread_in…

vite为什么速度快

原因 vite快的原因是因为 vite在开发环境中是使用的 esbuild&#xff0c;esbuild 是 go 写的&#xff0c;go 编译型语言、多线程&#xff0c;nodejs 解释型语言、单线程&#xff0c;并且 vite 使用了原生 esm 导入的&#xff0c;所以快一点&#xff0c;当然&#xff0c;这也…

6.1Java方法

1、方法定义&#xff1a; 方法是一种语法结构&#xff0c;它可以把一段代码封装成一个功能&#xff0c;以便重复调用 方法的完整格式&#xff1a; 修饰符 返回类型 方法名(形参列表){ 方法体代码(需要执行的功能代码) return 返回值; } package com.define;public class …

【缓存】框架层常见问题和对策

缓存是为了加快读写速度&#xff0c;再了解redis这类框架层的缓存应用之前&#xff0c;我们不妨先思考下操作系统层面的缓存解决方案&#xff0c;这样有助于我们更深的理解缓存&#xff0c;哪些是系统层面的&#xff0c;哪些是服务层面。 以下是一些常见的缓存问题及其解决方案…