Question

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

我正在创建一个Web地图，该地图将从Geoserver中作为WFS提取这些点并显示这些点。

我希望这些点与标准Leaflet蓝色标记不同。单击标记时，我还需要在地图上弹出包含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");
        }
    });

Answer 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");
        }
    });

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

1 个答案: