Создание настраиваемого элемента управления слоем в Leaflet

Я работал над картой-листовкой с рядом статических слоев, которые можно включать и выключать с помощью стандартного элемента управления слоями в листовке.

Недавно я пытался использовать метод 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; I guess I'm just not sure which variable to define globally in order to get the removeRecreation function to effectively operate when I call the function on click from the image that it's attached to. As shown in the following code: A live version can be found at: https://mywebspace.wisc.edu/axler/SLRE_Deep_Map/index2.html 
</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>`

javascript leaflet mapping dom-events
person user1270657    schedule 19.06.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Когда вы выполняете «var map», вы фактически объявляете локальную переменную (относительно функции, которую вы передаете в window.onload), поэтому функция removeRecreation ее не видит. Чтобы исправить это, просто переместите «var map» наверх (перед определением removeRecreation).

person Mourner    schedule 22.06.2012