Управление проекциями в пользовательских Highmaps - PullRequest
0 голосов
/ 28 мая 2018

Я генерирую html-файлы из python (в основном с использованием модуля геопандаса), содержащие объекты highmaps.

(Код слишком длинный, чтобы поместиться здесь в stackoverflow, поскольку геоджон включен в html-файлы: пожалуйста, непроверьте включенный код, но вместо этого обратитесь к скриптам).

Данные карты:

  • один геоджон (напрямую сгенерированный из геопанд с использованием .to_json)() метод), загружается в Департаменты серия как карта серия .Он напрямую сохраняется в html-файле с использованием параметра mapData .Оба свойства crs и hc-transform устанавливаются вручную с помощью python.

  • один массив точек (поля beeing lon , lat и name ), сгенерированные вручную с помощью python;загружается в городах серии как mappoint серии .

Обе серии предварительно конвертированы в одной геодезической системес использованием геопанд (который, я думаю, где-то использует pyproj4 dll).

Я получил геодезические системы в виде строк proj4 из пространственной привязки , то есть:

  • EPSG 2154 (официальная французская система): "+ proj = lcc + lat_1 = 49 + lat_2 = 44 + lat_0 = 46.5 + lon_0 = 3 + x_0 = 700000 + y_0 = 6600000 + ellps = GRS80 + towgs84 = 0, 0,0,0,0,0,0 + ед. = M + no_defs "

  • WGS84 (= epsg 4326):" + proj = longlat +ellps = WGS84 + datum = WGS84 + no_defs "

Когда я преобразовываю все данные в WGS 84, я получаю правильные результаты (хотя карта выглядит искаженной для французских пользователей): см. эта скрипка .

Когда я конвертирую все данные в 2154 году, я получаю серьезные ошибки (как вы можете видеть, города отображаются с ошибками, что также включает некоторую инверсию широты);см. эту скрипку .

Когда я сохраняю все данные в WGS 84 и просто устанавливаю hc-transform на epsg2154, У меня все еще странные результаты , хотя я думаю, что этоэто правильный путь, на который ссылаются в документе (я не уверен на 100% в этом, так как это карты, созданные с использованием отдаленных данных геоджон, и я не привык программировать в javascript) ...

Я также попытался использовать свойства x / y для mappoint serie (вместо lon / lat), но это не улучшило результат (хотя я проверил данные в QGis и эти координаты на 100% правильные).

Как мне это сделать?

Пример кода (пожалуйста, обратитесь к скрипту для примера работы с geojson):

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
    Highcharts.mapChart("container", {
        title: {
            text: 'Testmap Highmaps Hauts-de-France'
        },                   

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series: [
            {
                name: 'areas',
                type: 'map',
                mapData: {'type': 'FeatureCollection', 'features': [...], 'hc-transform': {'default': {'crs': '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'}}, 'crs': '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'},
            },
            {
                name: 'cities',
                type: 'mappoint',
                data: [{'lon': 727759.0000000142, 'lat': 6884382.999997055, 'name': 'Chateau-Thierry'}, ...],
                color: 'black',
                marker: {
                    radius: 2
                },
                dataLabels: {
                    align: 'left',
                    verticalAlign: 'middle'
                },
                animation: false,
                tooltip: {
                    pointFormat: '{point.name}'
                }
            },
        ]
    });
</script>
</body>
</html>

1 Ответ

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

Хорошо, так что это неправильное решение: я до сих пор не понимаю, как это может решить проблему, но это работает ... [ РЕДАКТИРОВАТЬ : это действительно правильное решение для временисм. РЕДАКТИРОВАТЬ в конце поста]

То, что я сделал, было:

  • используйте строку proj4 для ESPG2154, как было сказано ранее: "+ proj = lcc + lat_1= 49 + lat_2 = 44 + lat_0 = 46,5 + lon_0 = 3 + x_0 = 700000 + y_0 = 6600000 + ellps = GRS80 + towgs84 = 0,0,0,0,0,0,0 + ед. = M + no_defs "

  • установить mapData с координатами xy в системе EPSG2154: [761574.9000000217, 6918670.299997976], [761648.2000000217, 6918469.799997974], ...

  • установитьhc-transform / crs в mapData, как было сказано ранее: 'hc-transform': {'default': {'crs': '+ proj = lcc + lat_1 = 49 + lat_2 = 44 + lat_0 = 46.5 + lon_0 = 3 +x_0 = 700000 + y_0 = 6600000 + ellps = GRS80 + towgs84 = 0,0,0,0,0,0,0 + ед. = m + no_defs '}},' crs ':' + proj = lcc + lat_1 = 49+ lat_2 = 44 + lat_0 = 46,5 + lon_0 = 3 + x_0 = 700000 + y_0 = 6600000 + ellps = GRS80 + towgs84 = 0,0, 0,0,0,0,0 + ед. = M + no_defs '

  • установить сопоставленные данные, используя x / y вместо lat / lon, без какого-либо' hc-преобразования 'или crs, , но с инвертированными координатами y : данные: [{'x': 727759.0000000142, 'y': -6884382.999997055, 'name': 'Chateau-Thierry'}, ...]

Обратите внимание, что:

  • Я инвертировал координаты y для сопоставленных данных, и что это не правильные координаты в каком-либо смысле;
  • Я также установил для yAxis значение reversed: true, которое не должно быть значением по умолчанию, как указано в документе API.Но на самом деле это ничего не меняет, если вы удалите эту строку или нет: каким-то образом использование нескольких рядов, включая один mapData, похоже, меняет свойство по умолчанию (по крайней мере, при использовании proj4 в этой конфигурации).На самом деле, если вы установите его в обратное: ложное, у вас не будет правильных результатов, даже если вы не инвертируете координату у, как указано ранее.

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

См. полный функциональный пример в этой скрипке .

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
    Highcharts.mapChart("container", {
        title: {
            text: 'Testmap Highmaps Hauts-de-France'
        },                   

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        yAxis: {
            reversed: true
        },

        series: [
            {
                name: 'areas',
                type: 'map',
                mapData: {'type': 'FeatureCollection', 'features': [{'id': '1', 'type': 'Feature', 'properties': {'DEP': '02'}, 'geometry': {'type': 'Polygon', 'coordinates': [[[761574.9000000217, 6918670.299997976], [761648.2000000217, 6918469.799997974], ..., [699287.6999999998, 6901218.199997955]]]}}], 'hc-transform': {'default': {'crs': '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'}}, 'crs': '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'},
            },
            {
                name: 'cities',
                type: 'mappoint',
                data: [{'x': 727759.0000000142, 'y': -6884382.999997055, 'name': 'Chateau-Thierry'}, ...],
                color: 'black',
                marker: {
                    radius: 2
                },
                dataLabels: {
                    align: 'left',
                    verticalAlign: 'middle'
                },
                animation: false,
                tooltip: {
                    pointFormat: '{point.name}'
                }
            },
        ]
    });
</script>
</body>
</html>

РЕДАКТИРОВАТЬ

Так что это действительно сложная проблема ... Я связывался с highsoft и, похоже, нужно учитывать несколько фактов: - сначала, yAxis.reverse = true IS поведение по умолчанию, независимо от того, что в настоящее время указано в документе;- во-вторых, некоторый внутренний алгоритм в mapData исправляет это поведение, потому что предполагается, что этот тип слоя GeoJSON;- в-третьих, это не относится к слоям mappoint aw и mapbubble.

Обратите внимание, что если вы установите yAxis.reverse = false, у вас будет плохое время.Может показаться, что слои mappoint правильно наложены на карту mapData (если я правильно понял, это как-то связано с диапазоном y слоя mappoint, который будет более или менее похож на диапазон области карты.

Highsoft открыл вопрос на эту тему.

Мораль : мое решение на самом деле было хорошим (по крайней мере, до тех пор, пока они не решат, что делать с этим "вопросом")Что касается этой версии Highmaps, всегда работайте с yAxis.reverse = true и имейте в виду, что эта команда не влияет на mapDatas, переданные как GeoJSON.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...