1、简介

官网地址：
https://openlayers.org/
源码地址：
https://github.com/openlayers/openlayers

OpenLayers是一个高容量、高性能的图书馆。绘制基于网络的互动地图。它可以在任何网页上显示来自任何来源的瓷砖、矢量数据和标签。为扩大地理数据的使用范围,创建了开放激光器。这是一个完全自由的 JavaScript 源。BSD 2-Clause 许可证被用于出版这项工作。

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the BSD 2-Clause License.

支持 HTML5 和 ECMAScript 5 的任何当前浏览器都可以运行 OpenLayers 。铬、Firefox、Safari和边缘都包括在内。对于较老的浏览器和平台(因特网探索器、Android 4.X、iPhone v12和以前的版本、Safari v12和以前的版本),请点击此处。下文所列浏览器功能可能需要一个弹出式填充。

• 平铺层
  这些图纸是从OSM、Bing、MapBox、Stamen和可能找到的任何其他XYZ来源提取的。 OGC绘图服务处和直至图层也得到支持。

• 矢量图层
  可以提供来自GeoJSON、TopoJSON、KML、GML、Mapbox矢量切片和其他格式的矢量数据。

• 尖锐、快速、机动的准备就绪
  使用 Canvas 2D、 WebGL 和 HTML5 的最新好处。 打开框并使用移动支持。 创建一个轻量级自定义配置文件, 只使用您需要的组件 。

• 易于定制和扩展
  使用基本的 CSS 改变地图控件样式。 连接到 API 的多个级别, 或者利用定义和扩展功能的第三方图书馆 。

2、快速入门

最新版本的OpenLayers图书馆是6。

2.1 因特网图书馆快速存取

我们激活 vscode, 复制以下代码, 然后保存为新的 one.html 文件( Unititled-1) 。 然后您可以在浏览器中直接执行结果 。

对于官员网络,可使用下列代码:
https://openlayers.org/en/latest/doc/quickstart.html

Untitled-1.html：

注意：
下面的两行代码解释了上一个测试案例中使用的 OpenLayers 图书馆文档(如,我很抱歉,cs和ol.Js)的互联网接入及其版本号。当然,提高装货速度。我们还可以将它放在我们自己或当地服务器上。再引用，请查阅下一节,即快速访问当地图书馆。

2 2 方便使用当地图书馆

官网下载地址：
https://openlayers.org/download/

本地文件解压缩, ol. I'm sorry, Cs 和 ol. Js 在文件夹中 。

无标题-2. html 被创建为新文件 :

容易获得Node.js 2.3.3

官网地址：
https://nodejs.org/en/

Node.js 是一个建立在 Chrome V8 上的 JavaScript 运行时间。
node.js 是 JavaScript 运行的时间环境, 它是一个开放源代码和交叉平台。 它几乎是任何工作都喜欢的工具!
NODE.js在浏览器(谷歌铬内核)外运行 V8 JavaScript 引擎。 结果,Node.js表现令人钦佩。

我们首先安装诺德开发环境


在 NOdejs 环境中新建一个测试文件夹, 您可以下载 OpenLayes 库( 节点_ 模块) 。

安装 Openlayers 库后显示目录的图示 :


“ Index” 是一个新的文件 。 “ C: UserstomcatDesktoptest. js ” 在测试主文件夹中 :

“ Index” 是一个新的文件。 在测试主目录“ C: UserstomcatDesktoptest. html ” 中 :

更改文件页。以下子子项载于json内容中:

运行以下的包装命令,以便您可以在包装后将 dist 文件夹复制到服务器 。

运行以下命令以启动临时 Web 服务器功能, 使浏览器可以通过网站访问 Web 内容活动 。 (要停止运行中的应用程序,请按 Ctrl+C.)

3、组成部分

3.1 ol.map

这与他本身无关,他只是协调许多组成部分的协调员。 对于我们的发展来说,它是这个方案的一个切入点,我们可以通过它来利用它所提供的功能。

3.2 ol.view

它基本上控制地图和图层的定位。

3.3 ol.layer

层层 。 在开阔层中, 有一系列的层层可供不同任务使用, ol. Leier 相当于一个经理, 他有效地处理地图数据来源的多样性和复杂性。

3.4 ol.source

数据源。 地图的中心部分没有数据就无法显示。 它相当于一个层, 不同层次的数据来源不同 。

默认情况下, Openlayers 使用 Mercator 投影坐标系统, 但我们也可以使用 WGS84 坐标系统 。

3.5 ol.control

控件。

3.6 ol.interaction

交互。

第四,检查 ol. 来源。

4.1 osm

或者

或者

const projection = get(“EPSG:3857”);

4.2

4.3 高德

4.4 自定义

5、控件

5.1 全屏

全屏功能主要由上述两行代码处理:
var fullScreen = new ol.control.FullScreen();
controls: ol.control.defaults().extend([fullScreen]),

后记

如果你认为技术或代码有益,你可以感谢作者,请他喝杯咖啡。
如果您认为技术或代码不足//(()//,请在评论部分留言,以便提交人能够继续改进。
谢谢你的鞋子,小伙子们!