Openlayer基础操作文档

最近公司做一个GIS系统，其中我就选用2套解决方案.

1：mapinfo架构

2:Openlayer+在线地图

Openlayer+在线地图使用方法

1:导入js，css

<link rel="stylesheet" href="${pageContext.request.contextPath}/js/theme/default/style.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/OpenLayers.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/deprecated.js"></script>

2:创建地图

<div id="map" class="smallmap"></div>

map = new OpenLayers.Map('map');

3:创建图层

var osm = new OpenLayers.Layer.Vector("空白层", {
isBaseLayer: true,
maxExtent:new OpenLayers.Bounds(-20037508, -20037508,20037508*2,20037508),
numZoomLevels:19,
maxResolution:156543.0339,
units:'m',
projection: "EPSG:900913",
displayProjection: new OpenLayers.Projection("EPSG:4326")
});//根据实际情况创建图层

map.addLayers([osm]);//添加图层到地图

4:设置中心坐标

var newCenter = new OpenLayers.LonLat(111.6693000000,29.0589400000);

newCenter.transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());

map.setCenter(newCenter,16);//openlayer 采用的EPSG:4326坐标，坐标需要转换

5:添加控制器

map.addControl(.....);//添加控制器

6:openlayer常用控制器

new OpenLayers.Control.ScaleLine({
topOutUnits:"千米",
topInUnits:"米",
bottomOutUnits:"英里",
bottomInUnits:"英寸"
})//比例尺

OpenLayers.INCHES_PER_UNIT["千米"] = OpenLayers.INCHES_PER_UNIT["km"];
OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"];
OpenLayers.INCHES_PER_UNIT["英里"] = OpenLayers.INCHES_PER_UNIT["mi"];
OpenLayers.INCHES_PER_UNIT["英寸"] = OpenLayers.INCHES_PER_UNIT["ft"];

new OpenLayers.Control.MousePosition()//鼠标去点，鼠标去的坐标并不是经纬度,鼠标选取大地坐标 。

new OpenLayers.Control.LayerSwitcher()//图例，图例样式可以在style.css修改，

/**
* Layer switcher
*/
.olControlLayerSwitcher {
position: absolute;
top: 25px;
right: 0;
width: 20em;
font-family: sans-serif;
font-weight: bold;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
font-size: smaller;
color: blue;
background-color: transparent;
}

.olControlLayerSwitcher .layersDiv {
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color:#B7FF4A;
}

.olControlLayerSwitcher .layersDiv .baseLbl,
.olControlLayerSwitcher .layersDiv .dataLbl {
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
}

.olControlLayerSwitcher .layersDiv .baseLayersDiv,
.olControlLayerSwitcher .layersDiv .dataLayersDiv {
padding-left: 10px;
}

.olControlLayerSwitcher .maximizeDiv,
.olControlLayerSwitcher .minimizeDiv {
width: 18px;
height: 18px;
top: 5px;
right: 0;
cursor: pointer;
}

.olBingAttribution {
color: #DDD;
}
.olBingAttribution.road {
color: #333;
}

.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
color: #EEE;
}
.olGoogleAttribution {
color: #333;
}
span.olGoogleAttribution a {
color: #77C;
}
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
color: #EEE;
}

//修为自己需要样式

6：画线(路径)

new OpenLayers.Geometry.LineString(list)//list为点集合

7: 画圆

同下

8:画扇形

var sector = new OpenLayers.Geometry.Polygon.createRegularPolygonCurve(
origi_point,//圆心
r,//半径
10,//边数
raiud,//弧度
num //方向角
);

9:画点

 new OpenLayers.Geometry.Point(center.lon, center.lat);

转载于:https://www.cnblogs.com/wangyao1739/p/4318043.html