3911人阅读
arcgis server（43）
主要实现的功能有放大，缩小，获取地图大小，平移，线路测量，面积测量，拉宽功能，显示标注，移除标注，画多边形获取经纬度坐标。根据经纬度坐标显示多边形。地图切换，图层控制等功能
Html代码 &
&version=&1.0&&encoding=&UTF-8&&&&!DOCTYPE&HTML&PUBLIC&&-//W3C//DTD&XHTML&1.0&Strict//EN&&&DTD/xhtml1-strict.dtd&&&&xmlns=&http://www.w3.org/1999/xhtml&&&&&&&&&&&&&&&&&OpenLayers&map&preview&&&&&&&&&&&&&&&&&&&&&rel=&stylesheet&&type=&text/css&&href=&../theme/default/style.css&&&&&&&&&&&&&rel=&stylesheet&&href=&../theme/default/google.css&&type=&text/css&&&&&&&&&&&&&&&&&&&&&&type=&text/css&&&&&&&&&&&&&&&/*&General&settings&*/ &&&&&&&&&&&&&&body&{ &&&&&&&&&&&&&&&&&&font-family:&Verdana,&Geneva,&Arial,&Helvetica,&sans- &&&&&&&&&&&&&&&&&&font-size:& &&&&&&&&&&&&&&} &&&&&&&&&&&&&&/*&Toolbar&styles&*/ &&&&&&&&&&&&&&#toolbar&{ &&&&&&&&&&&&&&&&&&position:& &&&&&&&&&&&&&&&&&&padding-bottom:&0.5& &&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&&&&&/*&The&map&and&the&location&bar&*/ &&&&&&&&&&&&&&#map&{ &&&&&&&&&&&&&&&&&&clear:& &&&&&&&&&&&&&&&&&&position:& &&&&&&&&&&&&&&&&&&width:&698 &&&&&&&&&&&&&&&&&&height:&330 &&&&&&&&&&&&&&&&&&border:&1px&solid& &&&&&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&&&&&#wrapper&{ &&&&&&&&&&&&&&&&&&width:&698 &&&&&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&&&&&#location&{ &&&&&&&&&&&&&&&&&&float:& &&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&/*&Styles&used&by&the&default&GetFeatureInfo&output,&added&to&make&IE&happy&*/ &&&&&&&&&&&&&&table.featureInfo,&table.featureInfo&td,&table.featureInfo&th&{ &&&&&&&&&&&&&&&&&&border:&1px&solid&# &&&&&&&&&&&&&&&&&&border-collapse:& &&&&&&&&&&&&&&&&&&margin:&0; &&&&&&&&&&&&&&&&&&padding:&0; &&&&&&&&&&&&&&&&&&font-size:&90%; &&&&&&&&&&&&&&&&&&padding:&.2em&.1 &&&&&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&&&&&table.featureInfo&th&{ &&&&&&&&&&&&&&&&&&padding:&.2em&.2 &&&&&&&&&&&&&&&&&&text-transform:& &&&&&&&&&&&&&&&&&&font-weight:& &&&&&&&&&&&&&&&&&&background:&# &&&&&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&&&&&table.featureInfo&td&{ &&&&&&&&&&&&&&&&&&background:&# &&&&&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&&&&&table.featureInfo&tr.odd&td&{ &&&&&&&&&&&&&&&&&&background:&# &&&&&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&&&&&table.featureInfo&caption&{ &&&&&&&&&&&&&&&&&&text-align:& &&&&&&&&&&&&&&&&&&font-size:&100%; &&&&&&&&&&&&&&&&&&font-weight:& &&&&&&&&&&&&&&&&&&text-transform:& &&&&&&&&&&&&&&&&&&padding:&.2em&.2 &&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&src=&../lib/OpenLayers.js&&&&&&&&&&&&&src=&/maps/api/js?sensor=false&&&&&&&&&&&&defer=&defer&&type=&text/javascript&&&&&&&&&&&&&&&var&map,&measureC &&&&&&&&&&&&&&var& &&&&&&&&&&&&&&var& &&&&&&&&&&&&&& &&&&&&&&&&&&&&function&init(){ &&&&&&&&&&&&&&&&&&format&=&'image/png'; &&&&&&&&&&&&&&&&&&var&bounds&=&new&OpenLayers.Bounds(&&//地图区域范围 &&&&&&&&&&&&&&&&&&&&&&74.137,&6.319, &&&&&&&&&&&&&&&&&&&&&&135.086,&53.558 &&&&&&&&&&&&&&&&&&); &&&&&&&&&&&&&&&&&&var&options&=&{ &&&&&&&&&&&&&&&&&&&&&&controls:&[], &&&&&&&&&&&&&&&&&&&&&&&maxExtent:&bounds, &&&&&&&&&&&&&&&&&&&&&&maxResolution:&0., &&&&&&&&&&&&&&&&&&&&&&projection:&&EPSG:4610&, &&&&&&&&&&&&&&&&&&&&&&numZoomLevels:&7,& &&&&&&&&&&&&&&&&&&&&&&units:&'degrees' &&&&&&&&&&&&&&&&&&}; &&&&&&&&&&&&&&&&&&map&=&new&OpenLayers.Map('map',&options); &&&&&&&&&& &&&&&&&&&&&&&&&&&/**********************加载图层&开始*******************************/ &&&&&&&&&&&&&&&&/*&&&tiled&=&new&OpenLayers.Layer.WMS(&&//图层组 &&&&&&&&&&&&&&&&&&&&&&&基础图层&,&&http://localhost:8080/geoserver/wms&, &&&&&&&&&&&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&&&&&&&&&&height:&'330', &&&&&&&&&&&&&&&&&&&&&&&&&&width:&'698', &&&&&&&&&&&&&&&&&&&&&&&&&&layers:&'sf', &&&&&&&&&&&&&&&&&&&&&&&&&&styles:&'', &&&&&&&&&&&&&&&&&&&&&&&&&&srs:&'EPSG:4326', &&&&&&&&&&&&&&&&&&&&&&&&&&format:&format, &&&&&&&&&&&&&&&&&&&&&&&&&&tiled:&'true', &&&&&&&&&&&&&&&&&&&&&&&&&&tilesOrigin&:&map.maxExtent.left&+&','&+&map.maxExtent.bottom &&&&&&&&&&&&&&&&&&&&&&}, &&&&&&&&&&&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&&&&&&&&&&buffer:&0, &&&&&&&&&&&&&&&&&&&&&&&&&&displayOutsideMaxExtent:&true &&&&&&&&&&&&&&&&&&&&&&}& &&&&&&&&&&&&&&&&&&);*/ &&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&var&streams&=&new&OpenLayers.Layer.WMS(&&&&//图层组 &&&&&&&&&&&&&&&&&&&&&&&中国&,&&http://localhost:8080/geoserver/wms&, &&&&&&&&&&&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&&&&&&&&&height:&'330', &&&&&&&&&&&&&&&&&&&&&&&&&&width:&'698', &&&&&&&&&&&&&&&&&&&&&&&&&&layers:&'china', &&&&&&&&&&&&&&&&&&&&&&&&&&styles:&'', &&&&&&&&&&&&&&&&&&&&&&&&&&srs:&'EPSG:4610', &&&&&&&&&&&&&&&&&&&&&&&&&&format:&format, &&&&&&&&&&&&&&&&&&&&&&&&&&tiled:&'true', &&&&&&&&&&&&&&&&&&&&&&&&&&tilesOrigin&:&map.maxExtent.left&+&','&+&map.maxExtent.bottom &&&&&&&&&&&&&&&&&&&&&&}, &&&&&&&&&&&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&&&&&&&&&&buffer:&0, &&&&&&&&&&&&&&&&&&&&&&&&&&displayOutsideMaxExtent:&true &&&&&&&&&&&&&&&&&&&&&&&&}& &&&&&&&&&&&&&&&&&&); &&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&untiled&=&new&OpenLayers.Layer.WMS(&&//单独图层 &&&&&&&&&&&&&&&&&&&&&&&省会&,&&http://127.0.0.1:8080/geoserver/wms&, &&&&&&&&&&&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&&&&&&&&&&height:&'330', &&&&&&&&&&&&&&&&&&&&&&&&&&width:&'698', &&&&&&&&&&&&&&&&&&&&&&&&&&layers:&'china:provice', &&&&&&&&&&&&&&&&&&&&&&&&&&styles:&'', &&&&&&&&&&&&&&&&&&&&&&&&&&srs:&'EPSG:4610', &&&&&&&&&&&&&&&&&&&&&&&&&&transparent:&&true&, &&&&&&&&&&&&&&&&&&&&&&&&&&format:&format &&&&&&&&&&&&&&&&&&&&&&}, &&&&&&&&&&&&&&&&&&&&&&{singleTile:&true,&ratio:&1}& &&&&&&&&&&&&&&&&&&); &&&&&&&&&&&&&&&&&&&untiled.setVisibility(false);&//设置为不显示 &&&&&&&&&&&&&&&&&&//var&gmap&=&new&OpenLayers.Layer.Google(&Google&Streets&,&{visibility:&false});&&&&
&&&&&&&&&&&&&&&&&&/*&var&dm_wms&=&new&OpenLayers.Layer.WMS(&&点图层&, &&&&&&&&&&&&&&&&&&&http://127.0.0.1:8080/geoserver/wms&, &&&&&&&&&&&&&&&&&&{layers:&&sf:bugsites,sf:archsites&, &&&&&&&&&&&&&&&&&&&transparent:&&true&,&format:&&image/png&});*/ &&&&&&&&&&&&&&&&&&&map.addLayers([streams,untiled]); &&&&&&&&&&&&&&&&/********************END&加载图层*********************************/ &&&&&&&&&&&&&&&&&&&/************************加载一般的基础控件********************************/&&& &&&&&&&&&&&&&&&&&&map.addControl(new&OpenLayers.Control.PanZoomBar({&&//添加平移缩放工具条 &&&&&&&&&&&&&&&&&&&&&&position:&new&OpenLayers.Pixel(2,&15) &&&&&&&&&&&&&&&&&&})); &&&&&&&&&&&&&&&&&&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************加载一般的基础控件********************************/&&& &&&&&&&&&&&&&&&&&&&/***********************鼠标点击，获取图层数据*******************************/&&& &&&&&&&&&&&&&&&&&&map.events.register('click',&map,&function&(e)&{ &&&&&&&&&&&&&&&&&&&&&&document.getElementById('nodelist').innerHTML&=&&Loading...&please&wait...&;
&&&&&&&&&&&&&&&&&&&&&&var&params&=&{ &&&&&&&&&&&&&&&&&&&&&&&&&&REQUEST:&&GetFeatureInfo&, &&&&&&&&&&&&&&&&&&&&&&&&&&EXCEPTIONS:&&application/vnd.ogc.se_xml&, &&&&&&&&&&&&&&&&&&&&&&&&&&BBOX:&map.getExtent().toBBOX(), &&&&&&&&&&&&&&&&&&&&&&&&&&X:&e.xy.x, &&&&&&&&&&&&&&&&&&&&&&&&&&Y:&e.xy.y, &&&&&&&&&&&&&&&&&&&&&&&&&&INFO_FORMAT:&'text/html', &&&&&&&&&&&&&&&&&&&&&&&&&&QUERY_LAYERS:&map.layers[0].params.LAYERS, &&&&&&&&&&&&&&&&&&&&&&&&&&FEATURE_COUNT:&50, &&&&&&&&&&&&&&&&&&&&&&&&&&Layers:&'ok', &&&&&&&&&&&&&&&&&&&&&&&&&&Styles:&'', &&&&&&&&&&&&&&&&&&&&&&&&&&Srs:&'EPSG:4610', &&&&&&&&&&&&&&&&&&&&&&&&&&WIDTH:&map.size.w, &&&&&&&&&&&&&&&&&&&&&&&&&&HEIGHT:&map.size.h, &&&&&&&&&&&&&&&&&&&&&&&&&&format:&format}; &&&&&&&&&&&&&&&&&&&&&&OpenLayers.loadURL(&http://localhost:8080/geoserver/wms&,&params,&this,&setHTML,&setHTML); &&&&&&&&&&&&&&&&&&&&&&OpenLayers.Event.stop(e); &&&&&&&&&&&&&&&&&&}); &&&&&&&&&&&&&&&&/**************END*********鼠标点击，获取图层数据*******************************/&&& &&&&&&&&&&&&&&&&/**********************************点、线、面测量开始**********************************************/ &&&&&&&&&&&&&&&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}); &&&&&&&&&&&&&&&measureControls&=&{ &&&&&&&&&&&&&&&&&&line:&new&OpenLayers.Control.Measure( &&&&&&&&&&&&&&&&&&&&&&OpenLayers.Handler.Path,&{ &&&&&&&&&&&&&&&&&&&&&&&&&&persist:&true, &&&&&&&&&&&&&&&&&&&&&&&&&&handlerOptions:&{ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&layerOptions:&{styleMap:&styleMap} &&&&&&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&), &&&&&&&&&&&&&&&&&&polygon:&new&OpenLayers.Control.Measure( &&&&&&&&&&&&&&&&&&&&&&OpenLayers.Handler.Polygon,&{ &&&&&&&&&&&&&&&&&&&&&&&&&&persist:&true, &&&&&&&&&&&&&&&&&&&&&&&&&&handlerOptions:&{ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&layerOptions:&{styleMap:&styleMap} &&&&&&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&) &&&&&&&&&&&&&&}; &&&&&&&&&&&&&&&var& &&&&&&&&&&&&&&for(var&key&in&measureControls)&{ &&&&&&&&&&&&&&&&&&control&=&measureControls[key]; &&&&&&&&&&&&&&&&&&control.events.on({ &&&&&&&&&&&&&&&&&&&&&&&measure&:&handleMeasurements, &&&&&&&&&&&&&&&&&&&&&&&measurepartial&:&handleMeasurements &&&&&&&&&&&&&&&&&&}); &&&&&&&&&&&&&&&&&&map.addControl(control); &&&&&&&&&&&&&&} &&&&&&&&&&&&&&/***************************END************点，线、面积测量*****************************************/ &&&&&&&&&&&&&&&&&&//添加点标注的图层 &&&&&&&&&&&&&&&&markers&=&new&OpenLayers.Layer.Markers(&markers&); &&&&&&&&&&&&&&&&map.addLayer(markers);&& &&&&&&&&&&&&&&&&markers.setZIndex(200); &&&&&&&&&&&} &&&&&&&&&&&&&& &&&&&&&&&&//获取面积的结果赋值 &&&&&&&&&&&&function&handleMeasurements(event)&{ &&&&&&&&&&&&&&var&geometry&=&event. &&&&&&&&&&&&&&var&units&=&event. &&&&&&&&&&&&&&var&order&=&event. &&&&&&&&&&&&&&var&measure&=&event. &&&&&&&&&&&&&&var&element&=&document.getElementById('output'); &&&&&&&&&&&&&&var&out&=&&&; &&&&&&&&&&&&&&if(order&==&1)&{ &&&&&&&&&&&&&&&&&&out&+=&&面积为:&&&+&measure.toFixed(3)&+&&&&&+& &&&&&&&&&&&&&&}&else&{ &&&&&&&&&&&&&&&&&&out&+=&&面积为:&&&+&measure.toFixed(3)&+&&&&&+&units&+&&2&&+&&sup&;
&&&&&&&&&&&&&&} &&&&&&&&&&&&&&element.innerHTML&=&out; &&&&&&&&&&} &&&&&&&&&&function&setHTML(response){ &&&&&&&&&&&&&&document.getElementById('nodelist').innerHTML&=&response.responseT
&&&&&&&&&&}; &&&&&&&&&&//缩小 &&&&&&&&&&function&zoomOut(){ &&&&&&&&&&&&&&map.zoomOut(); &&&&&&&&&&} &&&&&&&&&&//放大 &&&&&&&&&&function&zoomIn(){ &&&&&&&&&&&&&&map.zoomIn(); &&&&&&&&&&} &&&&&&&&&&//获取地图数据 &&&&&&&&&&function&getSize(){ &&&&&&&&&&&&&&alert(map.getSize()+&,高度为=&+map.getSize().h); &&&&&&&&&&} &&&&&&&&&&//切换鼠标事件功能 &&&&&&&&&&function&toggleControl(_value)&{ &&&&&&&&&&&&&& &&&&&&&&&&&&&&for(key&in&measureControls)&{ &&&&&&&&&&&&&&&&&&var&control&=&measureControls[key]; &&&&&&&&&&&&&&&&&&if(_value&==&key&)&{ &&&&&&&&&&&&&&&&&&&&&&control.activate(); &&&&&&&&&&&&&&&&&&}&else&{ &&&&&&&&&&&&&&&&&&&&&&control.deactivate(); &&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&} &&&&&&&&&&} &&&&&&&&&&&&/*********************拉宽并获取经纬度坐标系*********************************/ &&&&&&&&&&function&boxExtend(){ &&&&&&&&&&&&&&var&controlBox&=&new&OpenLayers.Control(); &&&&&&&&&&&&&&&&OpenLayers.Util.extend(controlBox,&{ &&&&&&&&&&&&&&&&&&&&&&draw:&function&()&{ &&&&&&&&&&&&&&&&&&&&&&&&&&this.box&=&new&OpenLayers.Handler.Box(&controlBox, &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&done&:&this.notice},{&&persist&:&true}, &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{keyMask:OpenLayers.Handler.MOD_SHIFT&}); &&&&&&&&&&&&&&&&&&&&&&&&&&this.box.activate(); &&&&&&&&&&&&&&&&&&&&&&}, &&&&&&&&&&&&&&&&&&&&&&&&notice:&function&(bounds)&{&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&var&ll&=&map.getLonLatFromPixel(new&OpenLayers.Pixel(bounds.left,&bounds.bottom));&
&&&&&&&&&&&&&&&&&&&&&&&&&&var&ur&=&map.getLonLatFromPixel(new&OpenLayers.Pixel(bounds.right,&bounds.top));&
&&&&&&&&&&&&&&&&&&&&&&&&&&alert(ll.lon.toFixed(4)&+&&,&&&+& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ll.lat.toFixed(4)&+&&,&&&+& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ur.lon.toFixed(4)&+&&,&&&+& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ur.lat.toFixed(4)); &&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&}); &&&&&&&&&&&&&&map.addControl(controlBox); &&&&&&&&&&} &&&&&&&&&&var&markers, &&&&&&&&&&var&markArr=new&Array(); &&&&&&&&&&function&addMarker(){ &&&&&&&&&&&&&&&var&url&=&'http://www.openlayers.org/dev/img/marker.png'; &&&&&&&&&&&&&&&&&&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); &&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&marker&=&new&OpenLayers.Marker(new&OpenLayers.LonLat(113.30),&icon);
&&&&&&&&&&&&&&&&&&markers.addMarker(marker); &&&&&&&&&&&&&&&&&&&//&marker&=&new&OpenLayers.Marker(madrid,&icon.clone()); &&&&&&&&&&&&&&&&&//&markers.addMarker(marker);&&&&&&&&&&&& &&&&&&&&&&} &&&&&&&&&&&function&removeMarker()&{ &&&&&&&&&&&&&&&&&&markers.removeMarker(marker); &&&&&&&&&&&} &&&&&&&&&&&/*******************多边形获取经纬度坐标系*************************/ &&&&&&&&&&&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); &&&&&&&&&&&} &&&&&& &&&&&&&&&&&&&&&&&&&&&&&onload=&init()&&&&&&&&&&&&id=&toolbar&&style=&display:&&&&&&&&&&&&
&&&&&&&&&&&&&&&type=&button&&value=&放大&&onclick=&zoomIn()&&&&&&&&&&&&&&&&type=&button&&value=&缩小&&onclick=&zoomOut()&&&&&&&&&&&&&&&&type=&button&&value=&获取地图大小&&onclick=&getSize()&&&&&&&&&&&&&&&&type=&button&&value=&平移&&onclick=&toggleControl('none')&&&&&&&&&&&&&&&&type=&button&&value=&线路测量&&onclick=&toggleControl('line')&&&&&&&&&&&&&&&&type=&button&&value=&测量面积&&onclick=&toggleControl('polygon')&&&&&&&&&&&&&&&&type=&button&&value=&shift拉框&&onclick=&boxExtend()&&&&&&&&&&&&&&&&type=&button&&value=&显示标注&&onclick=&addMarker()&&&&&&&&&&&&&&&&type=&button&&value=&移除标注&&onclick=&removeMarker()&&&&&&&&&&&&&&&&type=&button&&value=&画多边形获取经纬度坐标&&onclick=&test()&&&&&&&&&&&&&&&&&&&&&&id=&map&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&id=&wrapper&&&&&&&&&&&&&&&&id=&location&经纬度坐标&&&&&&&&&&&&&&&id=&scale&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&id=&output&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&id=&xystr&&&&&&&&&&&&id=&nodelist&&&&&&&&&&&&&&&Click&on&the&map&to&get&feature&info&&&&&&&&&&&&&&&&&&&&
&?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&&
&title&OpenLayers map preview&/title&
&!-- Import OL CSS, auto import does not work with our minified OL.js build --&
&link rel=&stylesheet& type=&text/css& href=&../theme/default/style.css&/&
&link rel=&stylesheet& href=&../theme/default/google.css& type=&text/css&&
&!-- Basic CSS definitions --&
&style type=&text/css&&
/* General settings */
font-family: Verdana, Geneva, Arial, Helvetica, sans-
font-size:
/* Toolbar styles */
#toolbar {
padding-bottom: 0.5
/* The map and the location bar */
width: 698
height: 330
#wrapper {
width: 698
#location {
/* Styles used by the default GetFeatureInfo output, added to make IE happy */
table.featureInfo, table.featureInfo td, table.featureInfo th {
border: 1px solid #
border-collapse:
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1
table.featureInfo th {
padding: .2em .2
text-transform:
font-weight:
background: #
table.featureInfo td {
background: #
table.featureInfo tr.odd td {
background: #
table.featureInfo caption {
text-align:
font-size: 100%;
font-weight:
text-transform:
padding: .2em .2
&!-- Import OpenLayers, reduced, wms read only version --&
&script src=&../lib/OpenLayers.js& &&/script&
&script src=&/maps/api/js?sensor=false&&&/script&
&script defer=&defer& type=&text/javascript&&
var map, measureC
function init(){
format = 'image/png';
var bounds = new OpenLayers.Bounds(
//地图区域范围
74.137, 6.319,
135.086, 53.558
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.,
projection: &EPSG:4610&,
numZoomLevels: 7,
units: 'degrees'
map = new OpenLayers.Map('map', options);
/**********************加载图层 开始*******************************/
tiled = new OpenLayers.Layer.WMS(
&基础图层&, &http://localhost:8080/geoserver/wms&,
height: '330',
width: '698',
layers: 'sf',
styles: '',
srs: 'EPSG:4326',
format: format,
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
buffer: 0,
displayOutsideMaxExtent: true
var streams = new OpenLayers.Layer.WMS(
&中国&, &http://localhost:8080/geoserver/wms&,
height: '330',
width: '698',
layers: 'china',
styles: '',
srs: 'EPSG:4610',
format: format,
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
buffer: 0,
displayOutsideMaxExtent: true
untiled = new OpenLayers.Layer.WMS(
//单独图层
&省会&, &http://127.0.0.1:8080/geoserver/wms&,
height: '330',
width: '698',
layers: 'china:provice',
styles: '',
srs: 'EPSG:4610',
transparent: &true&,
format: format
{singleTile: true, ratio: 1}
untiled.setVisibility(false); //设置为不显示
//var gmap = new OpenLayers.Layer.Google(&Google Streets&, {visibility: false});
/* var dm_wms = new OpenLayers.Layer.WMS( &点图层&,
&http://127.0.0.1:8080/geoserver/wms&,
{layers: &sf:bugsites,sf:archsites&,
transparent: &true&, format: &image/png&});*/
map.addLayers([streams,untiled]);
/********************END 加载图层*********************************/
/************************加载一般的基础控件********************************/
map.addControl(new OpenLayers.Control.PanZoomBar({
//添加平移缩放工具条
position: new OpenLayers.Pixel(2, 15)
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************加载一般的基础控件********************************/
/***********************鼠标点击，获取图层数据*******************************/
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = &Loading... please wait...&;
var params = {
REQUEST: &GetFeatureInfo&,
EXCEPTIONS: &application/vnd.ogc.se_xml&,
BBOX: map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
Layers: 'ok',
Styles: '',
Srs: 'EPSG:4610',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: format};
OpenLayers.loadURL(&http://localhost:8080/geoserver/wms&, params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
/**************END*********鼠标点击，获取图层数据*******************************/
/**********************************点、线、面测量开始**********************************************/
var sketchSymbolizers = {
&Point&: {
pointRadius: 4,
graphicName: &square&,
fillColor: &white&,
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: &#333333&
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});
measureControls = {
line: new OpenLayers.Control.Measure(
OpenLayers.Handler.Path, {
persist: true,
handlerOptions: {
layerOptions: {styleMap: styleMap}
polygon: new OpenLayers.Control.Measure(
OpenLayers.Handler.Polygon, {
persist: true,
handlerOptions: {
layerOptions: {styleMap: styleMap}
for(var key in measureControls) {
control = measureControls[key];
control.events.on({
&measure&: handleMeasurements,
&measurepartial&: handleMeasurements
map.addControl(control);
/***************************END************点，线、面积测量*****************************************/
//添加点标注的图层
markers = new OpenLayers.Layer.Markers(&markers&);
map.addLayer(markers);
markers.setZIndex(200);
//获取面积的结果赋值
function handleMeasurements(event) {
var geometry = event.
var units = event.
var order = event.
var measure = event.
var element = document.getElementById('output');
var out = &&;
if(order == 1) {
out += &面积为: & + measure.toFixed(3) + & & +
out += &面积为: & + measure.toFixed(3) + & & + units + &&sup&2&/& + &sup&&;
element.innerHTML =
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseT
function zoomOut(){
map.zoomOut();
function zoomIn(){
map.zoomIn();
//获取地图数据
function getSize(){
alert(map.getSize()+&,高度为=&+map.getSize().h);
//切换鼠标事件功能
function toggleControl(_value) {
for(key in measureControls) {
var control = measureControls[key];
if(_value == key ) {
control.activate();
control.deactivate();
/*********************拉宽并获取经纬度坐标系*********************************/
function boxExtend(){
var controlBox = new OpenLayers.Control();
OpenLayers.Util.extend(controlBox, {
draw: function () {
this.box = new OpenLayers.Handler.Box( controlBox,
{&done&: this.notice},{ &persist&: true},
{keyMask:OpenLayers.Handler.MOD_SHIFT });
this.box.activate();
notice: function (bounds) {
var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom));
var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top));
alert(ll.lon.toFixed(4) + &, & +
ll.lat.toFixed(4) + &, & +
ur.lon.toFixed(4) + &, & +
ur.lat.toFixed(4));
map.addControl(controlBox);
var markers,
var markArr=new Array();
function addMarker(){
var url = 'http://www.openlayers.org/dev/img/marker.png';
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);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(113.30), icon);
markers.addMarker(marker);
// marker = new OpenLayers.Marker(madrid, icon.clone());
// markers.addMarker(marker);
function removeMarker() {
markers.removeMarker(marker);
/*******************多边形获取经纬度坐标系*************************/
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);
&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 id=&map&&
&div id=&wrapper&&
&div id=&location&&经纬度坐标&/div&
&div id=&scale&&
&div id=&output&&
&div id=&xystr&&&/div&
&div id=&nodelist&&
&em&Click on the map to get feature info&/em&
&根据经纬度坐标串显示多边形代码如下
Html代码 &
var&vectorLayer&=&new&OpenLayers.Layer.Vector(&Simple&Geometry&,&{style:layer_style&});
&&&&&&&&&&&&&&var&layer_style&=&OpenLayers.Util.extend({},&OpenLayers.Feature.Vector.style['default']);
&&&&&&&&&&&&&&layer_style.fillOpacity&=&0.2; &&&&&&&&&&&&&&layer_style.graphicOpacity&=0.2; &&&&&&&&&&&&&&&&//&create&a&polygon&feature&from&a&linear&ring&of&points &&&&&&&&&&&&&&var&pointList&=&[];&&&&&&&&&& &&&&&&&&&&&&&&var&point1&=&new&OpenLayers.Geometry.Point(99.&,34.);
&&&&&&&&&&&&&&var&point2&=&new&OpenLayers.Geometry.Point(106.,&25.);
&&&&&&&&&&&&&&var&point3&=&new&OpenLayers.Geometry.Point(116.,&36.);
&&&&&&&&&&&&&&var&point4&=&new&OpenLayers.Geometry.Point(109.&,&41.);
&&&&&&&&&&&&&&var&point5&=&new&OpenLayers.Geometry.Point(99.,34.);
&&&&&&&&&&&&&&pointList.push(point1); &&&&&&&&&&&&&&pointList.push(point2); &&&&&&&&&&&&&&pointList.push(point3); &&&&&&&&&&&&&&pointList.push(point4); &&&&&&&&&&&&&&pointList.push(point5); &&&&&&&&&&&&&&pointList.push(pointList[0]); &&&&&&&&&&&&&&var&linearRing&=&new&OpenLayers.Geometry.LinearRing(pointList); &&&&&&&&&&&&&&var&polygonFeature&=&new&OpenLayers.Feature.Vector( &&&&&&&&&&&&&&new&OpenLayers.Geometry.Polygon([linearRing])); &&&&&&&&&&&&&&&map.addLayer(vectorLayer); &&&&&&&&&&&&&//&map.setCenter(new&OpenLayers.LonLat(point.x,&point.y),&5); &&&&&&&&&&&&&&vectorLayer.addFeatures([&polygonFeature]);&&
var vectorLayer = new OpenLayers.Layer.Vector(&Simple Geometry&, {style:layer_style });
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2;
layer_style.graphicOpacity =0.2;
// create a polygon feature from a linear ring of points
var pointList = [];
var point1 = new OpenLayers.Geometry.Point(99. ,34.);
var point2 = new OpenLayers.Geometry.Point(106., 25.);
var point3 = new OpenLayers.Geometry.Point(116., 36.);
var point4 = new OpenLayers.Geometry.Point(109. , 41.);
var point5 = new OpenLayers.Geometry.Point(99.,34.);
pointList.push(point1);
pointList.push(point2);
pointList.push(point3);
pointList.push(point4);
pointList.push(point5);
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
map.addLayer(vectorLayer);
// map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
vectorLayer.addFeatures([ polygonFeature]);
根据经纬度坐标窜画多边形，线性等可以参考OpenLayers-2.10\examples 下的vector-features.html代码
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：56075次
排名：千里之外
原创：25篇
转载：31篇
(1)(2)(1)(1)(2)(6)(15)(21)(7)