在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
相关文章:
在leafet上画圆、多边形、线、矩形
在leaflet上画圆、多边形、线、矩形 <template><div id"map" class"map"></div> </template><script> import L from leaflet; export default {data () {return {myGroup: ,};},mounted () {this.initMaps()this.huizhiro…...
SpringBoot中如何在服务器进行校验?
数据校验就是数据的合法性检查,在服务器端也可以对数据进行校验,一般使用JSR303 校验 JSR303是Java为Bean数据合法性校验提供的标准框架,是一种声明式校验 JSR303通过在Bean属性上标注类似于NotNull、Max等注解来指定校验规则,并…...
element ui 的el-input输入一个字后失去焦点,需重新点击输入框才能再次输入
解决方案: 我是form表单嵌套表格,里面的el-input输入框,输入第一个值的时候会突然失去焦点,需要再次点击输入框才能正常输入,原因是table的key值,需要改成正常的index即可,如果你是循环的&…...
【绝地求生game】
编写一个完整的《绝地求生》这样的游戏程序代码是一个庞大的工程,涉及到成千上万行的代码和复杂的多模块协作。在这里,我可以提供一个非常简化的示例,用于演示游戏编程中可能用到的基本概念,比如玩家移动、基本物理和简单的游戏逻…...
Mac上Steam安装的游戏已经卸载,但游戏的快捷方式图标仍存在的解决方式
打开终端,输入以下内容,回车。 open ~/Applications 在弹出的窗口中,会列出对应的快捷方式,按需删除即可。 实际上打开的是 /Users/改为你的用户名/Applications 文件夹下的内容。因此也可以通过打开访达(Finder&am…...
PTA 判断两个矩阵相等
Peter得到两个n行m列矩阵,她想知道两个矩阵是否相等,请你用“Yes”,“No”回答她(两个矩阵相等指的是两个矩阵对应元素都相等)。 输入格式: 第一行输入整数n和m,表示两个矩阵的行与列,用空格隔…...
《征服数据结构》双向链表
摘要: 1,双链表的介绍 2,双链表的用途 3,双链表的节点插入和删除 1,双链表的介绍 前面我们讲过单链表,单链表的特点就是只能往后访问不能往前访问。单链表一般在面试中用的比较多,比如删除倒数第…...
我用 Midjourney 的这种风格治愈了强迫症
在 Midjourney 能够实现的各种布局之中,有两种风格因其简洁、有序而独居魅力,它们就是平铺 (Flat Lay) 和 Knolling (Knolling 就是 Knolling, 无法翻译🤣)。要在现实生活中实现这样的美学效果并不容易,你需要精心挑选各种小物件&…...
三维大场景管理-3Dtiles规范
简介 : 这篇文章都是三年前写的了,一直在笔记库存中,今天把他放出来。主要是讲Cesium 的3Dtiles 格式,当然3Dtiles主要是解决场景管理大场景的LOD实现的问题,不管是剔除渲染性能优化之Culling 剔除或者 LOD 、3Dtiles…...
Flutter 中的 FractionalTranslation 小部件:全面指南
Flutter 中的 FractionalTranslation 小部件:全面指南 在 Flutter 的丰富布局库中,FractionalTranslation 是一个允许你将子组件沿着一个轴或两个轴进行部分平移的动画小部件。这种类型的平移通常用于创建滑动效果,如卡片的滑动删除或滑动展…...
Thrift快速入门开发demo
Thrift快速入门开发demo 一、认识Thrift thrift是什么?一个RPC 代码生成框架,使用它的IDL(Interface Defination Language,接口定义语言)定义你想要实现的接口,然后它就会生成对应语言的远程调用框架代码,用户只需要实现接口逻辑,不用关心具体的细节。 tutorial:htt…...
关于C++智能指针复习总结
RAII(Resource Acquisition Is Initialization): 资源获得即初始化 利用对象生命周期来控制程序的资源(将资源交给对象处理) 智能指针利用了该思想 将资源交给一个对象, 初始化资源(可以是指针或者等等资源), 释放交给析构函数 因为析构函数无论是什么场景, 对象销毁时一定会…...
Prometheus Operator创建告警规则并接入钉钉报警
prometheus之钉钉报警 前言1. 添加prometheus报警规则1.2 添加自定义报警规则文件 2. 配置钉钉报警2.2 部署dingding插件 3. 编写alertmanager配置文件 前言 在kubenetes上安装了kube-promethues(包含Prometheus Operator),程序正常跑起来了,…...
Word整理论文参考文献
1.安装Zotero软件 2.安装Zotero的Chrome网站插件,并将插件固定到浏览器 3.安装Word的Zotero插件 4.在DBLP网站https://dblp.org/search 搜索需要添加的参考文献->点击BibTex->点击网页右上角的Zotero符号(即第二步所指的符号)->至…...
计算机网路概述
目录 计算机网络的概念 计算机网络的定义: 计算机网络的组成: 终端系统/资源子网 通信子网 计算机网络的类型 按照拓扑分类编辑 按照范国分类: 按传输方式进行分类 计算机网络体系结构 传输方式 按照传输方向区分 按照传输对象…...
832. 翻转图像 - 力扣
1. 题目 给定一个 n x n 的二进制矩阵 image ,先 水平 翻转图像,然后 反转 图像并返回 结果 。 水平翻转图片就是将图片的每一行都进行翻转,即逆序。 例如,水平翻转 [1,1,0] 的结果是 [0,1,1]。 反转图片的意思是图片中的 0 全部被…...
mumu 模拟器安装
1.下载安装 下载地址 Win 历史版本:http://mumu.163.com/update/win/Mac 历史 版本:http://mumu.163.com/20200515/25905_880858.html 2.设置为竖屏 在设置中心--界面设置页面设置宽720,高1280,DPI为240,如下图所示。…...
opencv实现图片的膨胀腐蚀
opencv实现图片的膨胀腐蚀 在OpenCV中,膨胀和腐蚀是两种基本的图像处理操作,通常用于二值图像中以提取特定的特征。它们是基于图像的形态学操作,使用一个称为结构元素或核的模板来改变图像的形状。 下面是如何使用OpenCV实现图片的膨胀和腐…...
[AIGC] Java常用的JSON库及简单示例
Java常用的JSON库及简单示例 在Java的世界里,JSON库广泛用于日常开发工作,本文将介绍几个常用的JSON库并配以简单的示例代码。 1. Gson Gson是Google提供的一个用来在Java对象和JSON数据之间进行转换的Java库。 它有一定的学习曲线,但一旦熟…...
Linux shell编程学习笔记50:who命令
0 前言 2024年的网络安全检查又开始了,对于使用基于Linux的国产电脑,我们可以编写一个脚本来收集系统的有关信息。比如,我们可以使用who命令来收集当前已登陆系统的用户信息,当前运行级别等信息。 1. who命令 的功能、格式和选项…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
