【GIS】——和OpenLayers一起开启GIS之旅

最新推荐文章于 2024-07-20 16:35:33 发布

xu_chenyang

最新推荐文章于 2024-07-20 16:35:33 发布

阅读量1k

点赞数 1

分类专栏： ▶【GIS】文章标签： gis openlayers

▶【GIS】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先上一盘儿Hello World

将以下代码粘到html文件中，然后在浏览器中打开。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 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>

这里写图片描述

太简单了吧。
（哈哈，这是OpenLayer的小伎俩！）

解读HTML

1.引入OpenLayer库文件

<script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript">

2.map容器

<div id="map" class="map"></div>

3.创建map

<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>