OpenLayers项目入门-实例

最新推荐文章于 2024-02-04 17:31:53 发布

Biver__

最新推荐文章于 2024-02-04 17:31:53 发布

阅读量2.1k

点赞数 3

文章标签： javascript css

本文链接：https://blog.csdn.net/qq_41829867/article/details/112817583

版权

文章目录

前言
一、OpenLayers是什么？
二、入门实例
- 1.在线版本
- 2.离线版本
总结

前言

由于工作，需要学习一下OpenLayers，了解了基础知识后发现网上好多所谓入门实例太坑人了，对我这样的前端小白太不友好了，所以，在测试了一个最简单的版本后，我准备自己写一个，喜欢点赞哈。

一、OpenLayers是什么？

OpenLayers使在任何网页中轻松放置动态地图成为可能。它可以显示从任何来源加载的地图图块，矢量数据和标记。OpenLayers的开发旨在进一步利用各种地理信息。重点在于是一个完全免费的JavaScript。暂时我的理解就是处理地图数据的。

二、入门实例

1.在线版本

在浏览器中输入openlayers.org进入官网，然后找到快速开始，懒得截图了，链接https://openlayers.org/en/latest/doc/quickstart.html
就这个
在这里插入图片描述

代码如下：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

直接使用复制到记事本，然后改后缀为.html，效果如下：
在这里插入图片描述

2.离线版本

之前那个必须在有网的情况下，下面这个是离线版本，为了方便，我是用的Hbuilder
在这里插入图片描述
新建一个项目，里面只需要新建一个index.html就好了，那个test.html是之前那个在线版本。
进入官网：

你就会得到：

解压选择：

复制到项目中：

index的代码：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

就是把在线引用改为离线的

总结

以上就是今天要讲的内容，为什么我要写这么简单的东西呢，主要是现在好多前辈不讲武德简单的东西复杂化，搞得人看半天还没搞出来，写此文章，纪念3小时前的我。

Biver__

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
2
评论
OpenLayers项目入门-实例

文章目录前言一、OpenLayers是什么？二、入门实例1.在线版本2.离线版本总结前言由于工作，需要学习一下OpenLayers，了解了基础知识后发现网上好多所谓入门实例太坑人了，对我这样的前端小白太不友好了，所以，在测试了一个最简单的版本后，我准备自己写一个，喜欢点赞哈。一、OpenLayers是什么？OpenLayers使在任何网页中轻松放置动态地图成为可能。它可以显示从任何来源加载的地图图块，矢量数据和标记。OpenLayers的开发旨在进一步利用各种地理信息。重点在于是一个完全免费的J
复制链接

扫一扫