OpenLayers深入浅出
1.添加地图map
在页面上添加地图，首先要引入相应的OpenLayers的函数库，而后创建地图Map对象，为Map对象添加地图服务后，页面就可以显示地图了。代码如下：
<html>
< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Insert title here</title>
<link rel=”stylesheet” href=”skin.css” type=”text/css”>
<script src=”../lib/OpenLayers.js”></script>
<script type=”text/javascript”>
var map = null;
function init(){
var options = {
controls:[new OpenLayers.Control.KeyboardDefaults]
};
map = new OpenLayers.Map(“map”,options);
var wms = new OpenLayers.Layer.WMS(“LayerName”,”http://vmap0.tiles.osgeo.org/wms/vmap0?”,{layers:”basic”});
map.addLayer(wms);
map.zoomToMaxExtent();
}
</script>
< /head>
< body onload=”init()”>
<div id=”map”></div>
< /body>
</html>
代码中的div为显示地图的容器，地图要加载到哪个容器中所用方式为map = new OpenLayers.Map(“map”,options)，这里的map为容器的id，options为地图参数。map的定义方式有以下几种方式：
// create a map with default options in an element with the id "map1"
var map = new OpenLayers.Map("map1");
// create a map with non-default options in an element with id "map2"
var options = {
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
};
var map = new OpenLayers.Map("map2", options);
// map with non-default options - same as above but with a single argument
var map = new OpenLayers.Map({
div: "map_id",
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
});
// create a map without a reference to a container - call render later
var map = new OpenLayers.Map({
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
});2.定制绘图对象及其相关操作
下列代码为定义画点，线，面的对象。当我们要去地图中进行标会时，只需激活绘画对象即可，用完后记得注销该对象的行为。
如我们要会点时只需：
controls[“point”].activate();即可，其他画线、面类似。
不想绘制时调用controls[“point”].deactivate();
在下面代码倒数第二行，定制的是拖动地图对象的一个操作类。激活他可以拖动地图上的要素，到指定位置。
var controls = {
point: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon),
drag: new OpenLayers.Control.DragFeature(vectors)
};3.定制绘图点、线、面对象实例
- 为地图添加绘制点、线、面步骤：
- 1、无可厚非对地图进行操作首先要添加map对象，以后将不再提示默认添加加map对象。
- 2、定义地图服务（在例子中定义了两个图层，一个wms图层，一个是矢量图层vectors）
- 3、定制标绘地图操作对象contros。
- 4、将地图图层添加到map的图层容器中。
- 5、将标绘操作对象添加到map的操作容器中
- 6、将地图缩放到全图范围内。（注意如果不调用这个代码，地图将不显示出来，而且拖动地图时还会报错，务必添加map.zoomToMaxExtent();）
- 7、激活标绘操作对象。controls.activate();
- 到此可以在地图上正常标绘了。
- <span style=”color: rgb(255, 0, 0);”>注意:如果在标绘的时候如果不希望地图拖动可以调用
- controls.handler.stopDown = true;
- controls.handler.stopUp = true;</span>
- <%@ page language=”java” contentType=”text/html; charset=UTF-8″
- pageEncoding=”UTF-8″%>
- <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- <html>
- <head>
- <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
- <title>Insert title here</title>
- <link rel=”stylesheet” href=”skin.css” type=”text/css”>
- <script src=”../lib/OpenLayers.js”></script>
- <script type=”text/javascript”>
- var map,vectors,controls;
- function init(){
- map = new OpenLayers.Map(“map”);
- var wms = new OpenLayers.Layer.WMS(“world”,”http://vmap0.tiles.osgeo.org/wms/vmap0?”,{layers:’basic’});
- vectors = new OpenLayers.Layer.Vector(“Vector Layer”);
- controls = new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Point);
- map.addLayers([wms,vectors]);
- map.addControl(controls);
- map.zoomToMaxExtent();
- controls.activate();
- }
- </script>
- </head>
- <body onload=”init()”>
- <div id=”map” class=”smallmap”></div>
- </body>
- </html>
4.地图全屏样式设置
设置地图div为全屏时需要将其父容器的百分比也设置成100%，如果不设置，div设置的百分比无效果。
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
var featurecollection = {
“type”: “FeatureCollection”,
“features”: [
{"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates":
[[11.0878902207, 45.1602390564],
[15.01953125, 48.1298828125]]
},
{
“type”: “Polygon”,
“coordinates”:
[[[11.0878902207, 45.1602390564],
[14.931640625, 40.9228515625],
[0.8251953125, 41.0986328125],
[7.63671875, 48.96484375],
[11.0878902207, 45.1602390564]]]
},
{
“type”:”Point”,
“coordinates”:[15.87646484375, 44.1748046875]
}
]
},
“type”: “Feature”,
“properties”: {}}
]
};
http://www.map163.com/?p=949
转载自：https://blog.csdn.net/drr789/article/details/9143567
