Создать маркер на основе местоположения с CSV и SVG в Here Maps - PullRequest
Новая
       6

Создать маркер на основе местоположения с CSV и SVG в Here Maps

0 голосов
/ 30 августа 2018

В настоящее время я пытаюсь создать маркеры на карте, используя файл CSV и указатель местоположения в формате SVG.

Я использую пример кода из Here Maps, чтобы иметь надежную отправную точку, но мне кажется, что еще есть над чем поработать. Я сохранил оба файла CSV и SVG на своем компьютере, поэтому я попытался вставить локальный путь URL в мой код. Файл CSV называется "han_parks". Сейчас у него всего 4 столбца: «Имя», «Лат», «Lng», «Тип». Я запутался, потому что код запрашивает строки вместо столбцов, но это сработало на примере на сайте Here Maps. Итак, вот основа кода для моего CSV-файла и геолокации: 

let provider = new H.datalens.RawDataProvider({
dataUrl: "file:///C:\Users\oem\Desktop\MyName\WIXCode\HereMaps\CSV\han_parks.csv" + Date.now(),
dataToFeatures: (data) => {
    let parsed = helpers.parseCSV(data);
    let features = [];
    let row = null;
    let feature = null;

    for (let i = 1, l = parsed.length; i < l; i++) {
        row = parsed[i];
        feature = {
            'type': 'Feature',
            'geometry': {
                'type': 'Point',
                'coordinates': [Number(row[2]), Number(row[1])]
            },
            'properties': {
                'Name': row[0],
                'Type':  row[3]
            }
        };
        features.push(feature);
    }
    return features;
},
featuresToRows: (features) => {
    let rows = [], feature;
    for (let i = 0, l = features.length; i < l; i++) {
        feature = features[i];
        rows.push([{
                lat: feature.geometry.coordinates[1],
                lng: feature.geometry.coordinates[0]
            },
            feature.properties.Name,
            feature.properties.Typ
        ]);
    }
    return rows;
}
});
let layer = new H.datalens.ObjectLayer(provider, {
    pixelRatio: window.devicePixelRatio,

    rowToMapObject: function (data) {
        let coordinates = data[0];
        let Name = data[1];
        return new H.map.Marker(coordinates);
    },

    rowToStyle: function (data, zoom) {
        if (!venueIcons[data[4]]) { return }
        let icon = H.datalens.ObjectLayer.createIcon(venueIcons[data[4]],
            {size: 30 * pixelRatio});
        return {icon};
    }
});

Маркер SVG доставляет мне еще больше хлопот. Код для SVG, используемый для примера Here Maps, действительно обширный, и я не знаю, правильно ли я это делаю. Поскольку он также хранится локально, я попробовал тот же подход, что и раньше, с файлом CSV. Имя маркера: location_pin. 

 (function () {
'use strict';

let venueIcons = {};

venueIcons['Park'] = `<svg xmlns:xlink="http:///C:\Users\oem\Desktop\MyName\WIXCode\HereMaps\location_pin.svg" viewBox="0 0 34.58 36.33" width="30" height="30"></svg>`;

Object.assign(window, {venueIcons});

}());

У меня есть несколько идей, почему это не сработает, но я на самом деле новичок в кодировании. Я ожидаю несколько ошибок в коде. Этот проект очень много значит для меня, поэтому я с нетерпением жду вашей помощи и участия!

Если вы хотите получить представление о примере Here Maps, вот ссылка:

Здесь Карты Геовизуализация

С уважением,

Дауд

...