使用Leaflet UTFGrid的Javascript事件处理程序

时间:2017-02-23 17:17:28

标签: javascript leaflet utfgrids

我有一种感觉这是一个显而易见的问题,但它让我感到困惑,我不太清楚如何调试它。可能只是我的javascript无知。

我在这里使用传单utfgrid脚本:https://github.com/danzel/Leaflet.utfgrid

我主要只是关注示例脚本,我无法让事件处理程序工作。在这一点上,我得到了我认为是一个非常基本的脚本。这是代码 - 我希望得到utfGrid.on('click')函数来登录到控制台,但它不会。我很感激任何反馈意见。

<head>
    <meta charset="UTF-8">
    <title>Leaflet Test</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="http://danzel.github.io/Leaflet.utfgrid/src/leaflet.utfgrid.js"></script>
    <style>
        #map{ width: auto; height: 800px; }
    </style>

</head>
<body>
    Map Data Test
    <div id ="hover"></div>
    <div id="map"></div>

    <script>

      // load a tile layer
        var basemap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: 'CartoDB.', maxZoom: 18, minZoom: 2});
        var cmamap = L.tileLayer('http://localhost:8080/tiles/{z}/{x}/{y}.png');
        var utfGrid = new L.UtfGrid('http://localhost:8080/grid/{z}/{x}/{y}.json');

        //event data

        utfGrid.on('click', function (e) {
            console.log('clicked');
        });

        //Create our map with just the base TileLayer

        var map = L.map('map')
            .setView([38, -94], 5)
            .addLayer(basemap);

        //Set up  the base map and interactive stuff
        var cmaLayers = L.layerGroup([
            cmamap,
            utfGrid
        ]).addTo(map);


    </script>

</body>

1 个答案:

答案 0 :(得分:2)

所以这看起来像传单插件和leaflet.utfgrid之间的版本问题。当我使用旧版本的传单时 - 它可以工作。