码迷,mamicode.com
首页 > 其他好文 > 详细

openlayer3 基础学习一创建&显示地图

时间:2018-05-07 10:19:29      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:100%   keyword   org   css   源码   SM   href   var   http   

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

  

注意,其实上面这段代码就只有一条语句:

new ol.Map({...});

其他代码只是用于设置地图的构造参数。由此可以推测出ol.Map是最主要的地图类,创建地图就需要构造这么一个对象。接下来依次分析每一个参数部分的代码。

  • 参数layers:

    layers: [
                // 创建一个使用Open Street Map地图源的瓦片图层
                new ol.layer.Tile({source: new ol.source.OSM()})
              ],
    

    从名字和具体的值可见这个地方可以设置多个layer,它是OpenLayers 3地图的组成结构单元,地图是由多个layer组成的,这种设计类似于Photoshop里面的图层,多个图层是可以叠加的,在最上面的会覆盖下面的,以此类推。在代码中我们添加了一个Open Street Map的地图layer

  • 参数view

    view: new ol.View({
                center: [0, 0],    // 定义地图显示中心于经度0度,纬度0度处
                zoom: 2            // 并且定义地图显示层级为2
              }),
    

    通过字面意思可以看出,它为地图定义显示窗口,对应ol.View类,可以自定义地图显示的中心点,缩放层级等。

  • 参数target

    target: ‘map‘
    

    指定地图在页面中具体哪个位置进行显示,为此要记住地图显示还是离不开使用dom来实现。虽然和地图业务没什么关系,但也必不可少,因为它是Web GIS,最基本的还是依赖于HTML。

通过上面的源码解读,我们可以发现OpenLayers 3地图主要是由layerview组成,layer可以有多个,view只能有一个。 

openlayer3 基础学习一创建&显示地图

标签:100%   keyword   org   css   源码   SM   href   var   http   

原文地址:https://www.cnblogs.com/lwbjyp/p/9001134.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!