|
0px; }
</style>
<script src="../openlayers/OpenLayers.js"></script>
<script type="text/java script">
var map, demolayer;
// sets the chosen modifiable parameter
function setParam(name, value){
str = "demolayer.mergeNewParams({" + name + ": '" + value + "'})"
// alert(str);
eva l(str);
}
OpenLayers.DOTS_PER_INCH = 96.0;
OpenLayers.Util.onImageLoadErrorColor = 'transparent';
function init(){
var mapOptions = {
resolutions: [156543.033928, 78271.5169639999, 39135.7584820001, 19567.8792409999, 9783.93962049996, 4891.96981024998, 2445.98490512499, 1222.99245256249, 611.49622628138, 305.748113140558, 152.874056570411, 76.4370282850732, 38.2185141425366, 19.1092570712683, 9.55462853563415, 4.77731426794937, 2.38865713397468, 1.19432856685505, 0.597164283559817, 0.298582141647617],
projection: new OpenLayers.Projection('EPSG:3857'),
maxExtent: new OpenLayers.Bounds(-20037508.342787,-20037508.342780996,20037508.342780996,20037508.342787),
units: "meters",
controls: []
};
map = new OpenLayers.Map('map', mapOptions );
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')}));
demolayer = new OpenLayers.Layer.WMS(
"ARCGIS-Demo","../service/wms",
{layers: 'ARCGIS-Demo', format: 'image/png' },
{ tileSize: new OpenLayers.Size(256,256),
tileOrigin: new OpenLayers.LonLat(-2.0037508342787E7, 2.0037508342787E7)});
map.addLayer(demolayer);
map.zoomToExtent(new OpenLayers.Bounds(-20037497.2108,-19929239.113399997,20037497.2108,18379686.9965));
// The following is just for GetFeatureInfo, which is not cached. Most people do not need this
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: 'ARCGIS-Demo',
Styles: '',
Srs: 'EPSG:3857',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: "image/png" };
OpenLayers.loadURL("../service/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};
</script>
</head>
<body onload="init()">
<div id="params"></div>
<div id="map"></div>
<div id="nodelist"></div>
</body>
</html>
个人比较喜欢leaflet这个GIS java script库，使用leaflet加载GeoWebCache发布的这个服务：
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - Offline Demo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leafl |