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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了与传单中的geoJson文件的字体真棒图标相关的知识,希望对你有一定的参考价值。

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

所有图标都显示在地图上的蓝色默认颜色中,所以我在这里有点迷失。另外在下一步我要做的是寻找一种方法来使用GeoJSON文件中的属性,通过使用真棒图标,根据GeoJSON文件中的值更改图标样式。例如"koncept = "Large"使用了很棒的图标,koncept = "Small"使用了很棒的图标。等等

<!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>

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

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

请看看这个小提琴: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不应该在head部分。将map 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);
});

以上是关于与传单中的geoJson文件的字体真棒图标的主要内容,如果未能解决你的问题,请参考以下文章

如何从地图外部与传单标记层进行交互?

传单真棒标记图标未显示在 R 中

垂直对齐字体真棒图标与 <li> 中的文本

字体真棒,输入类型“提交”

无法显示字体真棒图标?

单击然后检查时如何设置字体真棒检查图标[关闭]