|
From: Bino O. <bi...@in...> - 2010-10-02 02:36:47
|
Dear All.
First, here is my basic openlayer html :
------START----
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Google (v3) Layer Example</title>
<link rel="stylesheet"
href="/openlayers/theme/default/style.css" type="text/css">
<link rel="stylesheet"
href="/openlayers/theme/default/google.css" type="text/css">
<link rel="stylesheet" href="/openlayers/examples/style.css"
type="text/css">
<script
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init(){
// Map is in mercator this time, so over-ride the default
// options that assume lat/lon.
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new
OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 20,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(10325843.277142,
-1394213.708171, 16871298.882086, 1110474.834229),
controls: [new OpenLayers.Control.MouseDefaults(),
new
OpenLayers.Control.MousePosition({numdigits:2}),
new OpenLayers.Control.PanZoomBar(),
//new
OpenLayers.Control.Permalink('permalink'),
//new OpenLayers.Control.Scale(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.LayerSwitcher()
]
};
// Create the map object
map = new OpenLayers.Map('map', options);
// create Google Maps layer
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{type: google.maps.MapTypeId.ROADMAP,
'sphericalMercator': true, numZoomLevels: 20}
);
// create WMS
var wmslayer0 = new OpenLayers.Layer.WMS(
"Yogya",
"http://192.168.10.233:8080/geoserver/wms",
{'layers': 'spoin:spoin0', 'format':'image/png',
'transparent':'true'},
{'opacity': 1.0, 'isBaseLayer': false, 'visibility':
true}
);
var wmslayer1 = new OpenLayers.Layer.WMS(
"Yogya",
"http://192.168.10.233:8080/geoserver/wms",
{'layers': 'spoin:spoin1', 'format':'image/png',
'transparent':'true'},
{'opacity': 1.0, 'isBaseLayer': false, 'visibility':
true}
);
var wmslayer2 = new OpenLayers.Layer.WMS(
"Yogya",
"http://192.168.10.233:8080/geoserver/wms",
{'layers': 'spoin:spoin2', 'format':'image/png',
'transparent':'true'},
{'opacity': 1.0, 'isBaseLayer': false, 'visibility':
true}
);
var wmslayer3 = new OpenLayers.Layer.WMS(
"Yogya",
"http://192.168.10.233:8080/geoserver/wms",
{'layers': 'spoin:spoin3', 'format':'image/png',
'transparent':'true'},
{'opacity': 1.0, 'isBaseLayer': false, 'visibility':
true}
);
var wmslayer4 = new OpenLayers.Layer.WMS(
"Yogya",
"http://192.168.10.233:8080/geoserver/wms",
{'layers': 'spoin:spoin4', 'format':'image/png',
'transparent':'true'},
{'opacity': 1.0, 'isBaseLayer': false, 'visibility':
true}
);
var wmslayer5 = new OpenLayers.Layer.WMS(
"Yogya",
"http://192.168.10.233:8080/geoserver/wms",
{'layers': 'spoin:lines_v', 'format':'image/png',
'transparent':'true'},
{'opacity': 0.75, 'isBaseLayer': false,
'visibility': true}
);
map.addLayers([gmap, wmslayer0, wmslayer1, wmslayer2,
wmslayer3, wmslayer4]);
//map.addControl(new OpenLayers.Control.LayerSwitcher());
// Coordinate display at bottom of map
//map.addControl(new OpenLayers.Control.MousePosition());
// Zoom to Yogya
var point = new OpenLayers.LonLat(110.3667, -7.8000);
// Need to convert zoom point to mercator too
point.transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
map.setCenter(point, 10);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Google (v3) Layer Example</h1>
<p id="shortdesc">
Demonstrate use the Google Maps v3 API.
</p>
<div id="map" class="mediummap"></div>
<div id="docs">
<p>
WMS Methode : <br>
http://192.168.10.233:8080/geoserver/wms
</p>
</div>
</body>
</html>
------STOP------
I Save it as ws03.html, and copy it to : ws03gwc.html, ws03xgwc.html
Next :
1. In ws03gwc.html : Replace all instance of
"http://192.168.10.233:8080/geoserver/wms" with
"http://192.168.10.233:8080/geoserver/geowebcache/service/wms", to make
it call the GeoServer via bundled GeoWebCache
2. In ws03xgwc.html : Replace all instance of
"http://192.168.10.233:8080/geoserver/wms" with
"http://192.168.10.233:8080/geowebcache/service/wms", to make it call
the GeoServer via "external" GeoWebCache installed at the same Tomcat6
Now I have 3 similar openlayer html with 3 different WMS call methode each.
When I tried to open all of that 3 files ... I got 2 different results.
A. The one with standard call to WMS (ws03.html, with
"http://192.168.10.233:8080/geoserver/wms"), display my wms layers (That
"green" objects) correctly.
B. Two others (ws03gwc.html and ws03xgwc.html) did not display my wms
layers.
To make visual comparison, please see http://i56.tinypic.com/2hi359f.png
Kindly please give me any of your enlightment to fix the problem
Sincerely
-bino-
|