1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
|
<html>
<head>
<!-- OpenLayers core js -->
<script
src="http://www.openlayers.org/dev/OpenLayers.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- OpenStreetMap base layer js -->
<script
src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<!-- Google Maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function init() {
//set up projections
// World Geodetic System 1984 projection
var WGS84 = new OpenLayers.Projection("EPSG:4326");
// WGS84 Google Mercator projection
var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");
//Initialize the map
//creates a new openlayers map in the <div> html element id map
var map = new OpenLayers.Map ("map", {
controls:[
//allows the user pan ability
new OpenLayers.Control.Navigation(),
//displays the pan/zoom tools
new OpenLayers.Control.PanZoom(),
//displays a layer switcher
new OpenLayers.Control.LayerSwitcher(),
//displays the mouse position's coordinates in a <div> html element with
new OpenLayers.Control.MousePosition({
div:document.getElementById("coordinates")
})
],
projection: WGS84_google_mercator,
displayProjection: WGS84
} );
//base layers
var openstreetmap = new OpenLayers.Layer.OSM();
var google_maps = new OpenLayers.Layer.Google(
"Google Maps", {
numZoomLevels: 20
}
);
var google_satellite = new OpenLayers.Layer.Google(
"Google Satellite", {
type: google.maps.MapTypeId.SATELLITE,
numZoomLevels: 20
}
);
//wfs overlay
var wfs_layer = new OpenLayers.Layer.Vector("Blocks", {
strategies: [new OpenLayers.Strategy.BBOX()],
projection: WGS84,
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
url: "http://hazardmapping.com/geoserver/wfs",
featureNS : "http://www.opengeospatial.net/cite",
featureType: "testblocks",
})
});
map.addLayers([openstreetmap, google_maps, google_satellite, wfs_layer]);
//add markers
var couche_markers = new OpenLayers.Layer.Markers("Markers");
var dimension_icon = new OpenLayers.Size(24,24);
var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
var icon = new OpenLayers.Icon('10.jpg', size, offset);
lonlat=new OpenLayers.LonLat(2.44834,48.87729).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
);
var mon_marker=new OpenLayers.Marker(lonlat, icon);
markers.addMarker(mon_marker);
map.addLayer(markers);
// map extent
var mapextent = new OpenLayers.Bounds(-123.17341, 49.24343, -123.06183, 49.29899).transform(WGS84, map.getProjectionObject());
map.zoomToExtent(mapextent);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:500px; height:500px;"></div>
<div id="coordinates"></div>
</body>
</html> |
Partager