Question

我在Openlayers 2中创建了一个代码，用于选择各种Google Maps主题（sat，road，terraing等）。最重要的是，我已经从Geoserver输入了一些自定义功能。我想添加一些drwing功能，我该怎么做..？这是我的代码：PS我知道不是很好，但我现在正在努力。

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>OpenLayers map preview</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <!-- add here more css definition libraries-->

  <!-- Basic CSS definitions -->
  <style type="text/css">
    body {
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: small;
    }
    /* Toolbar styles */
    #toolbar {
      position: relative;
      padding-bottom: 0.5em;
      display: none;
    }
    /* The map and the location bar */
    #map {
      clear: both;
      position: relative;
      width: 1000px;
      height: 800px;
      border: 2px solid black;
    }
    #wrapper {
      width: 337px;
      height: 50px;
    }
    #location {
      float: right;
      font-family: Arial, Verdana, sans-serif;
      font-size: 12px;
      color: #483D8B;
      background-color: white;
    }
    #scale {
      float: left;
      font-family: Arial, Verdana, sans-serif;
      font-size: 12px;
      color: #483D8B;
      background-color: white;
    }
    #nodelist {
      font-family: Arial, Verdana, sans-serif;
      font-size: 14px;
      color: #000000;
      font-style: normal;
      background-color: white;
    }
  </style>
  <!-- Import OpenLayers, reduced, wms read only version -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js" type="text/javascript"></script>
  <!-- add here more js libraries -->

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9KCxuVLagy1WttatAuRS5kFhSEXAmrGI" type="text/javascript"></script>
  <script defer="defer" type="text/javascript">
    var map;
    var untiled;
    var tiled;
    var pureCoverage = false;
     // pink tile avoidance
    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
     // make OL compute scale according to WMS spec
    OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

    function init() {

      format = 'image/png';
      var bounds = new OpenLayers.Bounds(
        // modify parameters
        -11569688.90, -11530706.01,
        5514344.58, 5553327.46
      );
      var options = {
        controls: [],
        // maxExtent: bounds,
        //modify parameter
        scales: [100000, 250000, 500000, 1000000, 2000000, 4000000, 8000000],
        //modify parameter
        projection: "EPSG:900913",
        //setting zoom levels
        //numZoomLevels:15,
        units: 'm'

      };



      map = new OpenLayers.Map('map', options, {
        allOverlays: true
      });
      map.addControl(new OpenLayers.Control.LayerSwitcher());

      var gsat = new OpenLayers.Layer.Google(
        "Google Satellite", {
          type: google.maps.MapTypeId.SATELLITE,
          numZoomLevels: 22
        }
      );

      var gphy = new OpenLayers.Layer.Google(
        "Google Physical", {
          type: google.maps.MapTypeId.TERRAIN,
          visibility: false
        }
      );

      var gmap = new OpenLayers.Layer.Google(
        "Google Streets", // the default
        {
          numZoomLevels: 20,
          visibility: false
        }
      );

      var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid", {
          type: google.maps.MapTypeId.HYBRID,
          numZoomLevels: 22,
          visibility: false
        }
      );

      map.addLayers([gsat, gphy, gmap, ghyb]);


      /* var gphy = new OpenLayers.Layer.Google(
				"Google Satellite",
				{type: google.maps.MapTypeId.Satellite, sphericalMercator:true}
				);
				map.addLayer(gphy); */







      var streets = new OpenLayers.Layer.WMS(
        "vag_alla_ny", "http://localhost:8080/geoserver/wms", {
          layers: 'LundProject:vag_alla_ny',
          transparent: true
        }, {
          isBaseLayer: false,
          // numZoomLevels:15
          opacity: 0.5,
          visibility: true
        }
      );
      //add controls here
      map.addLayer(streets);
      map.zoomToMaxExtent();
      //end add controls

      map.zoomToExtent(bounds);




      //bugsites = new OpenLayers.Layer.WMS(
      //"bugsites",
      //"http://localhost:8080/geoserver/wms",
      //{
      //	layers: 'sf:bugsites',
      //	styles: 'capitals',
      //	transparent: true,
      //	format: format,
      //}
      //);
      //	map.addLayer(bugsites);








      //map.addControl(new OpenLayers.Control.LayerSwitcher());
      map.addControl(new OpenLayers.Control.PanZoomBar());
      map.addControl(new OpenLayers.Control.Navigation());

    }
  </script>
</head>

<body onload="init()">
  Map viewer using Geoserver and OpenLayers
  <br>
  <br>


  <div id="map">
  </div>
  <br>
  <div id="wrapper">
    <div id="location">Location</div>
    <br>
    <div id="scale">
    </div>
  </div>

  <br>
  <div id="nodelist">
  </div>
</body>

</html>

＆＃13;

OpenLayers 2

0 个答案: