个人中心
gpt4 book ai didi

javascript - 使用传单创建标记层

转载 作者：行者123 更新时间：2023-11-27 23:38:24 25 4
gpt4 key购买 nike

我正在尝试使用 Leaflet 绘制一张带有一些标记的纽约 map 。我的代码基于本教程:

http://bl.ocks.org/ragnarheidar/a711faa1a94be4dae48f

这是我当前的代码:

<!-- http://data.nycprepared.org/dataset/nyc-community-districts/resource/f990d0e5-2917-4902-a50a-1f6a74cc612b -->

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>NY Noise Map</title>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
            <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
            <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        </head>
        <body>
            <div id="map"></div>
        </body>
        <script type="text/javascript">
            var width = 1280,
                height = 960,
                active = d3.select(null);

            /* Map definition */
            // Set map wrapper size
            d3.select('#map')
              .style('width', width + 'px')
              .style('height', height + 'px');

            // Create Leftlet map and center in the desired position
            var map = L.map('map').setView([40.658528, -73.952551], 10);

            // Load a tile layer  
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
            { 
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
                maxZoom: 18, 
                minZoom: 10
            }).addTo(map);

            // Interaction
            var geojson;
            function style(feature) 
            {
                return {
                    fillColor: '#FFEDA0',
                    weight: 1,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7
                };
            }

            function highlightFeature(e) 
            {
                var layer = e.target;

                layer.setStyle({
                    weight: 3,
                    color: '#666',
                    dashArray: '',
                    fillOpacity: 0.7
                });

                if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                }
            }

            function resetHighlight(e) 
            {
                geojson.resetStyle(e.target);
            }

            function zoomToFeature(e) 
            {
                map.fitBounds(e.target.getBounds());
            }

            function onEachFeature(feature, layer) 
            {
                layer.on({
                    mouseover: highlightFeature,
                    mouseout: resetHighlight,
                    click: zoomToFeature
                });
            }

            // Info control

            // Load GeoJSON from an external file
            $.getJSON("Resources/community-districts-polygon.geojson", function(data)
            {
                // Add GeoJSON layer to the map once the file is loaded
                geojson = L.geoJson(data,  
                {
                    style: style,
                    onEachFeature: onEachFeature
                }).addTo(map);
            });

            /* 311 Data */
            //data URL variables
            var start_date = '2013-08-01'; //YYYY-MM-DD
            var end_date = '2013-08-08';   //YYYY-MM-DD
            var c_type = 'Noise';          // Complaint Type

            // Build the data URL
            var URL = "http://data.cityofnewyork.us/resource/erm2-nwe9.json"; // API Access Endpoint
                URL += "?";                                                   // A query parameter name is preceded by the question mark
                URL += "$where=";                                             // Filters to be applied
                URL += "(latitude IS NOT NULL)";                              // Only return records with coordinates
                URL += " AND ";
                URL += "(complaint_type='" + c_type + "')";                    // Desired complaint
                URL += " AND ";
                URL += "(created_date>='" + start_date + "') AND (created_date<='" + end_date + "')"; // Date range
                URL += "&$group=complaint_type,descriptor,latitude,longitude";                        // Fields to group by
                URL += "&$select=descriptor,latitude,longitude,complaint_type";                       // Fields to return
                URL = encodeURI(URL);                                                                 // Encode special characters such as spaces and quotes
                console.log(URL);                                                                       

            var noise_description = ["Air Condition/Ventilation Equipment", 
                                     "Alarms",
                                     "Banging/Pounding", 
                                     "Barking Dog", 
                                     "Car/Truck Horn", 
                                     "Car/Truck Music", 
                                     "Construction Equipment", 
                                     "Construction Before/After Hours", 
                                     "Engine Idling", 
                                     "Ice Cream Truck", 
                                     "Jack Hammering", 
                                     "Lawn Care Equipment",
                                     "Loud Music/Party",
                                     "Loud Talking",
                                     "Loud Television",
                                     "Manufacturing Noise",
                                     "Private Carting Noise"];

            //  Load GeoJSON from an external file
            $.getJSON(URL, function(data)
            {
                var markers = []
                var layers = []
                for (var i = 0; i < noise_description.length; i++) 
                {
                    markers[i] = [];
                }

                var all_markers = [];

                $.each(data, function(index, rec)
                {
                    var marker;
                    for (var i = 0; i < noise_description.length; i++) 
                    {
                        if (rec.descriptor.indexOf(noise_description[i]) > -1) 
                        {
                            console.log(rec.descriptor);
                            marker = L.marker([rec.latitude, rec.longitude]);
                            markers[i].push(marker); 
                            break;
                        }
                        all_markers.push(marker); 
                    }
                });

                // Create layer of all markers but do not add to map
                var all_layers = L.featureGroup(all_markers);       
                // Create specific layers of markers and add to map
                for (var i = 0; i < markers.length; i++) 
                {
                    layers[i] = L.featureGroup(markers[i]).addTo(map);;
                }
                map.fitBounds(all_layers.getBounds());

                // Create object containing all marker layers 
                var overlays = {}; 
                for (var i = 0; i < noise_description.length; i++) 
                {
                    overlay[noise_description[i]] = layers[i];
                }

                //add layer control using above object
                L.control.layers(null,overlays).addTo(map);
            });
        </script>
</html>

但是，除了 basemap 之外我什么也看不到。另外，我收到此错误(无法复制):

enter image description here

我想知道出了什么问题。

最佳答案

all_markers.push(marker) 位于条件 block 之外，您可以在其中将标记分配给 marker 变量，因此您推送一个 undefined 变量很多次。

L.featureGroup(all_markers) 不喜欢接收带有未定义键的数组，这会创建错误消息。

只需在 if 条件中移动第一条指令即可:

if (rec.descriptor.indexOf(noise_description[i]) > -1) {
    console.log(rec.descriptor);
    marker = L.marker([rec.latitude, rec.longitude]);
    markers[i].push(marker);
    all_markers.push(marker);
    break;
}

那么您在 overlay[noise_description[i]] 中出现了拼写错误:overlay 应该是 overlays。

演示:http://jsfiddle.net/ve2huzxw/55/

关于javascript - 使用传单创建标记层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33925201/

25 4 0
文章推荐： javascript - 将模型 bool 值发送到 js 函数会导致 onchange 函数引用
文章推荐： javascript - Applescript，单击带有 do JavaScript 的复选框
文章推荐： html - 外部定义的 SVG 标记和过滤器在 Chrome 中不起作用
文章推荐： c++ - 如何从 flatbuffers 中获取 union 结构的 void* 值反序列化的大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com