这似乎是重复的问题，因为我已经解决了许多已经可用的问题，但作为 Openlayers 的新手，我无法得到，我应该如何使用 jquery slider 设置我的 Openlayers，我能够定位可以，但是不起作用。
我有 OSM 的 baske map ，覆盖层是 .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&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/
参见“第二章-创建图像层示例”。
PS:此外，还有一个新的东西，OpenLayers3，它使用完全不同的 API。您可以在 The Book of OpenLayers3 ( https://leanpub.com/thebookofopenlayers3 ) 中找到帮助。
关于javascript - Jquery Slider UI 用于基于不透明度在 OpenLayers 中显示覆盖层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26779227/