javascript - Mapbox geoJSON 格式化

Question

我正在尝试使用 MapBox 制作交互式 map 。

基本思想是，人们将鼠标悬停在某些区域上，它们会亮起，并且事件将触发显示一些内容。

我使用 Mapbox 设置了 map ，然后首先获取了一些点的数据

到这里创建一个 shapefile - http://www.gadm.org/country

然后到这里将该文件转换为 json 文件 - http://www.mapshaper.org/

然后我通过 Mapbox 将数据加载到 map 中，这是我的结果! (代码如下)- http://dev.touch-akl.com/nzmap/

正如您所看到的，由于我下载的数据，它几乎是该国家/地区的完美轨迹，唯一的问题是悬停时所有区域似乎都是一个对象。

        $.ajax({
            url: '/nzmap/js/nzmap.json',
            dataType: 'json',
            success: function load(data) {

                // set up the regions based on the JSON data and then call the styles and the hovers
                var regions = L.geoJson(data, {
                    style: getStyle,
                    onEachFeature: onEachFeature
                }).addTo(map);

                // selects used to style the regionsLayer
                function getStyle(feature) {
                    return {
                        weight: 2,
                        opacity: 0.1,
                        color: 'black',
                        fillOpacity: 0.7,
                        fillColor: 'red'
                    };
                }

                // combine the mouse in and mouse out?
                function onEachFeature(feature, layer) {
                    layer.on({
                        mousemove: mousemove,
                        mouseout: mouseout
                    });
                }

                // mouse over change the layer styles
                function mousemove(e) {
                    var layer = e.target;

                    // highlight feature
                    layer.setStyle({
                        weight: 3,
                        opacity: 0.3,
                        fillOpacity: 0.9
                    });

                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }
                }

                //mouse out reset the style
                function mouseout(e) {
                    regions.resetStyle(e.target);
                }

            }
        });

这里是 json 文件的链接，如果这有助于理解正在发生的事情 - http://dev.touch-akl.com/nzmap//js/nzmap.json

看起来有些多边形是“多重多边形”，有些是独立的。我设法仅使用一个区域创建了 map 的新版本，它看起来像这样 - http://dev.touch-akl.com/nzmap2/

我执行此操作的函数大致相同，只是我已分割该区域并使用仅包含该区域坐标的 json 文件。

这是该示例的 JSON 文件 - http://dev.touch-akl.com/nzmap2/js/waikato.json

所以我陷入困境的是... 有没有一种方法可以格式化原始 json 文件，使每个区域保持其自己的单独悬停对象？如果是这样，我该如何改变设置 map 的方式以获得所需的结果？

看起来我可以为每个区域创建一个单独的 json 文件，就像我在第二个示例中所做的那样，但这似乎不是正确的方法，已经被困了好几天，所以我们将不胜感激!

Answer 1

这是因为您使用的不是正确的 GeoJSON，至少不是 L.GeoJSON 期望的 GeoJSON。您需要的是 GeoJSON FeatureCollection。集合看起来像这样:

[{
    "type": "Feature",
    "properties": {
        "foo": "bar"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {
        "bar": "foo"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}]

如您所见，FeatureCollection 包含各个要素，这些要素可以是 Point、MultiPoint、LineString、MultiLineString、Polygon 或多Polygon 类型。如果您使用FeatureCollection L.GeoJSON 将按您的预期工作。看看 FeatureCollection 的引用和 L.GeoJSON 。有关使用它们的教程/示例可以在 here 找到。 .