传单JS + Leaflet.Deflate - 自定义图标

更改默认标记图标在我以前的帖子“Leaflet JS - changing esri shape into marker on certain zoom level ”我能解决，我曾与leaflet JS库的问题，改变多边形到标记图标当达到一定的缩放级别时，会出现。传单JS + Leaflet.Deflate - 自定义图标

我被'Ivan Sanchez'建议使用'Leaflet.Deflate'插件，这个工程就像一个魅力，所以现在各种形状都在一定的缩放级别之后被转换成标记，但是现在我正在努力改变默认传单标记图标到定制标记图标，所以我现在的问题是：

是否有可能改变默认标记图标到自定义标记图标，而全光照 g'Leaflet.ShapeFile'和'Leaflet.Deflate'插件，以及最好的方法是做什么？

我想做一个JSFiddle，但我不JSFiddle允许我附上包含形状文件的zipfile，所以我会发布代码，我已经得到这么远，下面这里，感谢您的帮助，建议和支持：

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset='utf-8' /> 
    <title>v4</title> 
    <link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css" /> 
    <!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> <![endif]--> 
<link rel="stylesheet" type="text/css" href="lib/leaflet/L.Control.Sidebar.css" /> 
<style> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0; } 
    #map { height: 100% } 
</style> 
</head> 

<body> 
    <div id="map"></div> 

    <script src="lib/jquery/jquery-3.1.1.min.js"></script> 
    <script src="lib/leaflet/leaflet.js"></script> 
    <script src="lib/leaflet/catiline.js"></script> 
    <script src="lib/leaflet/leaflet.shpfile.js"></script> 
    <script src="lib/leaflet/shp.js"></script> 
    <script src="lib/leaflet/L.Control.Sidebar.js"></script> 
    <script src="lib/leaflet/L.Deflate.js"></script> 

    <script> 
     // init map 
     var m = L.map('map').setView([52.472833, 1.749609], 15); 

     // clicking on the map will hide the sidebar plugin. 
     m.on('click', function() { 
      sidebar.hide(); 
     }); 

     // init Deflate plugin 
     L.Deflate({ minSize: 10 }).addTo(m); 

     // Init side bar control 
     var sidebar = L.control.sidebar('sidebar', { closeButton: true, position: 'right' }); 
     m.addControl(sidebar); 

     // Init esri shape file via leaflet.shapefile, shp.js plugin 
     var businessProperties = new L.Shapefile('data/businessshapes.zip', { style: propertyStyle, onEachFeature: propertyOnEachFeature }).addTo(m); 

     // create on-click Feature 
     function propertyOnEachFeature(feature, layer) { 
      layer.on({ 
       mouseover: highlightFeature, 
       mouseout: resetHighlight, 
       click: function populate() { 
        sidebar.toggle(); 
        document.getElementById('pinfoHeader').innerHTML = "<h2>" + feature.properties.Building + " - Detailed Information</h2><br />"; 
        document.getElementById('pTitle').innerHTML = "Name: " + feature.properties.Building 
        document.getElementById('pDetails').innerHTML = "SHAPE_Leng: " + feature.properties.SHAPE_Leng + "<br/ >SHAPE_Area: " + feature.properties.SHAPE_Area 
       }, highlightFeature, zoomToFeature 
      }); 
     } 

     // style the properties style 
     function propertyStyle(feature) { 
      return { 
       fillColor: getPropertyColor(feature.properties.BusType), 
       weight: 2, 
       opacity: 1, 
       color: 'white', 
       dashArray: 3, 
       fillOpacity: 0.7 
      } 
     } 

     // set color per property according to the data table of the Esri Shape file. 
     function getPropertyColor(propStatus) { 
      if (propStatus == 'TypeA') { 
       return 'red'; 
      } else if (propStatus == 'TypeB') { 
       return 'green'; 
      } else { 
       return 'yellow'; 
      } 
     } 

     // set the highlighted color for polygon 
     function highlightFeature(e) { 
      var layer = e.target; 
      layer.setStyle({ 
       weight: 2, 
       color: 'black', 
       fillColor: 'white', 
       fillOpacity: 0.2 
      }); 

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

     // reset the highlighted color for polygon after mouse leave polygon 
     function resetHighlight(e) { 
      businessProperties.resetStyle(e.target); 
     } 


     //Extend the Default marker class to overwrite the leaflet.deflate marker icon??? 
     var TestIcon = L.Icon.Default.extend({ 
      options: { 
       iconUrl: 'assets/images/markers/business.png' 
      } 
     }); 
     var testIcon = new TestIcon(); 

     businessProperties.addTo(m); 

     // Init base maps for switch 
     var grayscale = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { id: 'MapID', attribution: 'Map maintained by <a href="http://www.demo.com">Demo LTD</a>, &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>,' }).addTo(m); 
     var streets = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { id: 'MapID', attribution: 'Map maintained by <a href="http://www.demo.com">Demo LTD</a>, &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>,' }); 

     var baseMaps = { 
      "Streets": streets, 
      "Grayscale": grayscale 
     }; 

     // Init overlay map switch 
     var overlayMaps = { 
      "Bussines Properties": businessProperties 
     }; 

     // Add switches to map control 
     L.control.layers(baseMaps, overlayMaps).addTo(m); 
    </script> 
</body> 
</html>

来源

2016-11-08 user6450463