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="www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; chart=UTF-8"/>
<style>
html,body {
height: 99%;
width: 99%;
}
#map {
width: 698px;
height: 330px;
border: 1px solid black;
}
/* General ttings */
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-rif;
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.tVisibility(fal); //设置为不显⽰
map.addLayers([graphic1,graphic2]);
//map.tCenter(new OpenLayers.LonLat(90, 10), 0);
// 注册map点击事件
ister("click", map, onMapClick);
// 注册map点击事件
趣味数学游戏ister("zoomend", map, onMapZoom);
// 放⼤到全屏
//map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.addControl(new OpenLayers.Control.MouPosition());
/********************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.MouPosition({element: $('location')})); //获取⿏标的经纬度 //map.tCenter(new OpenLayers.LonLat(100.254, 35.25), 1); //添加平移缩放⼯具条
//map.addControl(new OpenLayers.Control.OverviewMap()); //添加鹰眼图
//map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':fal})); //图层切换⼯具
// map.addControl(new OpenLayers.Control.Permalink('xxxx')); //添加永久链接
//map.addControl(new OpenLayers.Control.MouToolbar());
//ToMaxExtent();
//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})
new OpenLayers.Rule({symbolizer: sketchSymbolizers})
]);
var styleMap = new OpenLayers.StyleMap({"default": style});
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = Parameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.derers;
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];
({
"measure": handleMeasurements,
"measurepartial": handleMeasurements
});
map.addControl(control);
}
//map.tCenter(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 offt = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('./img/mobile-loc.png',size,offt);
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.tOpacity(0.5);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
marker.tOpacity(0.2);
//⿏标点击事件
ister('moudown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); }); markers.addMarker(marker);
markers.addMarker(marker);
//map.addControl(new OpenLayers.Control.LayerSwitcher());
//ToMaxExtent();
//⿏标悬浮到图标上的事件
var companyname="⽩马湖",renshu=502;
ister("mouover", 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,
fal);
popup1.tBackgroundColor("#ffffff");
popup1.tOpacity(12);
popup1.tBorder("1px solid #d91f12");
map.addPopup(popup1);
});
//⿏标移开事件
ister("mouout", marker, function(evt){
褐头山雀popup1.hide();
});
/
**************************添加图⽚标注End***************************/
//createPoint();
//不同级别显⽰不同图层
function onMapZoom(e){
//alert('zoom level:'+Zoom());
//alert('scl:'+Scale());
Zoom() == 1){
//show
graphic1.tVisibility(true);
graphic2.tVisibility(fal);
}el Zoom() == 2){
//hide
graphic1.tVisibility(fal);
graphic2.tVisibility(true);
}el{
graphic1.tVisibility(true);
graphic2.tVisibility(fal);
}
}
}
//测距、⾯积
function handleMeasurements(event) {
var geometry = ry;
var units = event.units;
var order = der;
var measure = asure;
var element = ElementById('output');
var out = "";
if(order == 1) {
out += "measure: " + Fixed(3) + " " + units;
} el {
out += "measure: " + Fixed(3) + " " + units + "<sup>2</" + "sup>"; }
element.innerHTML = out;
}
function toggleControl(_value) {
for(key in measureControls) {
var control = measureControls[key];
if(_value == key ) {
control.activate();
} el {
control.deactivate();
}
}
}
中文歌
function onMapClick(e){
//alert('click');
// 显⽰地图屏幕坐标
var str = "[Screen]:" + e.xy.x + "," + e.xy.y;
// 屏幕坐标向地图坐标的转换
var lonlat = );
str = "[Map]:" + lonlat.lon + "," + lonlat.lat;
//⽣成点图层
}
function createPoint(){
/******************************⽣成点图层Start***********************************/ // Create 50 random features, and give them a "type" attribute that // will be ud 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 + parInt(5 * Math.random())
}
);
}
/**
* Create a style instance that is a collection of rules with symbolizers. * U 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-rif",
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"
逍遥津
}
}),
