Openlayer 简单实例11

### Openlayer 简单实例11：添加Vector图层及测量功能 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库，用于显示基于矢量数据的地图和其他类型的地理信息。它支持多种数据源，如WMS（Web Map Service）、WFS（Web Feature Service）等，并且可以方便地与各种GIS（Geographic Information System）系统集成。 #### 二、实例背景 本实例主要介绍了如何在OpenLayers中添加Vector图层以及如何实现地图上的距离和面积测量功能。通过这些功能，用户可以在地图上绘制图形并计算其几何属性。 #### 三、重要概念解释 1. **Vector图层**：在OpenLayers中，Vector图层是一种用于存储和显示矢量数据的图层类型。它可以用来表示点、线或多边形等空间对象。 2. **测量工具**：测量工具允许用户在地图上进行交互式操作，如测量两点之间的距离或某个多边形的面积。这些工具对于地理分析非常有用。 3. **sphericalMercator**：这是指一种地图投影方式，即球面墨卡托投影。此投影方式广泛应用于Web地图服务中，因为它能够较好地保持形状不变形。 4. **displayProjection**：此属性用于定义图层显示时所使用的坐标系。在这里，“EPSG:4326”通常指的是经纬度坐标系。 #### 四、实例细节解析 ##### 1. 添加Vector图层 - **目的**：为了能够在地图上绘制自定义的矢量图形，我们需要添加一个Vector图层到地图中。 - **方法**： - 创建一个新的`OpenLayers.Layer.Vector`对象。 - 将这个Vector图层添加到地图对象中。 ```javascript var vectorLayer = new OpenLayers.Layer.Vector("My Vector Layer"); map.addLayer(vectorLayer); ``` ##### 2. 测量距离和面积 - **目的**：为用户提供测量地图上任意两点间距离或任意多边形面积的功能。 - **方法**： - 使用`OpenLayers.Control.Measure`控制件。 - 设置控制件的参数，例如`handlerOptions`来指定测量类型（距离或面积）。 ```javascript var measureControl = new OpenLayers.Control.Measure( OpenLayers.Handler.Polygon, { handlerOptions: {type: OpenLayers.Handler.Polygon} } ); measureControl.events.on({ 'measure': function(event) { alert(event.text); } }); map.addControl(measureControl); measureControl.activate(); ``` ##### 3. 投影设置 - **sphericalMercator**：当设置`sphericalMercator`为`true`时，意味着地图数据将按照球面墨卡托投影的方式进行渲染。这种方式适用于大多数在线地图服务。 - **displayProjection**：设置为`new OpenLayers.Projection("EPSG:4326")`意味着地图将以经纬度坐标系显示，这有助于确保地理位置的准确性。 ```javascript // 使用球面墨卡托投影 var map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), sphericalMercator: true }); // 不使用球面墨卡托投影 var map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection("EPSG:4326") }); ``` #### 五、总结 通过本实例的学习，我们了解了如何在OpenLayers中添加Vector图层以及如何利用测量工具来获取地图上的距离和面积信息。这些技术对于开发基于Web的地图应用程序非常有用。同时，我们也探讨了不同投影方式对地图显示的影响。这些知识将有助于开发者更好地理解和运用OpenLayers进行地图开发。