Leaflet基础入门教程(一)

news2025/1/8 6:03:43

leaflet是一个前端的轻量的gis框架,为什么说它轻量呢。因为相比于传统的“庞大的”GIS框架比如openlayers和mapbox,leaflet不仅代码体积小,而且API构成也极为简单。是GIS行业小白入门级别学习的最好的框架,没有之一。

那么话不多说我们首先来学习一下如何使用leaflet搭建一个webgis地图。搭建一个GIS版本的hello world!

第一步我们访问官网查看教程:
https://mp.csdn.net/mp_blog/creation/editor

我们有这样几种方式引入leaflet,第一种是cdn的形式,也就是在线的资源库,如果你是学生和小白为了测试和学习可以采用这种方式。

第二种就是我们代码库下载下来,本地静态引入,这种适合于像我这种平时需要给大家写案例的人来使用。

如果是真正的投入到项目中使用,商业化使用我们可以通过npm的方式安装。

如果是学习测试的用途大家可以在官网上选择download直接下载leaflet的js文件包,下载下来后就包含必要的两个文件:

leaflet.css和lefalet.js。我们把这两个文件和images文件夹(因为其内部包含静态资源)一起拖入我们的项目中,就可以使用了。

 现在我们来搭建一个hello world!


                

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

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

相关文章

Vue3中hook的使用及使用中遇到的坑

目录前言一,什么是hook二, hook函数的使用2.1 铺垫2.2 hook函数的写法2.3 使用写好的hook函数后记前言 在学习Es6的时候,我们开始使用类与对象,开始模块化管理;在Vue中我们可以使用mixin进行模块化管理;Vu…

2023-03-03干活小计

今天见识了 归一化的重要性:归一化 不容易爆炸 深度了解了学习率:其实很多操作 最后的结果都是改变了lr 以房价预测为例:一个点一个点更新 比较 矩阵的更新: 为什么小批量梯度下降 优于随机梯度下降 优于批量梯度下降&#xff…

Kubernetes 中 Deployment 使用

Deployment的使用 之前我们了解了Replication Controller和Replica Set两种资源对象,RC和RS的功能基本上是差不多的,唯一的区别就是RS支持集合的selector。也了解到了用RC/RS来控制Pod副本的数量,也实现了滚动升级Pod的功能。现在看上去似乎…

【面试题】前端路由分类

0. 前言 在Web开发中,路由是指根据用户请求的URL地址,确定用户访问的页面资源、参数等,是前端开发中不可缺少的重要部分。Vue router中提供了两种路由模式,一种是hash模式,另一种是history模式。 1. Hash模式路由 H…

爆款升级!新系列南卡Neo最强旗舰杀到,业内首款无线充骨传导耳机!

中国专业骨传导耳机品牌NANK南卡于近日发布了全新南卡Neo骨传导运动耳机,打造一款佩戴最舒适、音质体验最好的骨传导耳机。推出第2代声学響科技技术,提供更优质的开放式骨传导听音体验,透过不一样的音质体验,打造更好的骨传导耳机…

MySQL基础(二)排序与分页、多表查询、单行函数

上接 MySQL基础(一)SQL分类、导入、SELECT语句,运算符_独憩的博客-CSDN博客 目录 排序与分页 排序 二级排序 分页 多表查询 基础多表查询 等值连接vs非等值连接 自连接vs非自连接 内连接vs外连接 自然连接 单行函数 数值函数 …

信息系统基本知识(四)新技术

大纲 信息系统与信息化信息系统开发方法常规信息系统集成技术软件工程新一代信息技术信息系统安全技术信息化发展与应用信息系统服务管理信息系统服务规划企业首席信息管及其责任 1.5 新一代技术 1.5.1 物联网 概念:(The Internet of Things&#xf…

你只会说MVC模型是什么但是不会实现?今天带你走通Web、Servlet、MVC、SpringMVC。代码演示很清晰

文章目录HTTP请求和HTTP响应从0手写一个Web服务器,看看能有多累人使用Servlet实现一个服务器,看看多简单Serlvet的创建Servlet的运行Servlet的其他问题Servlet这么爽,我们简单地探索一下它的原理JSP跟Servlet合作啦,我们来看一下他…

学习ROS时针对gazebo相关的问题(重装与卸载是永远的神)

ResourceNotFound:gazebo_ros 错误解决 参考:https://blog.csdn.net/weixin_42591529/article/details/123869969 当将机器人加载到gazebo时,运行launch文件出现如下错误 这是由于缺少gazebo包所导致的。 解决办法:

Linux 学习 挂载、卸载光盘和实现虚拟机时间同步

/media:挂载光盘使用的 挂载光盘命令:mount /dev/cdrom /media 卸载光盘命令:umount /dev/cdrom 挂载光盘 使用挂在光盘命令挂载光盘,如图所示 卸载光盘 初次卸载光盘可能会出现问题 [rootlocalhost media]# umount /dev/cd…

linux定时任务打包提权docker组提权

定时任务有打包命令,这个命令有参数调用可以执行其他命令,定时任务因为是root用户执行的,所以就会造成提权。一、linux定时任务打包提权复现环境:ubuntun14.041.创建定时任务:在最下面写入:* * * * * …

CK-GW208-EIP与汇川5UPLC走EtherNET_IP通讯指南

CK-GW208-EIP是一款支持标准工业Ethernet/IP协议的IO-LINK主站网关,方便用户快速便捷的集成到PLC等控制系统中。CK-GW208-EIP主站网关集成8路IO-LINK通信端口,采用即插即用模式,无需繁琐的配置,减轻现场安装调试的工作量。为了满足…

几何算法——6.曲线曲面求交的方法总结(国内外文献调研、思考和总结)

几何算法——6.曲线曲面求交的方法总结(国内外文献调研、思考和总结)1 曲线曲线1.1 直线/二次曲线1.2 二次曲线/二次曲线1.3 其他类型2 曲线曲面2.1 直线/二次曲面,二次曲线/平面2.2 二次曲线/二次曲面2.3 其他类型3 曲面曲面3.1 平面/二次曲…

文件传输协议的五种安全文件传输替代方案

对安全文件传输协议的需求,过去,文件传输协议(FTP)是发送文件的常用协议。这是一个更简单的时期,安全性比今天要少得多。 但是随着黑客变得越来越复杂,他们发现FTP缺乏安全性。他们知道FTP可以通过有限的方式来确保访…

【IoT】压力式电子脉搏器设计

脉搏是指单位时间内心脏跳动的次数,一般指每分钟的心跳次数,它是衡量人体健康指数的重要指标之一。然而,传统的诊脉手段受到人为因素影响较多,在一定程度上降低了判断病情的准确性,随着电子科学技术的迅猛发展,就出现了电子脉搏计…

# 技术详解: 利用CI同步文章以及多端发布

技术详解: 利用CI同步文章以及多端发布 技术详解: 利用CI同步文章以及多端发布 前言文章的同步实现的细节 思路文章元数据的定义和提取修改文章的优化本地图片资源上传CDN并替换本地link 终于到了 CI 的部分了最后来一些碎碎念 前言 前几天我更新了一篇简单技术总结之后&am…

用C语言写一个自己的shell-Part Ⅲ--built-in commands

Part Ⅲ–Built-in commands Just as we have mentioned in part Ⅱ,the exec family of functions can’t perform built-in commands like cd. It’s like The reason for this is that cd is not a system command like ls or pwd.We need to write and inv…

云原生下最火的API网关-APISIX

文章目录一、APISIX是什么?二、APISIX有哪些功能?三、APISIX对比Spring Cloud Gateway、Zuul等其他网关有哪些优势?四、从0到1部署APIXSIX步骤1:准备环境步骤2:安装依赖步骤3:安装APISIX步骤4:配…

成都待慕电商:抖音虚假宣传虚构被比较价格违规细则

为了保护抖音消费者权益,规范创作者商品分享推广秩序,抖音平台制定《「虚假宣传-虚构被比较价格」违规细则》。 来看详细内容:一、什么是“被比较价格”?被比较价格:指创作者通过价格比较的方式宣传商品价格优惠时&…

opencv:运用cv2给视频加水印

前一段时间学了一下计算机视觉的相关知识,今天想了想,觉得可以利用cv2这个模块给视频加上水印,这样从一些方面也可以表明这个视频的原创。 1. 实现原理 小编的实现原理就是使用cv2模块读取视频文件,然后获取到每一张图片,在图片上的相应位置写上相应的字符串(小编最初打算…