OpenLayers地图重点属性摘录.docx

一：OpenLayers
1． OpenLayers：常量 version_number标识版本
二：BaseTypes
2． BaseTypes（基本类型）：这里定制了Openlayers中用到的string、number、function、array
3． Bounds（边界）：
属性 left、bottom、right、top、centerLonLat
方法 extend 用于扩展边界，toBBox用于绑定
bounds = new OpenLayers.Bounds();
bounds.extend(new OpenLayers.LonLat(4,5));
bounds.extend(new OpenLayers.LonLat(5,6));
bounds.toBBOX(); // returns 4,5,5,6
4． LonLat（经纬度）：
属性 lon经度、lat纬度
注意：如果地图不是地理投影，那么调用的LonLat表示的是地图上的x、y轴坐标，为（0,0）表示坐标轴原点
例子：map.setCenter(new OpenLayers.LonLat(116.3876,39.8983),13);
最后一个参数表示Zoom:放大倍数
5． Pixel（像素）：属性 x、y表示x和y坐标
6． Size：属性 w、h表示宽和高
三：Console
7． Console：用于调试和把错误等输出到“控制台”上，需要结合使用firebug
四：Control
8． Control（控件）：
使用方法：
方法一：
var map = new OpenLayers.Map('map', { controls: [] });
map.addControl(new OpenLayers.Control.PanZoomBar());
方法二：
var map = new OpenLayers.Map('map',
{ controls: [new OpenLayers.Control.PanZoomBar()，
new OpenLayers.Control.Navigation()]
});
9． Button（按钮）：方法 trigger（） 点击按钮的时候会调用
使用方法：var button = new OpenLayers.Control.Button({
    displayClass: "MyButton", trigger: myFunction
});
panel.addControls([button]);
10． DragPan（鼠标拖动地图）
11． DrawFeature（在矢量图上画点、线、面）
var lines = new OpenLayers.Layer.Vector("Lines", {
styleMap: new OpenLayers.StyleMap({
pointRadius: 3,
strokeColor: "#ff3300",
strokeWidth: 3,
fillOpacity: 0
})
});
var panel = new OpenLayers.Control.Panel({
displayClass: "olControlEditingToolbar"
});
var draw = new OpenLayers.Control.DrawFeature(
lines, OpenLayers.Handler.Path,
{displayClass: "olControlDrawFeaturePath", title: "Draw Lines"}
);
panel.addControls([
new OpenLayers.Control.Navigation({title: "Navigate"}),
draw
]);
map.addControl(panel);
12． EditingToolbar（编辑工具条）
EditingToolbar包含4个控件：draw point、draw lines、draw polygon、pan navigation
构造函数 参数：layer（Openlayer.Layer.Vector）、options
例子：
var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([vector]);
map.addControl(new OpenLayers.Control.EditingToolbar(vector));
13． Geolocate（地理定位）把w3c geolocation API包装成控件，与地图绑定，位置发生变化时触发事件
14． GetFeature
15． Graticule（格子线）在地图上以grid显示经纬线
16． KeyboardDefaults：增加了用键盘实现平移缩放功能
map.addControl(new OpenLayers.Control.KeyboardDefaults())；
17． LayerSwitcher（图层切换功能）
map.addControl(new OpenLayers.Control.LayerSwitcher());
18． Measure（用于测量绘图）：方法 getArea和getLength
19． MousePosition（鼠标位置）：显示鼠标指针移动时的地理坐标
map.addControl(new OpenLayers.Control.MousePosition());
20． MouseToolbar（鼠标工具栏）：有拉框放大的功能，但是需要按住shift键，所以不推荐使用，要实现相同的功能可以使用NavToolbar
21． Navigation（导航）：导航控件处理鼠标事件（拖动、双击、滚动）的地图浏览
注意：这个控件是默认添加到地图中的
22． NavToolbar：加入了两个mousedefaults控件，通过使用zoomBox实现拉框放大功能
map.addControl(new OpenLayers.Control.NavToolbar());
23． OverviewMap（鹰眼）：默认在地图的右下角
map.addControl(new OpenLayers.Control.OverviewMap());
24． Pan（平移）
25． Panel（面板）：Panel控件是其他控件的容器
Each control in the panel is represented by an icon，即表示添加到面板里面的控件都是用图像表示的
26． PanZoom（平移缩放）：由OpenLayers.Control.PanPanel和OpenLayers.Control.PanPanel这两个控件组成，具有平移和缩放的功能
图标：
map.addControl(new OpenLayers.Control.PanZoom());
27． PanZoomBar（平移缩放工具栏）：
由OpenLayers.Control.PanPanel和OpenLayers.Control.ZoomBar这两个控件组成，具有平移和缩放功能，这控件和PanZoom的区别见图标
图标：
map.addControl(new OpenLayers.Control.PanZoomBar());
28．  Permalink（永久链接）：点击永久链接将用户返回到当前地图视图
例子：map.addControl(new OpenLayers.Control.Permalink());
29． Scale（比例尺）：以1:1这种比率样式显示当前地图的比例
例子：map.addControl(new OpenLayers.Control.Scale());
30． ScaleLine（比例尺）：以线段指标的样式显示当前地图的比例
例子：map.addControl(new OpenLayers.Control.ScaleLine());
31． SelectFeature 通过点击或是悬停选择给定层上的Feature
构造函数 参数：layer（Openlayers.Layer.Vector）、options
属性：multipleKey
toggleKey
multiple：是否允许同时选择多个图形
clickout：取消功能，当点击图形外的任何东西，取消对图形的选择
hover：鼠标悬停
例子：
selectControl = new OpenLayers.Control.SelectFeature(
[vectors1, vectors2],
{
clickout: true, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
);
map.addControl(selectControl);
selectControl.activate();
32． SLDSelect
33． Snapping（编辑矢量图层时用于捕捉）
34． Split
35． TouchNavigation（触摸导航）：只针对触摸功能的设备的地图绘制应用程序
36． TransformFeature
37． WMSGetFeatureInfo：使用WMS的查询来获取地图上一个点的信息，显示的格式是Format的
38． WMTSGetFeatureInfo：使用WMTS的查询来获取地图上一个点的信息，显示的格式是Format的
39． Z oomBox(拉框放大的功能)：与NavToolbar同样，属性 out 可以实现拉框缩小（这个控件没有实现）
Q：在界面中使用map.addControl(new OpenLayers.Control.ZoomBox({alwaysZoom:true}));并不能实现将拉框控件添加到地图中？
使用创建新类的方法
下面这段代码中调用的this是哪一层？controls[0]是哪个控件？
OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel, {
initialize: function(options) {
OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]); this.addControls([
new OpenLayers.Control.ZoomBox({alwaysZoom:true})
]);
//this.displayClass = 'olControlNavToolbar'
},
draw: function() {
var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
this.defaultControl = this.controls[0];
return div;
}
});
map.addControl(new OpenLayers.Control.CustomNavToolbar());
40． ZoomIn 放大 使用的时候可以通过PanZoomBar控件，ZoomIn每次放大一个级别
41． ZoomOut 缩小 使用的时候可以通过PanZoomBar控件，ZoomOut每次缩小一个级别
42． ZoomPanel 包括OpenLayers.Control.ZoomIn和OpenLayers.Control.ZoomToMaxExtent和OpenLayers.Control.ZoomOut 图标
map.addControl(new OpenLayers.Control.ZoomPanel());
43． ZoomToMaxExtent 显示地图的最大程度的缩小
五：Map
44． Map （地图）
见资料
构造函数 参数：div（页面中要显示的标签）、options
属性：
allOverlays：？3
maxExtent：地图的最大范围
units：地图的单位
projection：覆盖默认的投影字符串地图，如果适当，最好还设置maxExtent、maxResolution、units
maxResolution：最大分辨率
numZoomLevels：缩放级别数目
知道最大分辨率和缩放级别数目可以直接知道最小和最大的缩放级别
displayProjection：显示的投影级别，与mouseposition控件结合使用，即设置mouseposition显示使用的坐标系
// 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"
});
六：Marker
45． Marker 包括一个OpenLayers.LonLat和OpenLayers,Icon，注意：标记一般都是添加到一个特殊的图层，即OpenLayers.Layer.Markers
使用方法：
方法一：
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));
方法二：
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png')));
注意：标记不能使用同样的图标，但是可以使用clone（）方法实现对图标的克隆
46． Box 用矩形做标记，同样box要添加到Boxes这个图层里面
Q：下面这个程序为什么没有效果？
var boxes = new OpenLayers.Layer.Boxes( "Boxes" );
map.addLayer(boxes);
var bounds = new OpenLayers.Bounds(-10,50,5,60);
var box = new OpenLayers.Marker.Box(bounds);
//box.events.register("click", box, function (e) {
// this.setBorder("yellow");
// });
boxes.addMarker(box);
七：Popup
47． Popup 构造函数参数有六个：ID、lonlat、contentSize、contentHTML、closeBox、closeBoxCallback
popup = new OpenLayers.Popup("chicken",//标识符
new OpenLayers.LonLat(5,40),//在地图上的弹出位置
new OpenLayers.Size(200,200),//弹出的提示框的大小
"example popup",//提示框中显示的内容
true);//是否显示关闭框
map.addPopup(popup);

通过使用下面的方法，可以在标记中添加点击事件，点击时弹出提示框
marker.events.register("click", marker, function (e) {
map.addPopup(popup);
popup.show();//如果不加这个方法，popup只有在第一次点击marker的时候才会出现，之后点击都没有效果
});
48． FramedCloud 继承Popup，弹出的形状与Popup是不一样的
framedcloud = new OpenLayers.Popup.FramedCloud("chicken",//标识符
new OpenLayers.LonLat(5,40),//在地图上的弹出位置
new OpenLayers.Size(200,200),//弹出的提示框的大小
"example popup",//提示框中显示的内容
null,
true);//是否显示关闭框
map.addPopup(framedcloud);
49． Anchored
50． AnchoredBubble
八：Icon
51． Icon （图标） 重要属性：url图片源、size图片大小、offset偏移量
图标一般与marker结合使用
Q：能不能将图标与其他控件结合？能！
var size = new OpenLayers.Size(21,25);//用来控制图标的大小
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);//用来控制图标的偏移量
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);//定义图标
九：Layer
52． Layer （图层）..\openlayers\openlayers的类与方法.doc
53． ArcGIS93Rest 使用ESRI的ArcGIS Server 9.3地图服务中显示的数据
54． ArcIMS 使用ESRI公司的ArcIMS地图服务中显示的数据
55． Bing 使用ESRI的Bing地图
56． Boxes 为box提供图层 方法：drawMarker、removeMarker
57． GeoRSS 添加GeoRSS点功能
58． GML 通过解析GML文件创建一个适量图层 注意：过时，在3.0中被移除
59． Google 构造函数中的参数：name显示的名称、options
例子：
var ghyb = new OpenLayers.Layer.Google(

"Google Hybrid",

{type: G_HYBRID_MAP, sphericalMercator: true}

);
60． Grid 使用瓷砖晶格 层的基类
61． VirtureEarth
例子：
var veroad = new OpenLayers.Layer.VirtualEarth(

"Virtual Earth Roads",

{'type': VEMapStyle.Road, sphericalMercator: true}

);

var veaer = new OpenLayers.Layer.VirtualEarth(

"Virtual Earth Aerial",

{'type': VEMapStyle.Aerial, sphericalMercator: true}

);

var vehyb = new OpenLayers.Layer.VirtualEarth(

"Virtual Earth Hybrid",

{'type': VEMapStyle.Hybrid, sphericalMercator: true}

);

62． Yahoo
例子：
var yahoo = new OpenLayers.Layer.Yahoo(

"Yahoo Street",

{sphericalMercator: true}

);

var yahoosat = new OpenLayers.Layer.Yahoo(

"Yahoo Satellite",

{'type': YAHOO_MAP_SAT, sphericalMercator: true}

);

var yahoohyb = new OpenLayers.Layer.Yahoo(

"Yahoo Hybrid",

{'type': YAHOO_MAP_HYB, sphericalMercator: true}

);

63． WMS
OpenLayers.Layer.WMS实例是用来显示OGC Web地图服务的数据。
构造函数的参数：name（显示的名称）、url（来源）、params、options
例子：
var wms = new OpenLayers.Layer.WMS(
"NASA Global Mosaic",
"http://wms.jpl.nasa.gov/wms.cgi", {layers: "modis,global_mosaic"}
);
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?",
{layers: 'basic'}
);
十：StyleMap
64． StyleMap
构造函数 参数：style、options
Style表示写入渲染方法（ “default”, “temporary”, “select”, “delete”）
例子：
 var styles = new OpenLayers.StyleMap({
"default": {strokeWidth: 2},
"select": {strokeColor: "#0099cc",strokeWidth: 4}
});
方法 addUniqueValueRules 用于向指定渲染方法中的样式对象添加规则
参数 renderIntent 要添加规则的渲染方法
property 给哪个属性创建规则
symbolizers
context
例子：
styles.addUniqueValueRules("default", "RP_TYPE", {
10: {strokeColor: "#000000", strokeWidth: 2},
12: {strokeColor: "#222222", strokeWidth: 2},
14: {strokeColor: "#444444", strokeWidth 2},
16: {strokeColor: "#666666", strokeWidth: 2},
18: {strokeColor: "#888888", strokeWidth: 2},
19: {strokeColor: "#666666", strokeWidth: 1}
});
定义出现在地图界面上的点线面的样式，添加到地图图层中，如果在地图上画点、线、面时则按照定义的样式显示
方法一：
1 2 3 4
Symbolizer----Rule----Style----StyleMap----Vector
1. New Rule ({Symbolizer })
2. Style.addRules(Rule)
3. New StyleMap({Style})
4. New Vector({styleMap:StyleMap})
或者是
New style({},{rules:new Rule({symbolizer})})
只是提供一种方式，写法还有很多种格式
例子：
//定义点线面的样式，然后通过style和rule增加到measure控件中
var sketchSymbolizers = {
"Point": {
pointRadius: 2,
graphicName: "square",
fillColor: "white",
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#ff0000",
//strokeDashstyle: "dash"
},
"Polygon": {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#ff0000",
fillColor: "white",
fillOpacity: 0.3
}
};
var style = new OpenLayers.Style();//定义风格，样式
style.addRules([
new OpenLayers.Rule({symbolizer: sketchSymbolizers})//增加规则，支持（点、线、面）这三个是键
]);
var styleMap = new OpenLayers.StyleMap({"default": style});
.............
var lines = new OpenLayers.Layer.Vector("Lines", {
styleMap: styleMap
});
var polygons = new OpenLayers.Layer.Vector("Polygons",{
styleMap:styleMap
});
map.addLayers([lines,polygons]);

方法二：
1
StyleMap----Vector
1. new StyleMap()
2. StyleMap.addUniqueValueRules
3. New Vector({styleMap:StyleMap})
例子：
// give the features some style
var styles = new OpenLayers.StyleMap({
"default": {
strokeWidth: 2
},
"select": {
strokeColor: "#0099cc",
strokeWidth: 4
}
});
// add rules from the above lookup table
styles.addUniqueValueRules("default", "RP_TYPE", {
10: {strokeColor: "#000000", strokeWidth: 2},
12: {strokeColor: "#222222", strokeWidth: 2},
14: {strokeColor: "#444444", strokeWidth: 2},
16: {strokeColor: "#666666", strokeWidth: 2},
18: {strokeColor: "#888888", strokeWidth: 2},
19: {strokeColor: "#666666", strokeWidth: 1}
});
var vectors = new OpenLayers.Layer.Vector("Lines", {
strategies: [new OpenLayers.Strategy.Fixed()], //战略
protocol: new OpenLayers.Protocol.