关于Openlayer3的菜鸟认识

什么是OpenLayers?

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后,OpenLayers已经将所用到的Prototype.js组件 整合到了自身当中,并不断在Prototype.js的基础上完善面向对象的开发,Rico用到地方不多,只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。

我眼里的Openlayer:

      说到openlayer不得不说其中的map,map是OpenLayers的核心组件,如果把开发openlayer3过程比做画画的话,那么map就是一个神奇的桌子,它是来承载各式各样的纸(layer),画画的背景想用地图做背景怎么办?这个时候ol.layer.Tile出来了,想加载网格中加载块状地图,非它莫属,想加载客户数据怎么办?ol.layer.Vector帮助你,好了背景图有了,自己画的也加上了,突然发现对背景跟自己画的有点不满意,想自己添加,修改怎么办,给map加上特效,ol.interaction.xxxx,想要画点你就加ol,interaction.Draw,想修改你就加上ol.interaction.Modify,当然在加特效之前你可以对地图做一些渲染,ol.FeatureOverlayer,因为默认的样式画出来的东西不一定会看的清。当然事实上远没有这没简单,每个类都有自己的方法。就说map吧,至少我用到最多的是它的on()跟once()方法,前者监听一种特定类型的事件,后者监听一次特定类型的事件,其中on()跟un()是配对使用的。其他的就不多说了,可以参考一下官方手册。

一些常用的例子

首先从Map的官方参考手册看起

ol.Map

The map is the core component of OpenLayers. For a map to render, a view, one or more layers, and a target container are needed.

从上面Map的定义看,我们可以知道map是OpenLayers的核心组件。对map进行渲染,我们至少需要一个view(视图),一个layers(层)和一个目标的容器。

根据定义我们创建一个

最简单的map

<html>
<head>
<meta charset="utf-8">
<title>GIS开发样例-V1.0</title>
<meta content="Copyright (c) Leetao" name="copyright">
<link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css">    
<script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var map = new ol.Map({
        view: new ol.View({
            center: [0, 0], //视图的初始中心
            zoom: 1        //用于缩放视图的初始分辨率
        }),
        layers: [
        new ol.layer.Tile({  //Tile预渲染层
            source: new ol.source.MapQuest({layer: 'osm'})  
        })
        ],
        target: 'map'
    });
</script>
</body>
</html>

结果如图:

关于Openlayer3的菜鸟认识_第1张图片

简单地图创建结束,接着让我们在地图上画图案
简单的绘图
代码如下:
<html>
<head>
<meta charset="utf-8">
<title>GIS开发样例-V1.0</title>
<meta content="Copyright (c) Leetao" name="copyright">
<link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css">    
<script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
    <form class="form-inline">
        <label>Geometry type &nbsp;</label>
        <select id="type">
            <option value="None">None</option>
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
        </select>
    </form>
<script>
    var source = new ol.source.Vector();
    
    var vector = new ol.layer.Vector({
        source: source
    });
    
       var map = new ol.Map({
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
    })
      //  vector              //(2)
           ],
           target: 'map'
       });
    //featureOverlay
    var featureOverlay = new ol.FeatureOverlay({
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        }),
    }
    );
    featureOverlay.setMap(map);
    
    var typeSelect = document.getElementById('type');
    
    var draw;
    function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
            features: featureOverlay.getFeatures(),     // (1)
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (value)
                });
                map.addInteraction(draw);
            }
        }
            typeSelect.onchange = function(e) {
                map.removeInteraction(draw);
                addInteraction();
            };
            
            addInteraction();
</script>
</body>
</html>

结果如下:

关于Openlayer3的菜鸟认识_第2张图片

  
上面代码可以让你在Tile上绘点,线以及几何图形,当然如果你把 (1)注释了,再尝试在上面绘点,你会发现绘制的图形变成透明的了,
如果你先把(2)注释给取消了,在把(1)给注释了,你会发现,这个时候绘图是可以看见的
绘图结束了就是该修改图了
简单的绘图以及修改图
只需要在原有基础上加个 ol.interaction.Modify就可以修改了
代码如下:
<html>
<head>
<meta charset="utf-8">
<title>GIS开发样例-V2.0</title>
<meta content="Copyright (c) Leetao" name="copyright">
<link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css">    
<script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
    <form class="form-inline">
        <label>Geometry type &nbsp;</label>
        <select id="type">
            <option value="None">None</option>
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
        </select>
    </form>
<script>
    var source = new ol.source.Vector();
    var vector = new ol.layer.Vector({
        source: source
    });
       var map = new ol.Map({
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
    })
           ],
           target: 'map'
       });
    //featureOverlay
    var featureOverlay = new ol.FeatureOverlay({
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        }),
    }
    );
    featureOverlay.setMap(map);
    var modify = new ol.interaction.Modify({
        features: featureOverlay.getFeatures(),
        deleteCondition: function(event) {
            return ol.events.condition.shiftKeyOnly(event) &&
            ol.events.condition.singleClick(event);
        }
    });
    map.addInteraction(modify);
    
    var typeSelect = document.getElementById('type');
    
    var draw; // global so we can remove it later
    function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
            features: featureOverlay.getFeatures(),
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (value)
                });
                map.addInteraction(draw);
            }
        }
            typeSelect.onchange = function(e) {
                map.removeInteraction(draw);
                addInteraction();
            };
            addInteraction();
</script>
</body>
</html>
当然可以添加特效也可以修改特效,采用map.removeInteraction(),可以在特定事件触发之后禁止修改亦或是禁止绘图
上面都是单层的,如果想加入客户数据,参照样例一,将注释(2)去掉即可。
现在我们尝试从后台加载数据,并对后台传来的数据进行二次修改
修改后台传来的数据
主要采用了ol.interaction.Select()方法
核心代码如下:
var raster = new ol.layer.Tile({
  source: new ol.source.MapQuest({
    layer: 'sat'
  })
});
var vector = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    projection: 'EPSG:3857',
    url: 'data/geojson/countries.geojson'
  })
});
var select = new ol.interaction.Select();
var modify = new ol.interaction.Modify({
  features: select.getFeatures()
});
var map = new ol.Map({
  interactions: ol.interaction.defaults().extend([select, modify]),
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});
其中ol.interaction.Select是用来处理被选中的Vector的数据的。
最后附上官方手册部分翻译(博主自己翻译的,可能有错,只供参考)
关于Openlayer3的菜鸟认识_第3张图片
关于Openlayer3的菜鸟认识_第4张图片
关于Openlayer3的菜鸟认识_第5张图片
关于Openlayer3的菜鸟认识_第6张图片
关于Openlayer3的菜鸟认识_第7张图片
如果文章存在错误,请指正。

你可能感兴趣的:(关于Openlayer3的菜鸟认识)