Checkbox 使用div中的form复选框控制OpenLayers中向量层的可见性
我试图在OpenLayers中切换矢量层的可见性，该矢量层使用正文中定义的表单按钮显示gpx跟踪，并使用div定位在地图上。我不想使用内置控件，因为默认情况下它是隐藏的，我想通过复选框添加更多信息Checkbox 使用div中的form复选框控制OpenLayers中向量层的可见性,checkbox,openlayers,visibility,layer,Checkbox,Openlayers,Visibility,Layer,我试图在OpenLayers中切换矢量层的可见性，该矢量层使用正文中定义的表单按钮显示gpx跟踪，并使用div定位在地图上。我不想使用内置控件，因为默认情况下它是隐藏的，我想通过复选框添加更多信息 <input name="slow" type="checkbox" class="newstext" id="slow" onClick="slowtrace();" checked> 但是它不起作用，给出了错误-引用错误：找不到变量：slowtrace 有两个矢量层显示两个gpx轨
<input name="slow" type="checkbox" class="newstext"
id="slow" onClick="slowtrace();" checked>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
<link rel="stylesheet" href="http://www.carnethy.com/carn.css" type="text/css">
<title>Wed training 20th March 2013 - golf courses</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var lat
var lon
var zoom
var latstart=55.92900
var lonstart=-3.19300
var map;
function init() {
map = new OpenLayers.Map ("map", {controls:[
new OpenLayers.Control.Navigation({zoomWheelEnabled : false}),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,- 20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
//slow run stylemap
var gpxStyles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: "1", // sized according to type attribute
label: "${name}",
labelAlign: "rb",
labelOutlineColor: "white",
labelOutlineWidth: 3,
fontSize: 15,
fontFamily: "Arial",
fontColor: "brown",
labelYOffset: 10,
fillColor: "black",
strokeColor: "red",
strokeWidth: 2,
strokeOpacity: 0.8
}),
});
//fast run stylemap
var gpxStyles2 = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: "1", // sized according to type attribute
label: "${name}",
labelAlign: "rb",
labelOutlineColor: "white",
labelOutlineWidth: 3,
fontSize: 15,
fontFamily: "Arial",
fontColor: "blue",
labelYOffset: 10,
fillColor: "black",
strokeColor: "blue",
strokeWidth: 2,
strokeOpacity: 0.8,
}),
});
// Add the Layer with the GPX Track fast run - ignore this bit
var lgpx = new OpenLayers.Layer.Vector("wed training fast", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://www.carnethy.com/maps/wed_training/2013/gpx/20-Mar-13-fast.gpx",
format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
}),
styleMap: gpxStyles,
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);
// fit map to bounds of window and add start pin
lgpx.events.register("loadend", lgpx, function() {
this.map.zoomToExtent(this.getDataExtent());
var startPoint = this.features[0].geometry.components[0];
layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
});
// Add the Layer with the GPX Track slow run
// This is the layer I am practising on
var lgpx2 = new OpenLayers.Layer.Vector("wed training slow", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://www.carnethy.com/maps/wed_training/2013/gpx/20-Mar-13-slow.gpx",
format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
}),
styleMap: gpxStyles2,
projection: new OpenLayers.Projection("EPSG:4326"),
});
map.addLayer(lgpx2);
// fit map to bounds of window and add start pin
lgpx2.events.register("loadend", lgpx2, function() {
this.map.zoomToExtent(this.getDataExtent());
var startPoint = this.features[0].geometry.components[0];
layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
});
// the non functional function
function slowtrace()
{if (lgpx2.getVisibility() == true)
{lgpx2.setVisibility(false);}
else
{lgpx2.setVisibility(true);}}
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.carnethy.com/maps/mapping%20info/small_red_pin.png',size,offset);
var icon2 = new OpenLayers.Icon('http://www.carnethy.com/maps/mapping%20info/small_blue_pin.png',size,offset);
}
我已经使用jquery实现了这一点。它在命名的div中查看复选框是否已取消选中/切换。我根据一个例子改编了这段代码，所以我不知道为什么它能工作，或者为什么以前的版本不能工作。如果有人能启发我？有没有一种不用jquery的方法 解决方案： 添加jquery src的链接， 从复选框中取出onclick事件
<input name="slow" type="checkbox" class="newstext" id="slow" checked>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.mapposn {
display: block;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
}
#key {
height: 40px;
width: 360px;
position: absolute;
left: 50%;
margin-left: -150px;
font-family: Verdana, Geneva, sans-serif;
font-size: small;
background-color: #FFF;
top: 25px;
padding-left: 10px;
padding-top: 3px;
border: 1px solid #666;
}
#blue {
width: 85px;
display: inline;
left: 105px;
font-size: 2px;
position: absolute;
background-color: #36F;
margin-top: 7px;
}
#red {
width: 85px;
display: inline;
left: 105px;
font-size: 2px;
position: absolute;
background-color: #C30;
margin-top: 7px;
}
-->
</style>
</head>
<body onLoad="init();">
<div class="mapposn" id="map"></div>
<div id="key"><span class="plaintext" style="color:#36F">
<input name="slow" type="checkbox" class="newstext" id="slow" onClick="slowtrace();" checked>
Slow run 6.82 miles (10.98k) </span>
<div id="blue"> </div><br>
<span class="plaintext" style="color:#C30">
<input name="Fast" type="checkbox" class="newstext" id="fast" checked>
Fast run 7.93 miles (12.8k)</span>
<div id="red"> </div>
</div>
</body>
</html>
<input name="slow" type="checkbox" class="newstext" id="slow" checked>
$(document).ready(function(){
function slowtrace()
{if (lgpx2.getVisibility() == true)
{lgpx2.setVisibility(false);}
else
{lgpx2.setVisibility(true);}}
function fasttrace()
{if (lgpx.getVisibility() == true)
{lgpx.setVisibility(false);}
else
{lgpx.setVisibility(true);}}
$("#slow").on("change", slowtrace);
$("#fast").on("change", fasttrace);
});