openlayers

zj靖

已于 2024-08-08 16:33:02 修改

阅读量1k

点赞数 28

分类专栏： openlayers 文章标签： openlayers

于 2024-08-08 16:14:32 首次发布

本文链接：https://blog.csdn.net/weixin_44242600/article/details/141029819

版权

openlayers 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

openlayers简介

OpenLayers是一个用于构建WebGIS客户端应用的JavaScript库，迭代开发的历史较长，目前是WebGIS中功能齐全、资料和教程丰富的框架，同时其学习曲线比较平缓，很容易上手。它允许开发者在网页上轻松集成地图功能，支持从多个来源加载地图图块、矢量数据和标记，提供丰富的交互控件，以及与各种地理信息服务（如WMS、WFS）的集成能力。OpenLayers采用了Canvas、WebGL和HTML5中最新的技术来构建框架，可以在移动设备上运行。

OpenLayers支持多种地图服务，包括天地图(Tianditu)、百度地图(Baidu Map)、谷歌地图(Google Map)、必应地图(Bing Map)、OpenStreetMap(OSM)等在线地图，可以对图片地图进行叠加。遵循OGC标准，支持WMS、WFS和WMTS等Web服务，能通过远程服务的方式将地图数据加载到浏览器中并进行显示。另外，OpenLayers还提供了丰富的图形、空间交互、地图渲染和投影转换的API，高度模块化设计，易于定制和扩展。

Openlayers架构体系

OpenLayers将抽象事物具体化为类，其核心类是Map、Layer、Source、View，几乎所有的动作都是围绕这几个核心类展开的，以实现地图加载和相关操作。

Map：整个地图相当于一个容器。 View：视图相当于摄像机或放大镜，帮助用户看到地图缩放图及某个区域的放大图片。 Controls：控件用于控制视图，如鼠标或键盘交互。 Layer：地图图层用于展现地图内容，根据数据源（Source）的种类进行分类。底层是OpenLayers的数据源，即Image、GML、KML、JSON、OGC服务资源等。
在这里插入图片描述
Openlayers的地图数据是通过地图图层Layer组织渲染的，且通过数据源Source设置具体的地图数据来源。
除此之外容器中还有地图交互（Interaction）、操作控件（Control）、覆盖层（Overlay），以及绑定在Map和Layer上的一系列待请求的事件（MapEvent）。

Openlayers特点

OpenLayers将地图图层(Layer)与数据源(Source)分离，并将地图视图相关类（如投影、分辨率、中心点设置等）抽离为视图(View)，地图数据的加载和显示更为灵活。
OpenLayers将地图交互操作的相关内容抽离，封装为各种交互(Interaction)类，如涉及地图交互的要素选择、绘图，以及图形要素编辑的操作、缩放、拖动、旋转等。
OpenLayers在地图容器中用覆盖层(Overlay)来承载和表现诸如地图标注(Marker、Popup)等HTML元素内容。
OpenLayers优化了空间几何对象(Geometry)类，专注于管理空间图形，更简便、易用。
OpenLayers在矢量图层中叠加了矢量要素(Feature)，由图形(geometry)、属性(properties)、样式(style)组成。

Openlayer主要API

主要模块

ol/Map 创建和管理地图实例。地图初始化、图层管理、视图设置等。
ol/View 管理地图视图，设置地图中心点、缩放级别、旋转、使用投影等。
ol/Layer 管理地图上的图层。主要类型：
- ol/layer/title：瓦片图层。
- ol/layer/Vector：矢量图层。
- ol/layer/Image：图像图层。
ol/Source 用于管理图层的数据来源。主要类型：
- ol/source/OSM：OpenStreetMap瓦片源。
- ol/source/Vector：矢量数据源。
- ol/source/XYZ：XYZ瓦片源。
- ol/source/TileWMS：WMS瓦片源。
ol/Feature 用于表示地图上的特征。具有几何图形和其他属性数据，支持样式设置，可以使用setStyle单独设置样式，否则将使用矢量层的样式。
ol/Geom 用于表示和操作几何图形。主要类型：
- ol/geom/Point: 点。
- ol/geom/LineString: 线。
- ol/geom/Polygon: 多边形。
- ol/geom/MultiPoint: 多点。
- ol/geom/MultiLineString: 多线。
- ol/geom/MultiPolygon: 多多边形

辅助模块

ol/style 设置特征的样式。主要类型：
- ol/style/Style：样式。
- ol/style/Icon：图标样式。
- ol/style/Fill：填充样式。
- ol/style/Stroke：线样式。
- ol/style/Text：文本样式。
ol/control 用于添加地图控件。主要类型：
- ol/control/Attribution：地图信息。
- ol/control/Zoom：缩放控件。
- ol/control/FullScreen：全屏控件。
- ol/control/ScaleLine：比例尺控件。
- ol/control/OverviewMap：鸟瞰图控件。
- ol/control/Rotate：指北针控件。
- ol/control/MousePosition：鼠标位置。
ol/overlay 地图上添加覆盖物，用于显示HTML元素。
ol/interaction 用于添加地图交互功能。主要类型：
- ol/interaction/Draw：绘制交互。
- ol/interaction/Modify：修改交互。
- ol/interaction/Select：选择交互。
- ol/interaction/DragPan：拖动平移交互。
- ol/interaction/MouseWheelZoom：滚动缩放交互。

数据处理

ol/format 用于解析和写入各种地理数据格式。主要类型：
- ol/format/GeoJSON：GeoJSON格式。
- ol/format/WKT：WKT格式。
- ol/format/GML：GML格式。
- ol/format/KML：KML格式。
ol/proj 用于处理地图投影。坐标转换、投影定义等。

渲染模块

ol/render 用于地图渲染。支持矢量图形的绘制和样式应用。

其他

ol/events 用于事件处理。添加、删除和触发事件。

简易使用：

import { Map, View, Feature } from 'ol'; // 地图Collection
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; // 图层
import { XYZ, Vector as VectorSource } from 'ol/source'; // 资源
import { Polygon, Circle } from 'ol/geom'; // 几何图形
import { Style, Icon, Stroke, Fill } from 'ol/style'; // 样式
import { defaults as defaultControls, ScaleLine } from 'ol/control'; // 控件
import * as Proj from 'ol/proj'; // 转化
import Overlay from 'ol/Overlay';// 弹框
import { Select } from 'ol/interaction';
import { click } from 'ol/events/condition';

<div id='map'></div>
    <!-- 引入openlayers -->
    <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
    <script>
        let map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM() // OpenStreetMap瓦片源
                }),
                // 使用高德地图图层
                // new ol.layer.Tile({
                //     source: new ol.source.XYZ({
                //         url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
                //     })
                // })
            ],
            view: new ol.View({
                center: new ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'), // 将坐标转为EPSG:3857投影坐标
                zoom: 17，
                // projection: 'EPSG:4326', // 指定投影使用EPSG:4326，openlayers默认是EPSG:3857
            }),
            controls: new ol.control.defaults().extend([
                new ol.control.Attribution(), // 地图信息
                new ol.control.FullScreen(), // 全屏控件
                new ol.control.Zoom(), // 缩放按钮
                new ol.control.OverviewMap(), // 鸟瞰图
                new ol.control.Rotate(), // 指北针
                new ol.control.MousePosition(), // 鼠标位置
            ])
        })
    </script>