本文で定義されたフォーム ボタンを使用して gpx トレースを表示し、div を使用してマップ上に配置する OpenLayers のベクター レイヤーの可視性を切り替えようとしています。組み込みのコントロールはデフォルトで非表示になっているため使用したくありません。チェックボックスでさらに情報を追加したいと考えています。
<input name="slow" type="checkbox" class="newstext"
id="slow" onClick="slowtrace();" checked>
関数「slowtrace」はヘッド スクリプトにあります。「lgpx2」は、トレースを示すベクター レイヤーです。
function slowtrace()
{if (lgpx2.getVisibility() == true)
{lgpx2.setVisibility(false);}
else
{lgpx2.setVisibility(true);}}
ただし、エラーが発生して機能しません-参照エラー:変数が見つかりません:slowtrace。
2 つの gpx トレースを示す 2 つのベクター レイヤーがあります。私は、「lgpx」という名前の他のものではなく、スロートレース「lgpx2」と、「スローラン」に対応するマップ上のdivの上部のチェックボックスでこれを試してきました。
ページ全体のコードは次のとおりです。
<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);
}
<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>