openlayer調用geoserver發布的地圖實現地圖的基本功能

轉自:http://starting.iteye.com/blog/1039809

主要實現的功能有放大,縮小,獲取地圖大小,平移,線路測量,面積測量,拉寬功能,顯示標注,移除標注,畫多邊形獲取經緯度坐標。根據經緯度坐標顯示多邊形。地圖切換,圖層控制等功能。

<?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>
<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 */
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;

}

/* The map and the location bar */
#map {
clear: both;
position: relative;
width: 698px;
height: 330px;
border: 1px solid black;
}

#wrapper {
width: 698px;
}

#location {
float: right;
}

/* Styles used by the default GetFeatureInfo output, added to make IE happy */
table.featureInfo, table.featureInfo td, table.featureInfo th {
border: 1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
}

table.featureInfo th {
padding: .2em .2em;
text-transform: uppercase;
font-weight: bold;
background: #eee;
}

table.featureInfo td {
background: #fff;
}

table.featureInfo tr.odd td {
background: #eee;
}

table.featureInfo caption {
text-align: left;
font-size: 100%;
font-weight: bold;
text-transform: uppercase;
padding: .2em .2em;
}
</style>
<!-- Import OpenLayers, reduced, wms read only version -->
<script src="../lib/OpenLayers.js" ></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script defer="defer" type="text/javascript">
var map, measureControls;
var untiled;
var tiled;

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.23808203125,
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 control;
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.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.toFixed(3) + " " + units;
} else {
out += "面積為: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
}
element.innerHTML = out;
}
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};
//縮小
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,marker;
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.34851,33.22630), 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);
}

</script>
</head>
<body οnlοad="init()">
<div id="toolbar" style="display:">
<input type="button" value="放大" οnclick="zoomIn()"/>
<input type="button" value="縮小" οnclick="zoomOut()"/>
<input type="button" value="獲取地圖大小" οnclick="getSize()"/>
<input type="button" value="平移" οnclick="toggleControl('none')"/>
<input type="button" value="線路測量" οnclick="toggleControl('line')"/>
<input type="button" value="測量面積" οnclick="toggleControl('polygon')"/>
<input type="button" value="shift拉框" οnclick="boxExtend()"/>
<input type="button" value="顯示標注" οnclick="addMarker()"/>
<input type="button" value="移除標注" οnclick="removeMarker()"/>
<input type="button" value="畫多邊形獲取經緯度坐標" οnclick="test()"/>
</div>
<div id="map">

</div>
<div id="wrapper">
<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://www.cnblogs.com/cugwx/p/3725304.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/377001.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/377001.shtml
英文地址,請注明出處:http://en.pswp.cn/news/377001.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

LLVM與Codegen技術

LLVM 百度百科 LLVM是構架編譯器(compiler)的框架系統&#xff0c;以C編寫而成&#xff0c;用于優化以任意程序語言編寫的程序的編譯時間(compile-time)、鏈接時間(link-time)、運行時間(run-time)以及空閑時間(idle-time)&#xff0c;對開發者保持開放&#xff0c;并兼容已有…

跟烏克蘭人學編程1

今天要Disable一個菜單&#xff0c;工程項目多&#xff0c;不容易找。 烏克蘭人建議我用Spy&#xff0c;將靶拖到目標窗體上就可以看到類名。轉載于:https://www.cnblogs.com/SunWentao/archive/2012/12/19/2825220.html

html網頁轉圖片_HTML圖片

html網頁轉圖片HTML圖片 (HTML Images) Images are visuals of something that look elegant. In web pages, images are used to create a good and appealing design. 圖像是外觀精美的視覺效果。 在網頁中&#xff0c;圖像用于創建良好且吸引人的設計。 The <img> ta…

Android學習拾遺

1. java中的flush()作用&#xff1a;強制將輸出流緩沖區的數據送出。 2. 文件存儲&#xff1a; 存儲到內部&#xff1a;另外使用一個class實現&#xff0c;最開始初始化用了this,后來放在這里不合適&#xff0c;改成了帶參數的構造方法。 包括存儲、讀取、追加 讀取&#xff1a…

OLAP 技術之列式存儲與數據壓縮(快查詢方法之一)

前言 列式存儲和數據壓縮&#xff0c;對于一款高性能數據庫來說是必不可少的特性。一個非常流行的觀點認為&#xff0c;如果你想讓查詢變得更快&#xff0c;最簡單且有效的方法是減少數據掃描范圍和數據傳輸時的大小&#xff0c;而列式存儲和數據壓縮就可以幫助我們實現上述兩…

sql 視圖嵌套視圖_SQL視圖

sql 視圖嵌套視圖SQL | 觀看次數 (SQL | Views) Views in SQL are virtual tables. A view also has rows and columns as theyre during a real table within the database. We will create a view by selecting fields from one or more tables present within the database.…

Postgresql多線程hashjoin(inner join)

pg hashjoin 節點大致步驟&#xff1a; 1、分塊與分桶。對一個表hash時&#xff0c;確定塊數和桶數量。&#xff08;一塊被劃分為10個元組的桶&#xff09;確定分塊號與分桶號是由hashvalue決定的。 2、執行&#xff1a; 1、順序獲取S表中所有元組&#xff0c;對每一條元組Has…

iframe實現局部刷新和回調--開篇

今天做項目遇到一個問題。就是提交表單的時候&#xff0c;驗證用戶名是否存在和驗證碼是否正確。 當驗證碼或者用戶名存在的時候。在后臺彈窗提示。可頁面原本file里面符合要求的值刷新沒了。用戶體驗不好。因為用ifream刷新技術已不是什么新鮮技術。所以網上有大把的資料可參考…

Java文件類boolean setExecutable(boolean exec_file,boolean owner_access)方法,帶示例

文件類boolean setExecutable(boolean exec_file&#xff0c;boolean owner_access) (File Class boolean setExecutable(boolean exec_file , boolean owner_access)) This method is available in package java.io.File.setExecutable(boolean exec_file , boolean owner_acc…

OLTP 系統和 OLAP 系統的核心設計思想

關于 OLTP 系統和 OLAP 系統的核心設計思想 數據存儲系統的關于查詢的典型操作&#xff1a; -- 第一種需求&#xff1a; 根據 key&#xff08;1&#xff09; 找 value&#xff08;name,age&#xff09;&#xff0c; 單點查詢 select name, age from student where id 1; stu…

虛擬機

vt-x 虛擬技術的硬盤支持。想像成“硬解碼”的東東。不是裝虛擬機必須的&#xff0c;但有它效果會好些。 vt-x檢測工具&#xff1a;securable.exe 下載地址&#xff1a;http://pan.baidu.com/s/1kTBOvzD Hardware Virtualization選項&#xff1a; no [CPU和BIOS都不支持VT] loc…

算法(轉)

歡迎自薦和推薦鏈接。 算法 優秀博客推薦&#xff1a;各種數據結構與算法知識入門經典&#xff08;不斷更新)基本算法 貪心算法&#xff1a;貪心算法 作者&#xff1a;獨酌逸醉 貪心算法精講 作者&#xff1a;3522021224 遞歸和分治&#xff1a;遞歸與分治策略 …

sjf調度算法_如何通過靜態方法預測SJF調度中未來過程的突發時間?

sjf調度算法In SJF Scheduling, CPU is assigned to the process having the smallest burst time but it can not be implemented practically, because we dont know burst time of the arrived processes in advance. 在SJF Scheduling中 &#xff0c;將CPU分配給具有最短突…

flask 知識點總結

request對象的常用屬性具體使用方法如下:request.headers, request.headers.get(If-None-Match)request.json, request.json[value] 或 request.json.get(detail_msg, "")request.args, request.args.get(limit, 10)來獲取query parametersrequest.form, request.for…

Postgresql中的hybrid hash join(無狀態機講解)

hybrid hash join hybrid hash join是基于grace hash join 的優化。 在postgresql中的grace hash join 是這樣做的&#xff1a;inner table太大不能一次性全部放到內存中&#xff0c;pg會把inner table 和outer table按照join的key分成多個分區&#xff0c;每個分區(有一個inn…

末日中的黎明

哈哈&#xff0c; 今天是2012-12-21&#xff0c;傳說中的世界末日&#xff0c;不過現在看來&#xff0c;一切都是空的。。。 在這個容易記憶的日子里&#xff0c;我的博客開通了。他將伴隨我以后的學習開發&#xff0c;期望我能充分利用博客&#xff0c;幫我養成常總結、常記筆…

使用numpy.tanh()打印矢量/矩陣元素的雙曲正切值 使用Python的線性代數

Prerequisite: 先決條件&#xff1a; Defining a Vector 定義向量 Defining a Matrix 定義矩陣 Numpy is the library of function that helps to construct or manipulate matrices and vectors. The function numpy.tanh(x) is a function used for generating a matrix / v…

Mahout kmeans聚類

Mahout K-means聚類 一、Kmeans 聚類原理 K-means算法是最為經典的基于劃分的聚類方法&#xff0c;是十大經典數據挖掘算法之一。K-means算法的基本思想是&#xff1a;以空間中k個點為中心進行聚類&#xff0c;對最靠近他們的對象歸類。通過迭代的方法&#xff0c;逐次更新各聚…

Web項目中獲取SpringBean——在非Spring組件中獲取SpringBean

最近在做項目的時候我發現一個問題&#xff1a;Spring的IOC容器不能在Web中被引用(或者說不能被任意地引用)。我們在配置文件中讓Spring自動裝配&#xff0c;但并沒有留住ApplicationContext的實例。我們如果希望在我們的項目中任何位置都能拿到同一個ApplicationContext來獲取…

postgresql對于HashJoin算法的Data skew優化與MCV處理

Data skew 很好理解&#xff0c;即數據傾斜。現實中的數據很多都不是正態分布的&#xff0c;譬如城市人口&#xff0c;東部沿海一個市的人口與西部地區一個市地區的人口相比&#xff0c;東部城市人口會多好幾倍。 postgresql的skew的優化核心思想是"避免磁盤IO"。 優…