Как я могу изменить стиль маркера с помощью Leaflet / JavaScript - PullRequest
Новая
       38

Как я могу изменить стиль маркера с помощью Leaflet / JavaScript

0 голосов
/ 09 октября 2019

У меня есть функция jquery, которая извлекает данные GeoJSON с веб-страницы (созданной с использованием сервера GeoDjango. Я хочу иметь возможность изменить стиль / цвет добавляемого маркера. Однако, когда яиспользуйте приведенный ниже код, он по-прежнему показывает стандартный синий маркер. Впервые javascript и leaflet, поэтому я, вероятно, делаю что-то глупое.

В конце концов, я хочу изменить стиль /цвет в зависимости от того, начинается ли станция буквой "A" или "B", как показано в файле geoJSON ниже.

index.html

<!DOCTYPE html>

<html>

{% load static %}
{% load leaflet_tags %}

    <head>

        <title>stations</title>

        {% leaflet_js %}
        {% leaflet_css %}
        <script src="{% static 'dist/leaflet.ajax.min.js' %}"></script>
        <script src="{% static 'dist/leaflet.ajax.js' %}" ></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>

    <body>

        <div id="stations" style="height: 450px; width: 100%;"></div> <!--Sets size of map-->
        <!--{% leaflet_map "cnlnet" %}-->

        <script>
            var map = L.map('stations', {
                center: [42.4444, -76.5019], zoom: 9.5, 
            });

            <!--Added OSM base layer below-->
            var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            maxZoom: 20,
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    });


            osm.addTo(map);

            var stationsUrl = 'stations.data';

            $.getJSON(stationsUrl, function (data) {
                points = L.geoJson(data, {
                    style: function(feature, latlng){
                        return L.marker(latlng, {
                            icon: L.icon({
                                iconUrl: "static/img/red.png",
                                iconSize: [28,32],
                                iconAnchor: [12,28],
                                popupAnchor: [0,-25]
                            })
                        });
                    }
                }).addTo(map);
            });

        </script>

        {% leaflet_map "stations" callback="window.map_init_basic" %}

    </body>

</html>

формат geoJSON 

{"type": "FeatureCollection", "crs": {"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [{"type": "Feature", "properties": {"STATION": "A12", "NET": "AA", "LAT": 42.1234, "LON": -76.1234, "ALT": 2363.1, "pk": "1"}, "geometry": {"type": "Point", "coordinates": [-76.1234, 42.1234]}}, {"type": "Feature", "properties": {"STATION": "B13", "NET": "AA", "LAT": 42.5678, "LON": -76.5678, "ALT": 213.4, "pk": "2"}, "geometry": {"type": "Point", "coordinates": [-76.5678, 42.5678]}}]}
...