OpenLayers入门-第一篇、基本概念与核心组件

简介: OpenLayers入门-第一篇、基本概念与核心组件

学习一下openlayers里面的一些基本概念,npm地址


OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序

npm install ol

OpenLayers是一个高性能、功能丰富的库,用于在web上创建交互式地图。它可以显示地图瓷砖,矢量数据和标记加载从任何来源在任何网页。OpenLayers的开发是为了进一步使用各种地理信息。它是完全免费的,开源JavaScript。

1.Map

A map is made of layers, a view to visualize them, interactions to

modify map content and controls with UI components.

译文: 地图由层、可视化它们的视图、修改地图内容的交互和使用UI组件的控件组成。

地图是OpenLayers的核心组件。要渲染一个地图,需要一个视图、一个或多个层和一个目标容器:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

var map = new Map({
  view: new View({
    center: [0, 0],
    zoom: 1
  }),
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map'
});

2.View

The view manages the visual parameters of the map view, like

resolution or rotation.View with center, projection, resolution and

rotation.

视图管理地图视图的可视参数,如分辨率或旋转。 中心视图,投影,分辨率和旋转。

图不负责地图的中心、缩放级别和投影。相反,这些是ol/View实例的属性。

3.Layers

Layers are lightweight containers that get their data from sources.

图层是从数据源获取数据的轻量级容器。默认投影3857,即墨卡托投影(高纬度地区被拉升,变形严重,但低纬度地区展示数据较好直观),比如说加载天地图,默认加载_w结尾的。


高德地图中也是可以加载第三方地图服务的,只支持3857

Layers种类:

  1. ol/layer/Tile
  2. ol/layer/Image
  3. ol/layer/Vector
  4. ol/layer/VectorImage
  5. ol/layer/VectorTile
  6. ol/layer/WebGLTile

4.Controls

控件是一个可见的小部件,具有一个位于屏幕上固定位置的DOM元素。它们可以包含用户输入(按钮),也可以只是信息;位置是使用CSS确定的。默认情况下,它们被放置在CSS类名为ol-overlaycontainer-stopevent的容器中,但可以使用任何外部DOM元素。

  1. Map default controls
  2. All controls

5.Interactions

用户与地图之间的交互操作,包括:

  1. Map default interactions
  2. Interactions for vector features
  1. ol/interaction/Select
    ol/interaction/Draw
    ol/interaction/Modify
  2. All interactions

例如:

  1. 地图旋转
import DragRotate from 'ol/interaction/DragRotate'

ol/interaction/DragRotate这个模块允许用户通过点击和拖动地图旋转地图,通常结合一个模块:ol/events/condition,当按住alt和shift键时限制它。

  1. 地图缩放
import KeyboardZoom from 'ol/interaction/KeyboardZoom';

ol/interaction/KeyboardZoom模块允许用户使用键盘+和-缩放地图。注意,虽然这种交互默认情况下包含在映射中,但只有当浏览器的焦点集中在键盘事件所附加的元素上时,才能使用键。默认情况下,这是map div,但您可以使用模块:ol/ map ~ map中的keyboardEventTarget更改它。Document永远不会失去焦点,但是对于任何其他元素,如果键要发挥作用,焦点必须是在这个元素上并返回。

6.Sources and formats

数据源和对应的格式

7.Projections

坐标系转化工具模块

All coordinates and extents need to be provided in view projection

(default: EPSG:3857). To transform coordinates from and to

geographic, use

ol/proj#fromLonLat()

and

ol/proj#toLonLat().

For extents and other projections, use

ol/proj#transformExtent()

and

ol/proj#transform().

ol/proj

8.Observable objects

监听器,监听ol/Objects,主要用来监听自定义的属性。

Changes to all ol/Objects can be observed by calling the

object.on(‘propertychange’) method. Listeners receive an

ol/Object.ObjectEvent with information on the changed property and old value.

9.Other components

  1. ol/Geolocation
  2. ol/Overlay


相关文章
|
存储 编译器 C语言
C++从入门到精通(第二篇) :C++的基础和灵魂:类和对象(上篇)
C语言是面向过程的,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解决问题。 C++是基于面向对象的,关注的是对象,将一件事情拆分成不同的对象,靠对象之间的交互完成。
146 0
C++从入门到精通(第二篇) :C++的基础和灵魂:类和对象(上篇)
|
存储 安全 NoSQL
由浅入深理解SpringSecurityOauth2框架原理
由浅入深理解SpringSecurityOauth2框架原理
由浅入深理解SpringSecurityOauth2框架原理
|
9月前
|
缓存 安全 PHP
【PHP开发专栏】Symfony框架核心组件解析
【4月更文挑战第30天】本文介绍了Symfony框架,一个模块化且高性能的PHP框架,以其可扩展性和灵活性备受开发者青睐。文章分为三部分,首先概述了Symfony的历史、特点和版本。接着,详细解析了HttpFoundation(处理HTTP请求和响应)、Routing(映射HTTP请求到控制器)、DependencyInjection(管理依赖关系)、EventDispatcher(实现事件驱动编程)以及Security(处理安全和认证)等核心组件。
180 3
|
存储 Kubernetes 调度
K8s基本概念入门
没等到风来,绵绵小雨,所以写个随笔,聊聊k8s的基本概念。 k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具,从创建应用,应用的部署,应用提供服务,扩容缩容应用,应用更新,都非常的方便,而且可以做到故障自愈,例如一个服务器挂了,可以自动将这个服务器上的服务调度到另外一个主机上进行运行,无需进行人工干涉。
2018 0
|
编译器 调度 C++
C++从入门到精通(第四篇) :C++的基础和灵魂:类和对象(下篇)
在创建对象时,编译器通过调用构造函数,给对象中各个成员变量一个合适的初始值
130 0
C++从入门到精通(第四篇) :C++的基础和灵魂:类和对象(下篇)
|
Kubernetes 监控 负载均衡
【K8S系列】基础概念入门
与VM虚拟机相比,容器镜像的创建更加容易。提供可靠且频繁的容器镜像构建/部署,并使用快速和简单的回滚(由于镜像不可变性)。在build或者release阶段创建容器镜像,使得应用和基础设施解耦。在本地或外网(生产环境)运行的一致性。可以在 Ubuntu、RHEL、 CoreOS、on-prem、Google Container Engine或其它任何环境中运行。应用程序分为更小的、独立的部件,可以动态部署和管理。资源隔离更高效。...
148 0
【K8S系列】基础概念入门
|
Kubernetes 监控 负载均衡
【K8S系列】第一讲:基础概念入门
【K8S系列】第一讲:基础概念入门
85 0
|
7月前
|
存储 Kubernetes 负载均衡
k8s原理概念基础入门
k8s原理概念基础入门
209 2
|
Web App开发 JavaScript 前端开发
《JavaScript开发框架权威指南》——导读
JavaScript社区中正在迈开近乎狂热的创新步伐,虽然充满了无穷的魅力,但也提出了自己的独特的挑战。JavaScript的生态系统包括库、框架以及工具,都在剧烈地成长。过去针对任何给定问题可能只有少量的解决方案,而今已经有许多解决方案可以选择,并且其数目日益增长。
1947 0

热门文章

最新文章