与传单中的geoJson文件的字体真棒图标

时间:2017-12-31 12:21:55

标签: javascript leaflet font-awesome

我是Leaflet和Javascript的新手,并试图用信息点做一张地图。使用传单时,尝试应用令人敬畏的图标而不是默认的蓝色。我已经尝试过各种各样的变体,最新的如下。它似乎根本不适合我。

地图上的所有图标都以蓝色默认颜色显示,所以我在这里有点迷失。 另外在下一步我要做的是寻找一种方法来使用GeoJSON文件中的属性,通过使用真棒图标,根据GeoJSON文件中的值更改图标样式。例如var dateArray = { "31-12-2017": [{ "time": "14:00" }, { "time": "17:15" }], "30-12-2017": [{ "time": "13:00" }, { "time": "12:15" }] } 使用了很棒的图标,"koncept = "Large"使用了很棒的图标。等

koncept = "Small"

有些更改但仍然没有AwesomeMarkers,只有地图上的蓝色默认值...

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

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Leaflet test</title>

 <link rel="stylesheet" type="text/css" href="css/leaflet.css">
 <link rel="stylesheet" type="text/css" href="css/mapstyle.css">
 <link rel="stylesheet" type="text/css" href="css/leaflet.awesome-markers.css"> 

  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/leaflet.js"></script>
  <script type="text/javascript" src="js/leaflet.ajax.min.js"></script>
  <script type="text/javascript" src="js/leaflet.awesome-markers.min.js"></script>
  <script src="js/spin.js"></script>
  <script src="js/leaflet.spin.min.js"></script>
  <script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>

  <script type="text/javascript" src="dip.geojson"></script>

<body>

    <div id="mapid"></div>
<script type="text/javascript">

var map = L.map('mapid').setView([59.5, 14.5], 7);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',

}).addTo(map);

//test if awesome icon works... and it works...

L.marker([59.5,14.621303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);

//This part below does not work with awesome markers, it returns to the default blue markers

var dip = new L.geoJson.ajax(["dip.geojson"], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);

</script> 
</head>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

请看一下这个小提琴:http://jsfiddle.net/VPzu4/92/。 检查外部来源:不仅包括leaflet.awesome-markers,还包括 bootstrap.min.css font-awesome.css 。我想你的代码错过了 - 将它们包含在你的脚本中。

您的代码中也有一些错误。这是错的:

<head>
   //...
<div id="mapid"></div> // map div in head section
   //...
</head>
<body>
</div> // left div closing tag
</body>

你的地图div不应该在头部。将地图div声明从头到尾移动:

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

此外,请确保此页面可以访问您包含的源(库和jsons)。在浏览器检查工具中检查它。也许您在控制台中看到了更多错误?

修改

参考你的评论 - 让你的代码和数据的jsfiddle不是'疯狂',它对你有帮助。我并没有说你添加了所有的数据 - 只是做一个简短的例子,对于那些希望帮助你的人来说很容易重现......

无论如何,现在我看到你没有字体真棒的问题但是处理geojson 。因此,在研究其他示例数据(这里是USGS地震日常数据)时,您可以看到如何使用fontawesome为json设置样式:

http://jsfiddle.net/VPzu4/1559/

你可以使用jquery抓住geojson - 注意外部源 - 并根据特征量数据添加条件:

$.getJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) {

  geoLayer = L.geoJson(json, {
    onEachFeature: function(feature, layer) {
      var popupText = "<b>Magnitude:</b> " + feature.properties.mag +
        "<br><b>Location:</b> " + feature.properties.place +
        "<br><a href='" + feature.properties.url + "'>More info</a>";
      layer.bindPopup(popupText, {
        closeButton: true,
        offset: L.point(0, -20)
      });
      layer.on('click', function() {
        layer.openPopup();
      });
    },

    pointToLayer: function(feature, latlng) {
    var mag = feature.properties.mag;
    var marker;
    if (mag >= 4.0) {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'cog', prefix: 'glyphicon',markerColor: 'cadetblue'}) }); 
      } else if (mag >= 3.0) {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'glyphicon',markerColor: 'black'}) });
      } else if (mag >= 2.0) {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'spinner', markerColor: 'red', prefix: 'fa', spin:true}) });
      } else {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) });
      }
    return marker;
    }
  }).addTo(map);
});