传单Shapefile标记

Question

我有一个问题，加载传单shapefile在我的网页。shapefile被正确加载，但是标记没有形状文件中的颜色，并且shapefile的名称没有出现在层列表中，而是出现在单词shapefile中。它似乎读取了shapefile，但不是所有的信息。

var watercolor = L.tileLayer('http://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}', {});
var geo = L.geoJson({features: []}, {
        onEachFeature: function popUp(feature, layer) {
            var out = [];
            if (feature.properties) {
                for (var key in feature.properties) {
                    out.push(key + ": " + feature.properties[key]);
                }
                layer.bindPopup(out.join("<br />"));
            }
        }
    });

    var myMap = L.map('divMapID', {
        center: L.latLng(39.15097955985934, 9.019421210403138),//Valori prec: [39, 9],
        zoom: 10,
        minZoom: 3,

        layers: [watercolor, geo]

    });


    //data è un oggetto geoJson
    var base = 'testo.zip';
    shp(base).then(function (data) {
        geo.addData(data);
    });

    var baseMaps = {
        "BaseLayer": watercolor
    };
    var overlays = {
        "shapefile": geo
    };
    L.control.layers(baseMaps, overlays).addTo(myMap);

在下面的图像中，有一个示例说明了shapefile及其属性应该是什么样子：

​

​

在下面的图片中，这是我对其进行可视化的方式：

​

​

Answer 1

关于名称，您可以在这里为您想要的任何内容更改"shapefile“：

var overlays = {
    "shapefile": geo // change "shapefile" for "geo"
};

关于颜色，在创建图层时，必须使用自己的逻辑添加一个style函数：

var geo = L.geoJson({features: []}, {
    style: function style (feature) {
        // your logic for creating colors here,
        // for example, a random color for each entity
        var randomColor = '#' + Math.floor(Math.random() * 0xffffff)
        .toString(16)
        .padStart(6, '0')

        return {
            color: randomColor,
            // other style attributes, see documentation
        }
    },
    onEachFeature: function popUp(feature, layer) {
        var out = [];
        if (feature.properties) {
            for (var key in feature.properties) {
                out.push(key + ": " + feature.properties[key]);
            }
            layer.bindPopup(out.join("<br />"));
        }
    }
});

与传单文件的链接

编辑

因为您需要原始shapefile的样式和名称，正如您的评论所建议的那样。

对于名称，您需要自己处理(删除扩展，路径名称.)然后将结果作为层对象的键使用。像这样的事情可以是一个基本的开始

var name = base.split(".")[0]; // if base is the file name and can change

var overlays = {};
overlays[name] = geo // this way the name can be dynamic

关于样式，您用于解析shps的库上没有多少文档(假设它的史派杰，但是如果实现了它们，它应该在geojson输出中创建一个style条目。因此，我敢打赌，您需要实现样式函数如下：

function style (feature) {
     return feature.style;
}

全码

var watercolor = L.tileLayer('http://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}', {});
var geo = L.geoJson({features: []}, {
    style: function style (feature) { return feature.style },
    onEachFeature: function popUp(feature, layer) {
        var out = [];
        if (feature.properties) {
            for (var key in feature.properties) {
                out.push(key + ": " + feature.properties[key]);
            }
            layer.bindPopup(out.join("<br />"));
        }
    }
});

var myMap = L.map('divMapID', {
    center: L.latLng(39.15097955985934, 9.019421210403138), //Valori
    prec: [39, 9],
    zoom: 10,
    minZoom: 3,

    layers: [watercolor, geo]

});


//data è un oggetto geoJson
var base = 'testo.zip';
shp(base).then(function (data) {
    geo.addData(data);
});

var name = base.split('.')[0] // get the name of the file 
// you will need to improve this part 

var baseMaps = {
    "BaseLayer": watercolor
};
var overlays = {};
overlays[name] = geo; // add the layer with name as key

L.control.layers(baseMaps, overlays).addTo(myMap);

备注

我不知道现在测试它需要什么，可能是错的。