Я читал все предыдущие примеры по настройке пользовательских значков на основе данных json, но вычеркнул.Я продолжаю получать ошибки, что значок, который я определяю, не определен.Но когда я запускаю console.log, я вижу, что то, на что я указываю, определено.
Моя цель - использовать другой icon.png в зависимости от того, какая классификация для каждой точки карты.
Если я сделаю console.log (маркеры [i] ["Классификация"]), я вижу, что такое классификация.
, но {icon: icons [markers [i] ["Classification"]]} результаты не определены.
Я пробовал разные варианты объявления значков в блоке значков var, как предлагалось в большинстве решений, которые я нашел.Но это никуда меня не привело.
Указание непосредственно на значки ["Source"] приводит к отображению значка Source для всего.Я просто не могу заставить работать значки [маркеры [i] ["Классификация"]].
html:
<!DOCTYPE html>
<html>
<head>
<title>Sample Locations</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js'></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
crossorigin=""></script>
<body>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
<style>
#basemaps-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 400;
background: white;
padding: 10px;
}
#basemaps {
margin-bottom: 5px;
}
</style>
<div id="map"></div>
<div id="basemaps-wrapper" class="leaflet-bar">
<select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">
<option value="Topographic">Topographic</option>
<option value="Streets">Streets</option>
<option value="NationalGeographic">National Geographic</option>
<option value="Oceans">Oceans</option>
<option value="Imagery">Imagery</option>
<option value="ImageryClarity" selected>Imagery (Clarity)</option>
<option value="ImageryFirefly">Imagery (Firefly)</option>
<option value="Gray">Gray</option>
<option value="DarkGray">Dark Gray</option>
<option value="ShadedRelief">Shaded Relief</option>
<option value="Physical">Physical</option>
</select>
</div>
</head>
<script type='text/javascript' src='JS/maptest.js'></script>
</body>
</html>
jquery:
var map = L.map( 'map', {
center: [10.0, 5.0],
minZoom: 1,
zoom: 1
});
var layer = L.esri.basemapLayer('ImageryClarity').addTo(map);
var layerLabels = L.esri.basemapLayer('ImageryLabels');
map.addLayer(layerLabels);
function setBasemap(basemap) {
if (layer) {
map.removeLayer(layer);
}
layer = L.esri.basemapLayer(basemap);
map.addLayer(layer);
if (layerLabels) {
map.removeLayer(layerLabels);
}
if (basemap === 'ShadedRelief'
|| basemap === 'Oceans'
|| basemap === 'Gray'
|| basemap === 'DarkGray'
|| basemap === 'Terrain'
) {
layerLabels = L.esri.basemapLayer(basemap + 'Labels');
map.addLayer(layerLabels);
} else if (basemap.includes('Imagery')) {
layerLabels = L.esri.basemapLayer('ImageryLabels');
map.addLayer(layerLabels);
}
}
function changeBasemap(basemaps){
var basemap = basemaps.value;
setBasemap(basemap);
}
var myURL = jQuery( 'script[src$="JS/maptest.js"]' ).attr( 'src' ).replace( 'JS/maptest.js', '' );
var markers;
jQuery.ajax({
url: myURL + "map_json.php",
type: "JSON",
async: false,
success: function(data){
markers = jQuery.parseJSON(data);
jQuery(markers).each(function( index, element ) {
});
}
});
var MapIcon = L.Icon.extend({
options: {
iconSize: [50, 60],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
}
});
var Source = new MapIcon({iconUrl: myURL + 'images/source.png'}),
Blank = new MapIcon({iconUrl: myURL + 'images/background.png'}),
Unknown = new MapIcon({iconUrl: myURL + 'images/unknown.png'}),
Background = new MapIcon({iconUrl: myURL + 'images/background.png'});
var icons = {
Source: Source,
Blank: Blank,
Unknown: Unknown,
Background: Background};
var markerClusters = L.markerClusterGroup();
for ( var i = 0; i < markers.length; ++i )
{
var popup = '<br/><b>Sample Name:</b> '+ markers[i]["Sample Name"] +
'<br/><b>Location Description:</b> ' + markers[i]["Location Description"] +
'<br/><b>Date Taken:</b> ' + markers[i]["Date"] +
'<br/><b>Classification:</b> ' + markers[i]["Classification"]
var m = L.marker( [markers[i].Lattitude, markers[i].Longitude], {icon: icons[markers[i]["Classification"]]})
.bindPopup( popup );
console.log(markers[i]["Classification"]);
markerClusters.addLayer( m );
}
map.addLayer( markerClusters );
map.flyTo([39.8333333, -98.585522], 4);
basicJSON формат:
[ { "Sample Name": "EquipmentBlank", "Date": "2017-02-14", "Lattitude": "40.3126", "Longitude": "-94.0277", "Location Description": "Place 2\/17", "Classification": "Blank\r" }, { "Sample Name": "B0517", "Date": "2017-05-23", "Lattitude": "39.1421", "Longitude": "-95.4795", "Location Description": "Place 5\/17", "Classification": "Unknown\r" }]