TurfJS Добавить точку на карту MapBox

Новичок в Turf JS и рассматривал возможность интеграции через MapBox API. Используя карту MapBox.Outdoors по умолчанию и следуя некоторым примерам документации TurfJS http://turfjs.org/docs/#point, но, похоже, моя точка не отображается поверх карты. Любые предложения приветствуются, ошибка, кажется, находится в моей строке кода в отношении FeatureLayer.setGeoJSON, но я не могу понять это. Если я оставлю активной последнюю строку, карта не загрузится, если я закомментирую ее, карта загрузится, но булавка не появится?

<BODY>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFya2d1ayIsImEiOiJjaXNsd2VhMG8wMDdrMzNybmticDJhdnZsIn0.KXcvejg6QplSsAlj8aimjA';

var point = turf.point([35.463453, -97.514914], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
.featureLayer.setGeoJSON(point); // If I comment this line out the map loads with no pin. If I leave this line active the map doesn't load at all?
</SCRIPT>
</BODY>

javascript mapbox geojson turfjs
person MarkGuk    schedule 05.09.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, проблема в том, что вы пытаетесь добавить geojson на карту без предварительного преобразования. Вам нужно преобразовать geojson в формат, который может использовать листовка. Вот пример, который должен работать для вас. Он также привяжет всплывающее окно к маркеру точки, который будет отображать свойства для вас. Часть стиля может быть выполнена либо статически (как для всех свойств, кроме заголовка), чтобы она применялась ко всем точкам в наборе признаков, либо динамически, используя свойства каждого элемента (как это делается с заголовком).

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);

var featureCollection = {"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"title": "OKC Thunder"}, "geometry": {"type": "Point", "coordinates": [35.463453, -97.514914]}}]};

L.geoJson(featureCollection, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(""+feature.properties+"<br />");
    },
    style: function (feature) {
        style = {
            "title": feature.properties.title,
            "description": "100 W Reno Ave, Oklahoma City",
            "marker-color": "#6BC65F",
            "marker-size": "large",
            "marker-symbol": "basketball"
        };
        return style
    }
}).addTo(map)
person Dylan Hamilton    schedule 23.11.2016

arrow_upward
0
arrow_downward

Я думаю, вам следует использовать функцию установки маркеров, которую вам предоставляет mapbox. Таким образом, вы можете не создавать векторный слой и просто использовать функцию mapbox-marker. Это задокументировано здесь: https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/

Здесь также есть описание того, как создать простой маркер: https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/

Для предоставленного вами кода вы можете просто пропустить создание объекта geojson через turf.point и просто использовать это:

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker([-97.514914, 35.463453], {
  icon: L.mapbox.marker.icon({
    "title": "OKC Thunder",
    "description": "100 W Reno Ave, Oklahoma City",
    "marker-color": "#6BC65F",
    "marker-size": "large",
    "marker-symbol": "basketball"
  })
}).addTo(map);

Или, если вы хотите использовать geojson с turf.point, вы также можете сделать это следующим образом:

var point = turf.point([-97.514914, 35.463453], {
  "title": "OKC Thunder",
  "description": "100 W Reno Ave, Oklahoma City",
  "marker-color": "#6BC65F",
  "marker-size": "large",
  "marker-symbol": "basketball"
});

var coords = point.geometry.coordinates;

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
  L.marker(coords, {
    icon: L.mapbox.marker.icon(point.properties)
  }).addTo(map);

Также убедитесь, что вам нужно перевернуть координаты вашей точки с [35.463453, -97.514914] на [-97.514914, 35.463453], чтобы соответствовать спецификации geojson, которая является «проекционными координатами, долготой, широтой для географических координат»

http://geojson.org/geojson-spec.html#id2

person Andi-lo    schedule 01.12.2016