【GeoJSON在线编辑平台】(0)项目启动与前言

前言

事情是这样的……
有这么一个项目,需要开发一个在线的标注平台。以天地图为底图,在天地图上标注出一些特征地物,比如描出农田耕地房屋建筑之类的要素。
这个需求简化一下其实就是一个在线的矢量编辑平台,通过绘制多边形功能在地图上画出来就行了。于是我直接就用我最熟悉的 Mapbox GL JS 来做,用的 mapbox-draw 这个库来实现绘制功能。花了些时间,确实也做出来了。


但是!后面发现了我做的那堆功能 OpenLayers 基本都有了!!!而且交互手感更好。一瞬间,天塌了。
气不过的我,打算重拾 OpenLayers,重新开发一次。

计划

第一版先做出个普通的,因为 OpenLayers 已经好久没用过了,之前学的时候版本还是 7 现在都更新到 10 了。

先参考 https://geojson.io/ 做一版:

在这里插入图片描述


启动

技术选型
OpenLayers + Vue3 + Tailwind + Javascript + vite

项目地址
https://github.com/cswwww/geojson-editor-ol


最后

其他细节还没想好,先开工,边做边学一下 OpenLayers

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

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

相关文章

豆包,攻克数字是个什么工具?《GKData-挖掘数据的无限可能》(数据爬虫采集工具)

豆包,攻克数字是个什么工具? “攻克数字” 指的是 “攻克数字(GKData)” 这样一款工具。是一款针对网页、APP中数据自动解析转表存入数据库的软件,为数据工作者而生。它是一个不会编程也能用的可视化数据解析为标准二…

【Python】实战:使用input()获取一个字符串,编写并传参,将字符串中所有的小写字母转成大写字母,将大写字母转成小写字母

#使用input()获取一个字符串,编写并传参,将字符串中所有的小写字母转成大写字母,将大写字母转成小写字母 #使用input()获取一个字符串,编写并传参,将字符串中所有的小写字母转成大写字母,将大写字母转成小…

【成都新篇】龙信科技电子取证实验室,引领科技取证新时代

文章关键词:电子数据取证实验室、手机取证、介质取证、云取证、现场勘查、电子物证 在科技创新的浪潮中,龙信科技成都实验室以其卓越的电子数据取证服务,成为了中西部地区一颗璀璨的明珠。随着新址的搬迁,我们不仅扩大了业务范围…

【C/C++】字符/字符串函数(1)——由string.h提供

零.导言 什么是字符/字符串函数呢? 其实就是一类用于处理字符和字符串的函数。 而其中一部分函数包含在头文件 string.h 中,有 strlen strcpy strcat strcmp strncpy strncat strncmp strstr strtok strerror 等等 接下来我将逐个讲解这些函数。 一.str…

硅谷甄选(11)角色管理

角色管理模块 10.1 角色管理模块静态搭建 还是熟悉的组件&#xff1a;el-card、el-table 、el-pagination、el-form <template><el-card><el-form :inline"true" class"form"><el-form-item label"职位搜索"><el-…

鸿蒙UI开发——基于全屏方案实现沉浸式界面

1、概 述 典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条。 其中状态栏和导航条&#xff0c;通常在沉浸式布局下称为避让区&#xff0c;避让区之外的区域称为安全区。 开发应用沉浸式效果主要指&#xff1a;通过调整状态栏、应用界面和导航条的显示效果来减少状态…

有没有优质的公司可以提供高质量大模型数据?

在当今的机器学习和人工智能领域&#xff0c;大模型&#xff08;Big Model&#xff09;已成为处理大规模数据和复杂任务的重要工具。本文将探讨大模型的基本概念、为什么大模型需要数据&#xff0c;以及高质量大数据的标准&#xff0c;并介绍一些可能提供优质大模型数据的公司。…

规划误差降低27%,碰撞率降低33%Senna: 大规模视觉-语言模型与端到端自动驾驶相结合

Abstract 端到端自动驾驶在大规模数据中展示了强大的规划能力&#xff0c;但在复杂、罕见的场景中仍然因常识有限而表现不佳。相比之下&#xff0c;大型视觉语言模型&#xff08;LVLMs&#xff09;在场景理解和推理方面表现出色。前进的方向在于融合两者的优势。以往利用LVLMs…

openpnp - 手工修改配置文件(元件高度,size,吸嘴)

文章目录 openpnp - 手工修改配置文件(元件高度,size,吸嘴)概述笔记parts.xmlpackages.xml 手工将已经存在的NT1,NT2拷贝出来改名备注END openpnp - 手工修改配置文件(元件高度,size,吸嘴) 概述 载入新板子贴片准备时&#xff0c;除了引入Named CSV文件&#xff0c;还要在ope…

硬件电子器件学习笔记

系列文章目录 文章目录 系列文章目录电阻碳质电阻器线绕电阻 变压器自耦变压器隔离变压器 电阻 碳质电阻器 CCR&#xff1a; 优点&#xff1a;体积大&#xff0c;吸收脉冲电流、防浪涌。缺点&#xff1a;温度系数、稳定性差、吸水后也会变化、随着使用会变化。 医用除颤仪可…

推荐一款射频与微波电路设计软件:Keysight Genesys

Keysight PathWave RF Synthesis Genesys是一款专为射频 (RF) 和微波电路设计与仿真而开发的软件解决方案&#xff0c;属于 Keysight Technologies 的 PathWave 软件平台。此平台为无线通信系统的设计、仿真和验证提供了全面的工具支持。Genesys 在电路设计方面具备高度专业性&…

@Controller 和 @RestController 区别

功能范畴: Controller&#xff1a;用于定义一个控制器类&#xff0c;主要用于处理用户请求并返回视图&#xff08;通常是HTML页面&#xff09;。常常与 Spring MVC 的视图解析器一起使用。RestController&#xff1a;是一个特殊类型的控制器&#xff0c;用于返回数据而不是视图…

RabbitMQ几大应用问题

目录 1.幂等性保障 2.顺序性保障 3.消息积压 1.幂等性保障 &#xff08;1&#xff09;介绍幂等性 幂等性&#xff0c;最早期是数学和计算机科学中某些运算的性质&#xff0c;它们可以被多次应用&#xff0c;而不会改变初始应用的结果 比如说&#xff0c;重复多次调用同一…

创新业态下金融头部机构在 FICC 平台建设上的思考与实践

近年来&#xff0c;FICC 投资交易呈现活跃多元态势&#xff0c;创新转型稳步推进。FICC 平台电子化方兴未艾&#xff0c;是机构提升服务效率和质量的一大着力点。因此&#xff0c;在 FICC 平台建设上&#xff0c;许多机构都进行了深入研究&#xff0c;积累了丰富的实践经验。 …

(五)Web前端开发进阶2——AJAX

目录 1.Ajax概述 2.Axios库 3.认识URL 4.Axios常用请求方法 5.HTTP协议——请求报文/响应报文 6.HMLHttpRequest对象 7.前后端分离开发&#xff08;接口文档&#xff09; 8.Element组件库 1.Ajax概述 AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。…

linux文件的权限

前言 在linux操作系统中&#xff0c;账户分为两类&#xff0c;一类是普通用户&#xff0c;一类是超级用户&#xff0c;普通用户在许多方面受权限约束&#xff0c;而超级用户几乎不受约束。 root账户和普通账户的切换 有三种方式能够切换账号 su su 直接使用&#xff0c;会弹…

1-无监督学习求解旅行商问题(NeurIPS 2023)(未完)

文章目录 Abstract1 Introduction2 Our ModelAbstract 我们提出了 UTSP,一种用于解决旅行商问题 (TSP) 的无监督学习 (UL) 框架。 我们使用替代损失来训练图神经网络(GNN)。 GNN 输出一个热图,表示每条边成为最佳路径一部分的概率。 然后,我们应用本地搜索来根据热图生成…

在vue3项目中,如何正确定义不同类型ref变量的类型

Vue 3 引入了 Composition API&#xff0c;它使用 ref 和 reactive 等函数来创建响应式的变量。在 TypeScript 中&#xff0c;我们需要确保类型正确地反映这些变量的实际类型。 定义ref变量 下面是几个示例&#xff0c;展示了如何在 Vue 3 项目中使用 TypeScript 来定义 ref …

【CSS3】css开篇基础(5)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

net framework 3.5组件更新失败错误代码0x80072f8f怎样解决

浏览器地址栏输入www.dnz9.com远程解决netframework问题 当遇到.NET Framework 3.5 组件更新失败&#xff0c;错误代码为 0x80072f8f 时&#xff0c;可以尝试以下几种解决方法&#xff1a; 一、检查网络连接和时间设置 网络连接 错误代码 0x80072f8f 通常与网络相关问题有关。首…