【OpenLayers 入门】(1)Hello world

OpenLayers是一个强大的JavaScript库,用于在网页上展示动态地图。它支持瓦片图层、矢量数据和标记,适用于各种设备。通过npm可以轻松创建应用,如`npmcreateol-appmy-app`并启动。该项目是开源的,遵循BSD许可证,提供易于定制和扩展的功能。

OpenLayers 简介

官网:https://openlayers.org/
git:https://github.com/openlayers/openlayers

一个可以满足所有绘图需求的高性能、功能丰富的库。

OpenLayers 使得在任何网页中放置动态地图变得容易。它可以显示从任何来源加载的地图瓦片、矢量数据和标记。OpenLayers的开发是为了促进各种地理信息的使用。它是完全免费的,开源的JavaScript,在两条款的BSD许可证(也称为FreeBSD)下发布。

要素

  • 瓦片图层
  • 矢量图层
  • 领先、快速、移动端支持
  • 易于定制和扩展

Hello world

npm create ol-app my-app
cd my-app
npm start

打开 http://localhost:5173/
在这里插入图片描述

OpenLayers入门可参考以下内容: - 有一系列Openlayers入门教程文章,涵盖基本API,还包含源代码示例。系列文章列表如下: - Openlayers入门教程(一):应该如何学习Openlayers - Openlayers入门教程(二):Map篇 - Openlayers入门教程(三):View篇 - Openlayers入门教程(四):Layers篇 - Openlayers入门教程(五):Sources篇 - Openlayers入门教程(六):Controls篇 - Openlayers入门教程(七):Interactions篇 - Openlayers入门教程(八):Geom篇 - Openlayers入门教程(九):Overlay篇 - Openlayers入门教程(十):Style篇 - Openlayers入门教程(十一):Formats篇 - Openlayers入门教程(十二):定位与轨迹 - Openlayers入门教程(十三):动画 - Openlayers入门教程(十四):第三方插件 - Openlayers入门教程(十五):与canvas、echart,turf等交互 [^1] - 有一篇万字长篇的Openlayers入门教程,适合零基础者,能贯穿整个Openlayers知识体系,读完可对Openlayers有全新认识 [^2]。 - 若对openlayers理解不深或不熟悉,可先读以下文章辅助入门:https://www.yuque.com/qstar-vrosu/fe/auhoye 、https://blog.youkuaiyun.com/tk08888/article/details/127053451 、https://www.openlayers.vip 。Openlayers主要以面向对象进行开发,配置项多,与echarts类似,但文档为英文且不友好,重要的地图组成部分之一是地图(Map),对应的类是ol.Map [^3]。 - OpenLayers的核心部件是Map(ol.Map),它会被呈现到对象target容器(如网页上的div元素),所有地图属性可在构造时配置,或通过setter方法(如setTarget())设置。示例代码如下: ```html <div id="map"></div> <script> var map = new ol.Map({target: 'map'}); </script> ``` [^4]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值