Jquery Slider UI，用于在基于不透明度的OpenLayers中显示覆盖层

Jquery Slider UI for displaying Overlay Layer in OpenLayers based on Opacity

本文关键字：OpenLayers 显示 覆盖 不透明度 UI Slider 用于 Jquery      更新时间：2023-09-26

这似乎是一个重复的问题，因为我已经经历了很多已经可用的问题，但作为Openlayers的新手，我无法获得，我应该如何使用jquery滑块设置我的Openlayers，我可以定位它，但它不起作用。

我有OSM的baske地图，覆盖层是.png，我想检查不透明度，这样我也可以检查基层。

如果可能的话，有人可以指导。

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Urban Atlas</title>
  <link type= text/css rel = stylesheet href="index_style.css" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
  <script src='http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false' type='text/javascript'></script>
  <script type= "text/javascript" src="main_functions.js"></script>
  <script> 
 defaultLatCenter = 23;
 defaultLonCenter = 77;
 defaultZoom = 5;
 proj4326 = new OpenLayers.Projection("EPSG:4326");
 proj900913 = new OpenLayers.Projection("EPSG:900913");
 init = function() {
   gphy = new OpenLayers.Layer.Google("Google Physical", {
     type: google.maps.MapTypeId.TERRAIN
     });
   osm = new OpenLayers.Layer.OSM("openstreetmap");
   map = new OpenLayers.Map("map");
   map.addControl(new OpenLayers.Control.LayerSwitcher());
   map.addLayers([gphy, osm]);
   map.setCenter(new OpenLayers.LonLat(defaultLonCenter, defaultLatCenter).transform(proj4326, map.getProjectionObject()), defaultZoom);

   bounds = new OpenLayers.Bounds();
   bounds.extend(new OpenLayers.LonLat(76.8027, 28.9642));
   bounds.extend(new OpenLayers.LonLat(77.5936, 28.1847));
   bounds.transform(proj4326, map.getProjectionObject());
   radar_overlay = new OpenLayers.Layer.Image('1992_delhi', '1992.png', bounds, new OpenLayers.Size(2706, 2669), {
     'isBaseLayer': false,
     'alwaysInRange': true
   });
   map.addLayer(radar_overlay);
   radar_overlay.setZIndex(150);
   radar_overlay.setOpacity(0.7);
 };
function gotodelhi(){
 // map extent
 var extent = new OpenLayers.Bounds(76.8027, 28.9642, 77.5936, 28.1847).transform(proj4326, proj900913);
map.zoomToExtent(extent);
}
function gotomumbai(){
 // map extent
 var extent = new OpenLayers.Bounds(72.778333, 19.449444, 73.175278, 18.857222).transform(proj4326, proj900913);
map.zoomToExtent(extent);
}
function gotobangalore(){
 // map extent
 var extent = new OpenLayers.Bounds(77.401389, 13.139167, 77.853333, 12.769722).transform(proj4326, proj900913);
map.zoomToExtent(extent);
}
</script>
  <style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
   <script>
  $(function() {
    $( "#slider-vertical" ).slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 100,
      value: 60,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
  });
  </script>
</head>
<body onload="init()">
<div id="header" style= "width: 100%;height:20%;">
<h2>Urban Atlas</h2>
</div>
<div id="map" style= "width:80%;height:70%;float:right;">
</div>
<div id="accordion" style="width:20%">
 <h3 id= "Bangalore" onclick=gotobangalore()>Bangalore</h3>
 <div>
    <p>
  Bangalore is city of gardens
    </p>
  </div>
  <h3 id="setDelhi" onclick=gotodelhi()> delhi </h3>
  <div>
    <p>
  Content For delhi
    </p>
  </div>
  <h3 id="setMumbai" onclick=gotomumbai()>mumbai</h3>
  <div>
    <p>
  Content for mumbai
    </p>
  </div>
</div>
<div id="slider-vertical" style="height:200px;float:right"></div>
</body>
</html>

尝试删除setZIndex()行。

代码似乎是正确的。如果不起作用，请尝试创建一个jsfiddle示例，以便我们可以帮助您。

此外，您可以在OpenLayers Cookbook上找到示例代码示例：http://acanimal.github.io/Openlayers-Cookbook/

请参见"第02章创建图像层示例"。

PS：此外，这个区块上还有一个新的孩子，OpenLayers3，它使用了一个完全不同的API。你可以在The Book of OpenLayers3上找到帮助(https://leanpub.com/thebookofopenlayers3)。

相关文章：