OpenLayer学习班2-基础知识

最新推荐文章于 2024-03-15 00:00:00 发布

naturessdfsafagf

最新推荐文章于 2024-03-15 00:00:00 发布

阅读量207

点赞数

分类专栏： OpenLayers 文章标签： openlayer 学习

原文链接：https://openlayers.org/workshop/en/basics/

版权

OpenLayers 专栏收录该内容

7 篇文章

订阅专栏

基础知识

确保按照安装说明安装了依赖并运行开发服务器。
现在让我们开始创建一个带有OpenLayers 地图的简单网页，并理解代码。

在OpenLayers中，地图是渲染到网页上的图层的集合。要创建地图，您需要一些标记（HTML）来创建地图视口（例如

元素），一些样式，以便为地图视口提供页面上的适当尺寸，以及地图初始化代码。
OpenLayers支持不同种类的图层：
• Tile layers for tiled raster tile sets
• Image layers ：静态图像或根据地图范围按需提供的图像
• Vector layers for vector data from static files for for the map’s current extent
• Vector tile layers for tiled vector tile sets

HTML
首先，我们在Workshop目录的根目录中创建一个index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

注意，我们的应用程序不需要包含任何

应用程序
要使用OpenLayers，我们从npm安装ol软件包。这已在上一个npm安装步骤中完成。如果您是从头开始使用新应用程序，则可以在终端中运行npm install ol @beta 。作为应用程序的入口，我们创建一个main.js文件，并将其保存在Workshop目录的根目录中：

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      })
    })
  ],
  view: new View({
    center: fromLonLat([0, 0]),
    zoom: 2
  })
});