Openlayers入门经典例子
所有例子是基于OpenLayers-2.13，不多说直接上代码了，都是js代码，拷贝过去直接可以用了，路径放在OpenLayers-2.13\examples目录下即可。
本例子地图服务是本地图片发布的，只需修改38行 ‘data/lzk_gis.gif’, 图片名即可。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
html,body {
height: 99%;
width: 99%;
}
#map {
width: 698px;
height: 330px;
border: 1px solid black;
}
/* General settings */
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, measureControls;
var markers;
function init(){
map = new OpenLayers.Map('map');
/**********************加载图层 开始*******************************/
var graphic1 = new OpenLayers.Layer.Image(
'BinJiang City',
'data/lzk_gis.gif',
//坐标范围
new OpenLayers.Bounds(-180, -90, 180, 90),
//图片大小
new OpenLayers.Size(1024, 768),
{numZoomLevels: 3}
);
var graphic2 = new OpenLayers.Layer.Image(
'BinJiang City1',
'data/4_m_citylights_lg.gif',
//坐标范围
new OpenLayers.Bounds(-180, -90, 180, 90),
//图片大小
new OpenLayers.Size(1024, 768),
{numZoomLevels: 3}
);
//graphic2.setVisibility(false); //设置为不显示
map.addLayers([graphic1,graphic2]);
//map.setCenter(new OpenLayers.LonLat(90, 10), 0);
// 注册map点击事件
map.events.register("click", map, onMapClick);
// 注册map点击事件
map.events.register("zoomend", map, onMapZoom);
// 放大到全屏
map.zoomToMaxExtent();
//map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.addControl(new OpenLayers.Control.MousePosition());
/********************END 加载图层*********************************/
/************************加载一般的基础控件********************************/
map.addControl(new OpenLayers.Control.PanZoomBar({ //添加平移缩放工具条
position: new OpenLayers.Pixel(2, 6)
}));
//map.addControl(new OpenLayers.Control.Navigation()); //双击放大,平移
//map.addControl(new OpenLayers.Control.Scale($('scale'))); //获取地图比例尺
// map.addControl(new OpenLayers.Control.MousePosition({element: $('location')})); //获取鼠标的经纬度
//map.setCenter(new OpenLayers.LonLat(100.254, 35.25), 1); //添加平移缩放工具条
//map.addControl(new OpenLayers.Control.OverviewMap()); //添加鹰眼图
//map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); //图层切换工具
// map.addControl(new OpenLayers.Control.Permalink('xxxx')); //添加永久链接
//map.addControl(new OpenLayers.Control.MouseToolbar());
//map.zoomToMaxExtent();
//var zb=new OpenLayers.Control.ZoomBox({out:true});
//var panel = new OpenLayers.Control.Panel({defaultControl: zb});
//map.addControl(panel);
/************END************加载一般的基础控件********************************/
/*****************************测距、面积Start***************************/
// style the sketch fancy
var sketchSymbolizers = {
"Point": {
pointRadius: 4,
graphicName: "square",
fillColor: "white",
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: "#ffffff",
strokeDashstyle: "dash"
},
"Polygon": {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#ffffff",
fillColor: "white",
fillOpacity: 0.3
}
};
var style = new OpenLayers.Style();
style.addRules([
new OpenLayers.Rule({symbolizer: sketchSymbolizers})
]);
var styleMap = new OpenLayers.StyleMap({"default": style});
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
measureControls = {
line: new OpenLayers.Control.Measure(
OpenLayers.Handler.Path, {
persist: true,
handlerOptions: {
layerOptions: {
renderers: renderer,
styleMap: styleMap
}
}
}
),
polygon: new OpenLayers.Control.Measure(
OpenLayers.Handler.Polygon, {
persist: true,
handlerOptions: {
layerOptions: {
renderers: renderer,
styleMap: styleMap
}
}
}
)
};
var control;
for(var key in measureControls) {
control = measureControls[key];
control.events.on({
"measure": handleMeasurements,
"measurepartial": handleMeasurements
});
map.addControl(control);
}
//map.setCenter(new OpenLayers.LonLat(0, 0), 3);
/**************************测距、面积End***************************/
/**************************添加图片标注Start***************************/
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('./img/mobile-loc.png',size,offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(88,46),icon));
var halfIcon = icon.clone();
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(46,45),halfIcon));
halfIcon.setOpacity(0.5);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
marker.setOpacity(0.2);
//鼠标点击事件
marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
markers.addMarker(marker);
//map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.zoomToMaxExtent();
//鼠标悬浮到图标上的事件
var companyname="白马湖",renshu=502;
marker.events.register("mouseover", marker, function(evt){
var html="<b> "+companyname+"<br> 当前人数："+renshu+"人</b>";
popup1=new OpenLayers.Popup("popup1",
new OpenLayers.LonLat(90,10),
new OpenLayers.Size(200,50),
html,
false);
popup1.setBackgroundColor("#ffffff");
popup1.setOpacity(12);
popup1.setBorder("1px solid #d91f12");
map.addPopup(popup1);
});
//鼠标移开事件
marker.events.register("mouseout", marker, function(evt){
popup1.hide();
});
/**************************添加图片标注End***************************/
//createPoint();
//不同级别显示不同图层
function onMapZoom(e){
//alert('zoom level:'+map.getZoom());
//alert('sclse:'+map.getScale());
if(map.getZoom() == 1){
//show some layers....
graphic1.setVisibility(true);
graphic2.setVisibility(false);
}else if(map.getZoom() == 2){
//hide some lyers...
graphic1.setVisibility(false);
graphic2.setVisibility(true);
}else{
graphic1.setVisibility(true);
graphic2.setVisibility(false);
}
}
}
//测距、面积
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 + "<sup>2</" + "sup>";
}
element.innerHTML = out;
}
function toggleControl(_value) {
for(key in measureControls) {
var control = measureControls[key];
if(_value == key ) {
control.activate();
} else {
control.deactivate();
}
}
}
function onMapClick(e){
//alert('click');
// 显示地图屏幕坐标
var str = "[Screen]:" + e.xy.x + "," + e.xy.y;
document.getElementById("screen_xy").innerHTML = str;
// 屏幕坐标向地图坐标的转换
var lonlat = map.getLonLatFromViewPortPx(e.xy);
str = "[Map]:" + lonlat.lon + "," + lonlat.lat;
document.getElementById("location").innerHTML = str;
//生成点图层
}
function createPoint(){
/******************************生成点图层Start***********************************/
// Create 50 random features, and give them a "type" attribute that
// will be used for the label text.
var features = new Array(50);
for (var i=0; i<features.length; i++) {
features[i] = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(
(360 * Math.random()) - 180, (180 * Math.random()) - 90
), {
type: 5 + parseInt(5 * Math.random())
}
);
}
/**
* Create a style instance that is a collection of rules with symbolizers.
* Use a default symbolizer to extend symoblizers for all rules.
*/
var style = new OpenLayers.Style({
fillColor: "#ffcc66",
strokeColor: "#ff9933",
strokeWidth: 2,
label: "${type}",
fontColor: "#333333",
fontFamily: "sans-serif",
fontWeight: "bold"
}, {
rules: [
new OpenLayers.Rule({
minScaleDenominator: 200000000,
symbolizer: {
pointRadius: 7,
fontSize: "9px"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 200000000,
minScaleDenominator: 100000000,
symbolizer: {
pointRadius: 10,
fontSize: "12px"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 100000000,
symbolizer: {
pointRadius: 13,
fontSize: "15px"
}
})
]
});
// Create a vector layer and give it your style map.
var points = new OpenLayers.Layer.Vector("Points", {
styleMap: new OpenLayers.StyleMap(style)
});
points.addFeatures(features);
//map.removeLayer(points);
map.addLayer(points);
/******************************生成点图层End***********************************/
}
//缩小
function zoomOut(){
map.zoomOut();
}
//放大
function zoomIn(){
map.zoomIn();
}
//获取地图数据
function getSize(){
alert(map.getSize()+",高度为="+map.getSize().h);
}
//显示标注
var marker1;
function addMarker(){
var url = './img/small.jpg';
var sz = new OpenLayers.Size(20, 20); //尺寸大小
var calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h);
};
var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
marker1 = new OpenLayers.Marker(new OpenLayers.LonLat(48,31), icon);
markers.addMarker(marker1);
// marker = new OpenLayers.Marker(madrid, icon.clone());
// markers.addMarker(marker);
}
function removeMarker() {
markers.removeMarker(marker1);
}
/*******************多边形获取经纬度坐标系*************************/
function test(){
var getpolygonxy = new OpenLayers.Control();
OpenLayers.Util.extend(getpolygonxy, {
draw: function() {
this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy ,
{ "done": this.notice },{ "persist": true},
{ keyMask: OpenLayers.Handler.MOD_SHIFT });
this.polygon.activate();
},
notice: function(bounds) {
alert(bounds);//坐标信息
}
});
map.addControl(getpolygonxy);
}
</script>
</head>
<body onload="init()">
<div id="toolbar" style="display:">
<input type="button" value="放大" onclick="zoomIn()"/>
<input type="button" value="缩小" onclick="zoomOut()"/>
<input type="button" value="获取地图大小" onclick="getSize()"/>
<input type="button" value="平移" onclick="toggleControl('none')"/>
<input type="button" value="线路测量" onclick="toggleControl('line')"/>
<input type="button" value="测量面积" onclick="toggleControl('polygon')"/>
<!--<input type="button" value="shift拉框" onclick="boxExtend()"/>-->
<input type="button" value="显示标注" onclick="addMarker()"/>
<input type="button" value="移除标注" onclick="removeMarker()"/>
<input type="button" value="画多边形获取经纬度坐标" onclick="test()"/>
</div>
<div id='map'></div>
<div id="wrapper">
<div id="screen_xy"></div>
<div id="location">经纬度坐标
</div>
<div id="scale">
</div>
<div id="output">
</div>
</div>
<div id="xystr"></div>
<div id="nodelist">
<em>Click on the map to get feature info</em>
</div>
</body>
</html>界面如下：
转载自：https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/17263669.jpg
