Ticket #2557 (new feature)
Opened 3 years ago
Issue overlaying wms with Bing Maps
| Reported by: | couchman | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 2.13 Release |
| Component: | general | Version: | 2.8 |
| Keywords: | Cc: | ||
| State: |
Description
Want to overlay business data over wms. However, as you zoom out the business data does not align correctly with the bing map data. Data is re-projected as WGS 84 from a mxd.
Our code is-
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>BCC OpenLayers Bing Example</title> <style type="text/css">
#map {
width: 800px; height: 475px; border: 1px solid black;
}
</style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src=" http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script> <script src=" http://------/openlayers/OpenLayers.js"></script>
<script src=" http://------/openlayers/proj4js/lib/proj4js-compressed.js"> </script>
<script>
var map;
var lon = 404170;
var lat = 286340;
function init(){
var options = {
"units": "m",
"maxExtent": new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), //"restrictedExtent": new OpenLayers.Bounds(-2.06, 52.35, 52.62, 1.70),
"scales": [250000,100000,75000,50000,25000,
10000,7500,5000,2500,1250,500],
"controls": [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(), // numDigits, decimal places to which coordinates // will be displayed new OpenLayers.Control.MousePosition({'numDigits': 4}) ]
};
map = new OpenLayers.Map("map", options);
//transform the LLPG BNG point to LatLong //enable BNG projection within OpenLayers - uses proj4js library Proj4js.defsEPSG:27700? = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs"; var srcProj = new OpenLayers.Projection("EPSG:27700"); var destProj = new OpenLayers.Projection("EPSG:4326"); var point = new OpenLayers.LonLat(lon, lat).transform(srcProj, destProj);
//bing layers
var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {
type: VEMapStyle.Shaded
}); var hybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", {
type: VEMapStyle.Hybrid
}); var aerial = new OpenLayers.Layer.VirtualEarth("Aerial", {
type: VEMapStyle.Aerial
});
//ArcGIS layers var wms = new OpenLayers.Layer.WMS("Map",
" http://-------/arcgis/services/-------/MapServer/WMSServer?", { 'layers': '16', 'format': 'image/png', 'transparent': 'true'});
map.addLayers([wms, shaded, hybrid, aerial]);
//map.setCenter(new OpenLayers.LonLat(-1.9054, 52.4799), 15);
map.setCenter(point, 15);
}
</script>
</head> <body onload="init()">
<div id="panel" />
<div id="map" />
</body>
</html>
