带有自定义符号和弹出窗口的传单 WFS 点图答案

【问题标题】：Leaflet WFS point map with custom symbols and popups带有自定义符号和弹出窗口的传单 WFS 点图
【发布时间】：2020-10-28 21:11:12
【问题描述】：

我有一个包含兴趣点的数据集。这存储在 Geoserver 上。

我正在创建一个网络地图，它将这些点作为 WFS 从 Geoserver 拉入并显示这些点。

我希望这些点是与标准传单蓝色标记不同的图标。我还需要地图在单击标记时弹出 POI 的详细信息。

我的问题是标记没有从蓝色标记改变。弹出窗口有效并且标记位于正确的位置，但标记符号不是我设计的 .png 图像。

这是我的代码：

//Create the Points of interest WFS Layer

    //Style for POI Icon
    var POIIcon = L.icon({
        iconUrl: 'Images/defult.png', **//This is correct file path**
        iconSize: [20,20]
    });

    var owsrootUrl = 'http://geodev.co.za:8080/geoserver/SoapToAlaska/ows';
    var defaultParameters = {
        service : 'WFS',
        version : '1.0.0',
        request : 'GetFeature',
        typeName : 'SoapToAlaska:PointsOfInterestWithPitlatrines',
        outputFormat : 'text/javascript',
        format_options : 'callback:getJson',
        SrsName : 'EPSG:4326'
    };
    var parameters = L.Util.extend(defaultParameters);
    var URL = owsrootUrl + L.Util.getParamString(parameters);

    var PointsOfInterest = null;
    var ajax = $.ajax({
        url : URL,
        dataType : 'jsonp',
        jsonpCallback : 'getJson',
        success : function (response) {
            PointsOfInterest = L.geoJson(response, {
                style: function (feature) {
                    return {icon: POIIcon}; **//This is the part that doesn't seem to be working**
                },                  
                onEachFeature: function (feature, layer) {
                    popupOptions = {maxWidth: 200};
                    layer.bindPopup("Type: " + feature.properties.type, popupOptions);
                }
            })

        //Load WaterSources and PointsOfInterest WFS layers from ajax into the layer control
            LC.addOverlay(PointsOfInterest,"PointsOfInterest");
        }
    });

【问题讨论】：

标签： leaflet

【解决方案1】：

将图标直接添加到标记而不是style：

 var ajax = $.ajax({
        url : URL,
        dataType : 'jsonp',
        jsonpCallback : 'getJson',
        success : function (response) {
            PointsOfInterest = L.geoJson(response, {               
                onEachFeature: function (feature, layer) {
                    popupOptions = {maxWidth: 200};
                    layer.bindPopup("Type: " + feature.properties.type, popupOptions);
                    layer.setIcon(POIIcon);
                }
            })

        //Load WaterSources and PointsOfInterest WFS layers from ajax into the layer control
            LC.addOverlay(PointsOfInterest,"PointsOfInterest");
        }
    });

【讨论】：