OpenLayers开篇: Hello OpenLayers

作为整个项目的一部分,要学习openlayers的基础知识,在此写下学习openlayers的基本思路,希望一起努力!


1、什么是openlayer
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等,用户还可以用简单的图片地图作为背景图,与其他的图层在OpenLayers 中进行叠加,在这一方面OpenLayers提供了非常多的选择。除此之外,OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS(Web Mapping Service)和WFS(Web Feature Service)等网络服务规范,可以通过远程服务的方式,将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发,并使用来自Prototype.js和Rico中的一些组件。


2、OpenLayers学习网站
http://openlayers.org
3、开始我们的第一个openlayers程序
3.1、直接复制一下代码保存为index.html,用浏览器打开
<span style="font-family: Arial, Helvetica, sans-serif;"></span>
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.15.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.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

</pre><p></p><p>3.2 显示一个map地图应用,应该做如下三件事情</p><p><span style="white-space:pre"><span style="white-space:pre"></span>1)包含openlayers</span></p><p><span style="white-space:pre"><span style="white-space:pre"></span></span><span style="white-space: pre; background-color: rgb(240, 240, 240);"><script src="http://openlayers.org/en/v3.15.1/build/ol.js" type="text/javascript"></script></span></p><p><span style="white-space:pre"><span style="white-space:pre"><span style="white-space:pre"></span>2</span>)<div>标签包含一个map</span></p><p><span style="white-space:pre"><span style="white-space:pre"></span></span><span style="white-space:pre; background-color:rgb(240,240,240)"><div id="map" class="map"></div></span></p><p><span style="white-space:pre"></span>用css显示map大小,高400px,宽全屏</p><p><span style="white-space:pre"></span></p><p><pre name="code" class="plain"> <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>

3)用javascript创建一个map

var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });
<span style="font-family: Arial, Helvetica, sans-serif;">target:‘map’将map余div链接起来</span>


效果如图


转载自:https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/51100396.jpg

You may also like...

退出移动版