GIS 之openLayer整体介绍

caitxj_BC
960 阅读2分钟

GIS之openLayer 整体介绍

openLayer简介

OpenLayers使在任何网页中放置动态地图变得很容易。它可以显示地图瓷砖，矢量数据和标记加载从任何来源。OpenLayers的开发是为了进一步利用各种地理信息。它是完全免费的开源JavaScript gis库。

  • 瓦片图层 从OSM、Bing、MapBox、Stamen和任何其他你能找到的XYZ源中拉瓷砖。还支持OGC映射服务和非瓦片层。
  • 矢量图层 从GeoJSON、TopoJSON、KML、GML、Mapbox矢量图块和其他格式渲染矢量数据
  • 尖端、快速、可移动 利用画布2D、WebGL和HTML5的所有最新功能。移动支持开箱即用。只使用所需的组件构建轻量级自定义配置文件。
  • 易于扩展 使用直接的CSS样式您的地图控件。连接到不同级别的API中，或者使用第三方库来定制和扩展功能。

openLayer介绍

OL整体结构图

openlayer.drawio.png

Hello World GIS

注意此示例功能基于vue进行创建,需提前引入依赖:"ol": "^6.5.0",

  1. 创建容器对象填充map
<template>
    <div id="map" style="width: 700px;height: 700px">
    </div>
</template>
  1. 引入openlayer相关依赖(css,js)
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj.js';
  1. 使用api创建对象
const map = new Map({
               target: 'map',
               layers: [
                       new TileLayer({
                             //使用osm数据源
                             source: new OSM()
                        })
                    ],
                    view: new View({
                        center: fromLonLat([106.57, 29.588]),
                        zoom: 10
                    })
});

openLayer api 介绍

Map

地图核心对象,其中包含图层、数据源、视图、控制条，事件等相关进行配置

View

管理地图视图的视觉参数，如分辨率或旋转。

Layers

图层是从数据源获取数据的轻量级容器。

Controls

用来控制地图的，就是设置地图的缩放(zoom)，全屏(fullscreen)、地图全局视图（鹰眼图）( overviewmap)等控件

Interactions

主要是用来配置地图交互的，且交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation 类。

Sources and formats

Sources：地图图层数据来源，比如切片数据、矢量数据、图片数据等数据源 Formats：对地图图层数据格式进行转换

Projections

实现坐标系转换，可以转换为指定的坐标系坐标，可以坐标系间坐标互相转换，转换Extent为指定坐标系。

Observable objects

Other components

其中使用的最多的是overlay类，主要是地图覆盖物的意思，一般与popup连用来实现弹出效果

avatar
文章
阅读
粉丝