외부 GeoJSON 레이어의 전단지 사용자 정의 마커

전단지를 처음 사용하고 사용자 정의 마커가있는 외부 geoJSON 피드의 스타일을 지정하려고합니다.외부 GeoJSON 레이어의 전단지 사용자 정의 마커

아래 코드에서 UOSensorsLayer에 추가하는 데 문제가 있습니다. 내 구현에 관해서는 공식 문서가 너무 명확하지 않습니다. 기본 전단지 파란색 마커를 사용하여 마커 만 표시 할 수 있습니다. 내 경우 다 나를 위해 완벽하게 작동 한 어떤

<html> 
<head> 
<title>Leaflet Map GeoJSON with Click Feature</title> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> 
<style> 
    #map { 
     width: 100%; 
     height: 100%; 
    } 
</style> 
</head> 
<body> 
<div id='map'></div> 
<script> 

var UOSensors = $.ajax({ 
    url:"http://uoweb1.ncl.ac.uk/api/v1/sensors.geojson?api_key=j5wze84qf82y23luzkboejai2tqcdiqtpmu5swbq46r6s1cqtc86zhkctkbxf6chx8lqrxficjqt00kvwioukj81av", 
    dataType: "json", 
    success: console.log("Urban Observatory Sensor data successfully loaded."), 
    error: function (xhr) { 
     alert(xhr.statusText) 
    } 
}) 
// Specify that this code should run once the data request is complete 
$.when(UOSensors).done(function() { 

var map = L.map('map'); 

cartodbAttribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'; 

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiYW5keXByb2N0b3IiLCJhIjoiY2o2amZqODVyMTdoMzJxcWJlbnpzaHJqMiJ9.tFlpAR14eZXbEzpDx03c5Q', { 
    attribution: cartodbAttribution 
}).addTo(map); 

var myIcon = L.icon({ 
    iconUrl: 'rain-marker.png', 
    iconSize: [32, 37], 
    iconAnchor: [16, 37], 
    popupAnchor: [0, -28] 
}); 

function WeatherFilter(feature, layer) { 
    if(feature.properties.type === "Weather") return true; 
} 

var UOSensorsLayer = L.geoJSON(UOSensors.responseJSON, {filter: WeatherFilter}) 
    .eachLayer(function (layer) { 
     layer.bindPopup(layer.feature.properties.name); 
}).addTo(map); 

map.setView({ lat: 54.96, lng: -1.61 }, 12); 

}); 
</script> 
</body> 
</html>

출처

2017-09-10 Andy Proctor

문제는 무엇입니까? 오류가 있습니까? – Carcigenicate

기본 전단지 파란색 마커를 사용하여 마커 만 표시 할 수 있습니다. –

은 이것이다 : ". 나는 문제가 아래의 코드에 UOSensorsLayer이를 추가하는 데있어"

var UOSensorsLayer = L.geoJSON(UOSensors.responseJSON), { 
    filter : [...], 
    pointToLayer: function (feature, latlng) { 
     // For each point we return a marker with settings we want 
     return L.marker(latlng, {icon: myIcon}).bindTooltip(tooltip).bindPopup(popup); 
    } 
}).addTo(map);

출처

2017-09-11 07:36:11 Baptiste

위와 같이 Uncaught SyntaxError가 발생했습니다 : pointToLayer 다음에 예기치 않은 토큰 기능이 생깁니다. function (feature, latlng) { –

코드에 토큰이 없습니다. 누락 된 토큰을 찾으려면 http://www.jslint.com/을 시도하거나 여기에 코드를 게시하고 제 기능이 제대로 작동하는지 알려주십시오 – Baptiste

외부 GeoJSON 레이어의 전단지 사용자 정의 마커

답변

관련 문제