【openlayers系统学习】00openlayers基础结构

最新推荐文章于 2024-07-21 16:57:44 发布

在星空下

最新推荐文章于 2024-07-21 16:57:44 发布

阅读量696

点赞数 19

分类专栏： OpenLayers学习笔记文章标签：学习 OpenLayers gis

本文链接：https://blog.csdn.net/weixin_45213317/article/details/139079417

版权

OpenLayers学习笔记专栏收录该内容

23 篇文章 1 订阅

订阅专栏

00基础知识

官方文档：https://openlayers.org/workshop/en/

确保您已经完成了安装依赖项的安装说明并使开发服务器运行。

现在我们已经设置好了我们的开发环境，让我们开始创建一个带有OpenLayers地图的简单网页，并理解代码。

在OpenLayers中，地图是渲染到网页的图层集合。要创建地图，您需要一些创建地图视区的标签（HTML）（例如 <div> 元素）、一些样式（给予地图视区在页面上的适当尺寸）以及地图初始化代码。

OpenLayers支持不同类型的图层：

瓦片图层（Tile Layer）：用于渲染栅格瓦片，由一系列预先生成的图块（tiles）组成的图层，通常用于显示地图底图。
矢量瓦片图层（VectorTile Layer）：用于渲染以矢量瓦片形式提供的数据。
图像图层（Image Layer）：由静态图像组成的图层，通常用于显示地图标注、地图背景等。
矢量图层（Vector Layer）：由矢量数据组成的图层，可以包含点、线、面等几何要素。

除了图层和视图之外，地图还可以配置一组控件(即地图顶部的UI元素)和交互(即对地图上的触摸或指针手势做出反应的组件)。

一、`index.html`

在workshop目录的根目录下应该有一个现有的 index.html 文件。让我们用下面的代码替换它:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      @import "node_modules/ol/ol.css";
    </style>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
    <script src="./main.js" type="module"></script>
  </body>
</html>

标记包括一个id为 map-container 的 <div> ，它用作地图的目标容器。 <style> 使映射容器填充整个页面。

二、`main.js`

为了使用OpenLayers，我们从npm安装 ol 包。这已经在前面的 npm install 步骤中完成了。如果您从头开始创建一个新应用程序，您将在终端中运行 npm install ol 。

作为应用程序的入口点，我们创建了一个 main.js 文件，并将其保存在workshop文件的根目录中:

import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import {Map, View} from 'ol';
import {fromLonLat} from 'ol/proj';

new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: fromLonLat([0, 0]),
    zoom: 2,
  }),
});

顶部的导入从 ol 包中引入了所需的模块。导入所需的所有内容后，我们创建一个 Map 。 target 指向标记中的容器 <div> 。我们使用平铺图像层( TileLayer )和 XYZSource 配置地图。最后， View 定义了初始的 zoom ，以及视图投影中地图的 center 。为了提供地理坐标，我们使用 ol/proj 模块中的 fromLonLat 辅助函数。