Я работал над картой буклета с несколькими статическими слоями, которые можно отключить и использовать с помощью стандартного слоя управления лифтом.Создание пользовательского контроля уровня в листовке
В последнее время я пытаюсь использовать метод onclick для запуска функций для добавления и удаления слоев с карты, когда пользователь нажимает на одно из изображений в (статической) легенде. Я попробовал несколько разных способов заставить это работать, и я думаю, что это связано с порядком загрузки элементов javascript и веб-страниц (но я довольно новичок в этом, поэтому я могу ошибаться).
Во всяком случае, без вставки в слишком много моего кода - я загружаю все сценарии в заголовке документа как такового:
<html>
<head>
<title>St. Louis River Estuary Deep Map</title>
<link rel="stylesheet" href="css/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
<script type="text/javascript" src="js/leafletcopy.js"></script>
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script type= "text/javascript" src="js/googlemaps.js"></script>
<script type="text/javascript"src='js/wax.leaf.min.js'></script>
<script type='text/javascript' src='js/htmlswitch.js'></script>
<link rel='stylesheet' href='css/webmapstylesheet1.css'/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.ie.css" />
<![endif]-->
<script type="text/javascript" src="js/hearding.js"></script>
<script type="text/javascript" src="js/boundaries.js"></script>
<script type="text/javascript" src="js/bath1.js"></script>
<script type="text/javascript" src="js/bath2.js"></script>
<script type="text/javascript" src="js/bath3.js"></script>
<script type="text/javascript" src="js/monitoring.js"></script>
function removeRecreation() {
map.removeLayer(recreationLayer);
};
window.onload = function() {
//create global map variable
var map;
var recreationLayer;
Я предполагаю, что я» m просто не уверен, какую переменную определять глобально, чтобы функция removeRecreation эффективно работала, когда я вызываю функцию на клик с изображения, к которому она привязана. Как показано в следующем коде:
концертную версию можно найти по адресу:
https://mywebspace.wisc.edu/axler/SLRE_Deep_Map/index2.html
</script>
</head>
<body>
<div id ="divHeader">
<h1>St. Louis River Deep Map</h1>
<div class="navHome"><a href="http://stlre.pebbleonline.com/">return home</a></div>
</div>
<div id="legend">
<h2>Legend:</h2>
<hr>
<p class ="legend"><img onclick = "removeRecreation();" src ="images/recreation1.png">Exploring</p>`
Заранее спасибо!