与传单中的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: '© <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文件的字体真棒图标的主要内容，如果未能解决你的问题，请参考以下文章