Как изменить цвета маркера geoJSON на листовке на основе идентификатора?

Question

Как изменить цвета маркера geoJSON на листовке на основе идентификатора?

1

Я просто хочу изменить маркер с geoJSON на моей брошюре на основе свойств идентификатора в марке geoJSON, я попробовал следовать учебнику на листе, а также у меня есть google, и все же я не могу найти заключение о том, как исправить мой код

Здесь мой полный код

<!DOCTYPE HTML>
<html>
<head>
	<title></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-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet CSS -->
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 1366px; height: 720px;"></div>
<script>
var mymap = L.map('mapid').setView([-2.729070029832631,107.64713287353514], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/hadicns/cjji5fjq61nru2rmiheweks5d/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGFkaWNucyIsImEiOiJjampoem5kbWIycjYzM3FudjA2cDJhZmN6In0.cYnG3YB44jr4yitE_HFSgg', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery  <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}
var geojsonFeature = {"type":"FeatureCollection",
 "features":[
   {"type":"Feature",
    "properties":{"siteid":"TJN012",
                  "sitename":"TJN012MG1_TSEL_TanjungPandan3",
                  "popupContent":"siteid: TJN012<br>sitename: TJN012MG1_TSEL_TanjungPandan3",
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.63576,-2.72322]},
     "id": 3126},
   {"type":"Feature",
    "properties":{"siteid":"TJN002",
                  "sitename":"TJN002MD1_TSEL_TanjungPandanII",
                  "popupContent":"siteid: TJN002<br>sitename: TJN002MD1_TSEL_TanjungPandanII"
				  },
    "geometry":{"type":"Point",
                "coordinates":[107.65699,-2.7366]},
      "id": 3127 }]};


L.geoJSON(geojsonFeature, {

		style: function (feature) {
			return feature.properties && feature.properties.style;
		},

		onEachFeature: onEachFeature,

		pointToLayer: function (feature, latlng) {
			var colors = {
				3126: "#000",
				3127: "#001"
			};
			return new L.circleMarker(latlng, {
				radius: 8,
				fillColor: colors[feature.properties.id],
				color: colors[feature.properties.id],
				weight: 1,
				opacity: 1,
				fillOpacity: 0.8
				
			});
		}
	}).addTo(mymap);
L.geoJSON(geojsonFeature).addTo(mymap);
L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(mymap);
</script>

</body>
</html>

И это заканчивается черным кругом ниже значка маркера для каждого маркера, над которым я работаю, пожалуйста, помогите мне изменить цвет маркера

результаты кода

hadi prasetyo 16 июль 2018, в 10:18

Источник

Теги:

javascript

leaflet

1 ответ

Ещё вопросы

Stedy · Accepted Answer · 2018-07-17T03-48-00.000Z

Чтобы заменить цвета на поиск ключевого значения, вам нужно определить функцию вместо использования массива. Я создал эту функцию для удобства демонстрации:

function getColor(d) {
  if (d === 3126)
    return "#000";
  if (d === 3127)
    return "#ff0000";
}

Первоначально в вашем вопросе использовался "#001" который также отображается как черный в браузере, поэтому я изменил цвет.

Наконец, добавив эту функцию к L.geoJson:

<!DOCTYPE HTML>
<html>
<head>
    <title></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-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet CSS -->
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 1366px; height: 720px;"></div>
<script>
var mymap = L.map('mapid').setView([-2.729070029832631,107.64713287353514], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/hadicns/cjji5fjq61nru2rmiheweks5d/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGFkaWNucyIsImEiOiJjampoem5kbWIycjYzM3FudjA2cDJhZmN6In0.cYnG3YB44jr4yitE_HFSgg', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery  <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}
var geojsonFeature = {"type":"FeatureCollection",
 "features":[
   {"type":"Feature",
    "properties":{"siteid":"TJN012",
                  "sitename":"TJN012MG1_TSEL_TanjungPandan3",
                  "popupContent":"siteid: TJN012<br>sitename: TJN012MG1_TSEL_TanjungPandan3",
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.63576,-2.72322]},
     "id": 3126},
   {"type":"Feature",
    "properties":{"siteid":"TJN002",
                  "sitename":"TJN002MD1_TSEL_TanjungPandanII",
                  "popupContent":"siteid: TJN002<br>sitename: TJN002MD1_TSEL_TanjungPandanII"
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.65699,-2.7366]},
      "id": 3127 }]};

function getColor(d) {
  if (d === 3126)
    return "#000";
  if (d === 3127)
    return "#ff0000";
}


L.geoJSON(geojsonFeature, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature,

        pointToLayer: function (feature, latlng) {

    console.log(getColor(feature.id));
      return new L.circleMarker(latlng, {
                radius: 8,
                fillColor: getColor(feature.id),
        color: getColor(feature.id),
        weight: 1,
                opacity: 1,
                fillOpacity: 0.8

            });
        }
    }).addTo(mymap);

L.geoJSON(geojsonFeature).addTo(mymap);

</script>

</body>
</html>

Результаты в:

Извините, фрагмент кода не работал должным образом, поэтому я просто добавил все это к ответу
спасибо, это работа, теперь я могу спать с миром хе-хе