OpenStreetMap_Example_-_Ortho_Refresh_WMS-WMTS.html

A web page with OpenLayer code demonstrating the WMTS connection - Bob Bruce, 2013-08-02 02:35 PM

Download (5.29 KB)

 
1 
<!DOCTYPE HTML>
2 
<html>
3 
  <head>
4 
    <title>OpenLayers OpenStreetMap With Manitoba Ortho Refresh</title>
5 
    <style type="text/css">
6 
      html, body, #basicMap {
7 
          width: 100%;
8 
          height: 100%;
9 
          margin: 0;
10 
      }
11 
    </style>
12 
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
13 
    <script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js"></script>
14 
    <script>
15 
      // declare some variables for use in all of the functions
16 
      var map;
17 
      var OSM;
18 
      var MAN_Ortho_wms;
19 
      var MAN_Ortho_wmts;
20
21 
      function CheckNSetOpacity(theBox,theLayer){
22 
              theOpacity = parseFloat(theBox.value);
23 
              if (theOpacity < 0.0 || theOpacity > 1.0) {
24 
                      alertString = "Illegal value for the opacity: "+theBox.value+" the value MUST BE BETWEEN 0.0 AND 1.0";
25 
                      alert(alertString);
26 
                      theBox.value = 0.65;
27 
              }
28 
              else if (theLayer == "WMS") { MAN_Ortho_wms.setOpacity(theOpacity); } // set opacity of Ortho WMS layer
29 
              else if (theLayer == "WMTS") { MAN_Ortho_wmts.setOpacity(theOpacity); } // set opacity of Ortho WMTS layer
30 
      }
31
32 
      function init() {
33 
            map = new OpenLayers.Map({
34 
                div: "basicMap",
35 
                projection: "EPSG:3857"
36 
            });
37 
        OSM         = new OpenLayers.Layer.OSM(
38 
                "Open Street Map"
39 
        );
40
41 
                // Now create the Ortho Refresh WMS Layer
42 
                MAN_Ortho_wms = new OpenLayers.Layer.WMS(
43 
                        "Ortho Refresh 2010 WMS",
44 
"http://nis.cubewerx.com/cubewerx/cubeserv?CONFIG=OIM_MB_-_Orthophoto&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&CRS=EPSG:3857",
45 
                        { layers: "OIM_MB_-_Orthophoto_store.MB__20-__20Orthophoto",
46 
                          transparent: "true",
47 
                          format: "image/png"
48 
                         },
49 
                         { isBaseLayer: false }
50 
                );
51 
                MAN_Ortho_wms.setOpacity(.65);
52
53 
                // Now add the WMTS Tile Set Setup
54 
        var matrixIds = new Array(23);
55 
        for (var i=0; i<23; ++i) {
56 
                matrixIds[i] = String(i);
57 
        }
58 
                // Now create the Ortho Refresh WMTS Layer
59 
            var MAN_Ortho_wmts = new OpenLayers.Layer.WMTS({
60 
                name: "Ortho Refresh 2010 WMTS",
61 
                url: "http://nis.cubewerx.com/cubewerx/cubeserv?CONFIG=OIM_MB_-_Orthophoto-WMTS",
62 
                layer: "OIM_MB_-_Orthophoto_store.MB__20-__20Orthophoto",
63 
                matrixSet: "smerc",
64 
                matrixIds: matrixIds,
65 
                format: "image/png",
66 
                style: "default",
67 
                opacity: 0.7,
68 
                isBaseLayer: false
69 
            });
70
71 
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
72 
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
73 
        // Now set the position to the corner of Portage and Main
74 
        var position       = new OpenLayers.LonLat(262.861540,49.895498).transform( fromProjection, toProjection);
75 
        var zoom           = 15;
76
77 
        map.addLayers([MAN_Ortho_wmts, MAN_Ortho_wms, OSM]);
78 
            map.addControl(new OpenLayers.Control.LayerSwitcher());
79 
            map.addControl(new OpenLayers.Control.MousePosition({}));
80 
            map.addControl(new OpenLayers.Control.PanZoomBar());
81 
            map.addControl(new OpenLayers.Control.Scale());
82 
            map.addControl(new OpenLayers.Control.ScaleLine());
83 
//            map.addControl(new OpenLayers.Control.Measure({}));
84 
/*        map.addControl(new OpenLayers.Control.Measure(
85 
                    OpenLayers.Handler.Path, {
86 
                        persist: true,
87 
                        handlerOptions: {
88 
                            layerOptions: {
89 
                                renderers: renderer,
90 
                                styleMap: styleMap
91 
                            }
92 
                        }
93 
                    }
94 
        )
95 
*/
96 
        map.setCenter(position, zoom );
97 
      }
98 
    </script>
99 
  </head>
100 
  <body onload="init();">
101 
    <font face="Verdana" size="5" color="#0099FF">GeoManitoba Orthophotography
102 
        WMS Services - served by Cubewerx cloud server at Blackbridge</font><font color="#0000FF">
103 
        </font><hr>
104 
    <div id="basicMap" style="width: 1425px; height: 721px"></div>
105 
          <hr>
106 
        <font face="Verdana" color="#0099FF"><font size="2">Drawn with
107 
        </font>
108 
        <a href="http://www.openlayers.org/"><font color="#0099FF"><font size="2">OpenLayers</font></font></a>
109 
        <a href="http://docs.openlayers.org/"><font color="#0099FF" size="2">JavaScript
110 
        Mapping Library</font></a>
111 
        <font size="2">With</font> <a href="http://wiki.openstreetmap.org/wiki/Main_Page">
112 
        <font color="#0099FF" size="2">OpenStreetMap</font></a> <font size="2">Base Layer</font></font><p align="right">
113 
        <form method="POST" action="--WEBBOT-SELF--" style="text-align: right">
114 
                <!--webbot bot="SaveResults" U-File="D:\OpenLayers Stuff\_private\form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
115 
                <font face="Verdana" size="2">Set Opacity of the <i><b>WMS OrthoPhotography
116 
                Layer</b></i> To View The Streets (0.0 &gt; Opacity &lt;
117 
        1.0) </font>
118 
                <input type="text" name="WMSOpacity" value="0.65" size="10" onblur="CheckNSetOpacity(this,'WMS')"><br>
119 
                <font face="Verdana" size="2">Set Opacity of the <i><b>WMTS OrthoPhotography Layer (Tiles)</b></i> To View The Streets (0.0 &gt; Opacity &lt; 1.0)  </font>
120 
                <input type="text" name="WMTSOpacity" value="0.65" size="10" onblur="CheckNSetOpacity(this,'WMTS')">&nbsp;
121 
        </form></p>
122 
  </body>
123 
</html>