1
나는 전단지에 약 2,200 개의 데이터 포인트를 매핑하는 방법을 알아 내려고 노력해 왔지만, 나는 단지 JS의 세계를 탐구했고 새로운 개념이 많이 있습니다. 나는 geojson 파일에서 데이터를 가져 와서 맵에 표시하는 방법에 대한 예제로 this excellent tutorial을 사용 해왔다. 그러나, 나는 그것이 내 자신의 데이터로 작동하도록 할 수없고, 내가 뭘 잘못하고 있는지 모릅니다. 수많은 다른 호스팅 소스를 사용하고 테스트 데이터와 자습서 데이터 (geojson 파일)를 사용하여 문제를 일으키는 호스트 또는 geojson 파일인지 여부를 해결하려고했습니다. 나는 그것이 아직도 확실하지 않다.전단지 및 geojson AJAX 호출
다음은 내 코드 (테스트 데이터와 자습서의 아이콘 파일 사용)입니다. 누구든지 내지도에 데이터가로드되지 않는 이유를 알려 주시면 감사하겠습니다. 내가 시도 할 수있는 것에 대한 제안조차 도움이 될 것입니다. 내 유일한 코딩의 배경은 R입니다. 그래서 내가 분명히 했어야 할 부분이있을 것입니다.
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://raw.githubusercontent.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#map{ height: 900px;width: 650px }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([-41.291, -185.229], 6);
var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
maxZoom: 20,
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson",function(data){
var ratIcon = L.icon({
iconUrl: 'http://maptimeboston.github.io/leaflet-intro/rat.png',
iconSize: [60,50]
});
L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: ratIcon});
marker.bindPopup(feature.properties.Location + '<br/>' + feature.properties.OPEN_DT);
return marker;
}
}).addTo(map);
});
</script>
</body>
</html>
누구든지이 책을 읽어 주셔서 감사합니다!