OpenLayers S1
Q. JS如何编写类与生成构造函数
A.
基类为Class,代码如下：
var Class = {//原始基类
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var Book = Class.create(); //声名为Book的类
Book.prototype = { //给Book类添加成员和方法
className:”Book”, //属性：类名
initialize: function(name){ //构造函数
this.name = name;
},
getName:function(){ //方法：取书名
return this.name;
}
}
var book = new Book(‘XYZ’); //创建一个Book对像
document.write(book.getName()); //打印书名
Q. Opanlayers如何添加WMS服务层
A.
map = new OpenLayers.Map( ‘map’,{ controls: [] } );
layer = new OpenLayers.Layer.WMS( “test”, //层别名
“http://192.168.2.60:8083/wmsconnector/com.esri.wms.Esrimap” //服务连接
, {
layers: ‘street3’, //包含层的ID，AXL文件里层的ID，用”,”分开
format:OpenLayers.Util.alphaHack()?’image/gif’:’image/png’, //图片格式
transparent:’true’, //是否透明，注意，IE只支持GIF透明，
ServiceName: “test2”,//wms服务名
async: true,
srs:’EPSG:4214′ //坐标系统,经纬度写EPSG:4326
}
,{
maxExtent:new OpenLayers.Bounds(489757.940,293425.5058,534205.948491573,326902.17035), //最大范围坐标
projection:”EPSG:4214″,
isBaseLayer:true,
singleTile:true,//是否瓦片图
maxResolution: (534205.948491573-489757.940)/1024 //最大分辨率
}
);
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(512950.10208490635, 312347.9883206317), 0);//第一个参数为坐标，第二个为缩放等级,0为顶级
Q. Opanlayers如何添加工具条toolbar
A.
//关键代码
zoomIn = new OpenLayers.Control.ZoomBox({title:’放大’,displayClass:’olZoomIn’});
zoomOut = new OpenLayers.Control.ZoomBox({out:true,title:’缩小’,displayClass:’olZoomOut’});
pan = new OpenLayers.Control.DragPan({title:’移动’,displayClass:’olPan’});
var panel = new OpenLayers.Control.Panel({defaultControl: pan}); // defaultControl为默认工具
panel.addControls([zoomIn,zoomOut,pan]);
map.addControl(panel); //map为上例定义
与代码对应的CSS文件，displayClass与下面的对应，如displayClass:’olpan’,那么按钮激活状态的
CSS类为.olPanItemActive，非激活状态为.olZoomOutItemInactive。工具条的DIV的Class
默认为:.olControlPanel，通过DIV+CSS定位工具条。以上工具条的CSS示例为：
.olControlPanel div {
display:block;
top: 0px;
left: 190px;
width: 360px;
height: 26px;
margin: 0px;
}
.olControlPanel .olZoomInItemInactive {
width: 26px;
height: 26px;
float:left;
position:relative;
background-image: url(“../SritGisScript/img/zoomin.gif”);
}
.olControlPanel .olZoomInItemActive {
width: 26px;
height: 26px;
float:left;
position:relative;
background-image: url(“../SritGisScript/img/zoomin_1.gif”);
}
.olControlPanel .olZoomOutItemInactive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“../SritGisScript/img/zoomout.gif”);
}
.olControlPanel .olZoomOutItemActive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“../SritGisScript/img/zoomout_1.gif”);
}
.olControlPanel .olPanItemInactive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“../SritGisScript/img/pan.gif”);
}
.olControlPanel .olPanItemActive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“../SritGisScript/img/pan_1.gif”);
}
Q. Opanlayers如何添加测距功能
A.
说明：本段代码是在 openlayers/examples/measure.html 基础上进行完善
===================================================
CSS添加内容：
.olControlPanel .olMeasureLineItemInactive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“img/measureline.gif”);
}
.olControlPanel .olMeasureLineItemActive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“img/measureline_1.gif”);
}
.olControlPanel .olMeasurePolygonItemInactive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“img/measurearea.gif”);
}
.olControlPanel .olMeasurePolygonItemActive {
width: 26px;
height: 26px;
position:relative;
float:left;
background-image: url(“img/measurearea_1.gif”);
}
======================================================================
javascript添加内容:
var sketchSymbolizers = {
“Point”: {
pointRadius: 4,
graphicName: “square”,
fillColor: “white”,
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: “#333333”
},
“Line”: {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: “#666666”,
strokeDashstyle: “dash”
},
“Polygon”: {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: “#666666”,
fillColor: “white”,
fillOpacity: 0.3
}
};
var style = new OpenLayers.Style();
style.addRules([
new OpenLayers.Rule({symbolizer: sketchSymbolizers})
]);
var styleMap = new OpenLayers.StyleMap({“default”: style});
measureLine=new OpenLayers.Control.Measure(
OpenLayers.Handler.Path, {
title:’测距’,
displayClass:’olMeasureLine’,
persist: true,
handlerOptions: {
layerOptions: {styleMap: styleMap}
}
}
);
measureLine.events.on({
“measure”: handleMeasurements //测距功能回调方法
});
measurePolygon=new OpenLayers.Control.Measure(
OpenLayers.Handler.Polygon, {
title:’测面积’,
displayClass:’olMeasurePolygon’,
persist: true,
handlerOptions: {
layerOptions: {styleMap: styleMap}
}
}
);
measurePolygon.events.on({
“measurepartial”: handleMeasurements ////测面积功能回调方法
});
map.addControls([measureLine,measurePolygon]);
==================================================================
//回调方法,根据需要编写，本示例为在output的Div里输出
function handleMeasurements(event) {
var geometry = event.geometry;
var units = event.units;
var order = event.order;
var measure = event.measure;
var element = document.getElementById(‘output’);
var out = “”;
if(order == 1) {
out += “measure: ” + measure.toFixed(3) + ” ” + units;
} else {
out += “measure: ” + measure.toFixed(3) + ” ” + units + “2”;
}
element.innerHTML = out;
}
=====================================================================
转载自：https://blog.csdn.net/iteye_16449/article/details/81820447
