美文网首页
03 工作台(1)-基础知识

03 工作台(1)-基础知识

作者: 无敌小菜鸟 | 来源:发表于2020-04-28 17:00 被阅读0次

1.简介

欢迎来到OpenLayers工作台,这篇材料旨在为您全面地介绍OpenLayers缘何成为网页地图绘制的一个选择。

安装

首先要从最新的工作台下载最新版本的 openlayers-workshop-en.zip 压缩包,此外你还需要安装Node v8或更高版本来运行工作台的开发服务器。
解压后,切换到openlayers-workshop-en目录下,使用如下命令安装一些额外的依赖项:

npm install

现在你可以准备启动工作台开发服务器了,这除了提供了OpenLayers库绑定的模块之外,还包括了讲解文档。

npm start

这将启动一个开发服务器,在这里你可以阅读工讲解的文档,并通过练习来完成练习。你应该可以通过在http://localhost:3000/,看到弹出的警报来确认是否正常运行,您可以在http://localhost:3000/doc/,阅读讲解文件。

概述

工作台是以一组模块的形式展现的,在每个模块中,你都可以通过一些设定好的任务为模块实现特定的目标,每个模块都是在以前模块中学到的知识的基础上,迭代建立起你的知识库。
工作台包含以下模块:

  • 基础知识:学习如何在页面中添加地图;
  • 矢量数据:用矢量数据工作;
  • 移动地图和传感器:带有GPS和指南针的移动地图;
  • WebGL渲染:用WebGL渲染陨石撞击地点;
  • 矢量瓦片:使用矢量瓦片构建漂亮的地图;
  • 栅格操作:用栅格源操纵像素;
  • 部署:为产品构建应用。

2.基础知识

首先确保你已经按照安装步骤安装了支持,并且开发服务器正常运行。
既然我们已经搭建了开发环境,那么让我们以创建一个带有OpenLayers地图的网页为开始,同时理解一下代码。
在OpenLayers中,每一张地图是一个layer的集合在网页上渲染的结果。如果想构建地图,需要一些HTML标记生成展示地图的容器(例如 div 元素),再给容器添加一些尺寸样式,和初始化地图的代码。
OpenLayers支持不同种类的layer:

  • 瓦片层:用于瓦片栅格集合;
  • 图像层:用于静态图像或根据地图范围提供的图片;
  • 矢量层:用于地图当前范围的静态文件的矢量数据;
  • 矢量瓦片层:用于矢量瓦片集合。
    除了layer和view,地图还能通过一系列的控件(例如地图顶部的UI元素)和交互(例如对地图上的触摸或指针手势做出反应的组件)来进行配置。

标签

首先,我们创建一个 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>

既然在这个请求中不需要包含任何script标签,我们的webpack设置可以解决这个问题。我们的<style>让地图容器充满了整个页面,div容器和 div 的 id “map-container” 作为地图的target。

请求

为了运行OpenLayers,我们从npm中安装OL包。这已经在上面的 npm install 步骤中完成了。如果你是在一个新的应用程序上从头开始,你需要在终端运行npm install ol@beta这行代码。
作为应用程序的入口,我们创建一个main.js文件,并同样保存在车间目录的根目录下。

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
  })
});

在顶部,我们从ol 包引入了需要的模块。注意‘ol/ol.css’的引入,是为了添加OpenLayers规定的基础UI组件。一切准备妥当,接下来开始创建地图,target 属性指向容器div标签。我们使用瓦片层(TileLayer)和 XYZSource。最后,view 定义了初始缩放等级,和地图在视觉投影中的中心。如果想提供地理坐标系,我们使用ol/proj模块中的fromLonLat辅助函数。

查看地图

现在可以测试我们的请求了,用浏览器打开刚才创建地图的本地文件。它应该长这样:


世界地图

拓展阅读

在材料的最后一章,我们将学习如何生成一个由用于部署的应用程序创建的产品。
对于你自己的请求,我们推荐一开始多看看示例
关于OpenLayers所有的类和函数,可参考API文档

相关文章

网友评论

      本文标题:03 工作台(1)-基础知识

      本文链接:https://www.haomeiwen.com/subject/dyqvwhtx.html