Question

我正在从包含highmaps对象的python（主要使用geopandas模块）生成html文件。

（由于geojson包含在html文件中，代码太长而无法放入stackoverflow中：请不要检查包含的代码，而是参考fiddles）。

地图数据是：

一个geojson（直接从geopandas生成，使用 .to_json（）方法），在 Departements 系列中加载为map serie。它使用mapData选项直接存储在html文件中。都 crs 和 hc-transform 属性是使用python手动设置的。
一个点数组（字段为 lon ， lat 和名称），手动使用python生成;它在 cities 系列中加载为mappoint serie。

使用geopandas（我认为在某处使用pyproj4 dll），这两个系列都可以在同一个测地系统中进行转换。

我将测地线系统作为来自spatialreference的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 + units = m + no_defs“
WGS84（= epsg 4326）：“+ proj = longlat + ellps = WGS84 + datum = WGS84 + no_defs”

当我转换WGS 84中的所有数据时，我得到了正确的结果（虽然地图看起来对于法国用户来说是模糊的）：见this fiddle。

当我转换2154中的所有数据时，我会遇到严重错误（正如您所看到的，城市显示不稳定，这似乎也包括一些纬度反转）;见this fiddle。

当我将所有数据保存在WGS 84中并将hc-transform设置为epsg2154 I still have strange results时，虽然我认为这是引用in the doc的正确方法（我不是100％肯定的那些，因为那些是使用遥远的geojson数据生成的地图，我不习惯用javascript编程）...

我也尝试使用mappoint系列的x / y属性（而不是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>

Answer 1

好的，所以这是一个很尴尬的解决方案：我仍然不知道如何解决该问题，但是它可以起作用... [ EDIT ：这确实是当前的正确解决方案蜂，请参阅文章末尾的编辑]

我所做的是：

将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 + units = m + no_defs“
在EPSG2154的系统中使用xy坐标设置mapData：[761574.9000000217，6918670.299997976]，[761648.2000000217，6918469.799997974]，...
如前所述在mapData上设置hc-transform / crs： 'hc-transform'：{'默认'：{'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'
使用x / y而不是lat / lon设置地图点数据，没有任何“ hc-transform”或crs，但y坐标倒置：数据：[{'x' ：727759.0000000142，'y'：-6884382.999997055，'name'：'Chateau-Thierry'}，...]

请注意：

对于地图点数据，我颠倒了y坐标，并且这些在任何意义上都不是正确的坐标；
我还将yAxis设置为reversed：true，这不应是API文档中所述的默认值。但是实际上，无论是否删除此行，它都不会改变任何东西：以某种方式，使用包括一个mapData的多个系列似乎正在更改默认属性（至少在此配置中使用proj4时）。实际上，如果您将其设置为reversed：false，即使您没有如前所述反转y坐标，也不会得到任何正确的结果。

我认为这是某种未记录的错误（我可能还是错了），我将尝试参考highcharts的工作人员...

请参见this fiddle中的完整功能示例。

<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设置为false，则可能会遇到麻烦。地图点图层似乎与您的mapData正确重叠（如果我正确理解，这与地图点图层的y范围或多或少与地图区域的y范围有关。

此主题的Highsoft has opened an issue。

道德：实际上，我的解决方案是一个好的解决方案（至少在他们决定如何处理此“问题”之前）。对于此版本的Highmap，请始终使用yAxis.reverse = true，并请注意，作为GeoJSON传递的mapData不受此命令的影响。

管理自定义Highmaps

1 个答案: