根据传单中的数据属性更改标记颜色

Question

我在 json 中有一组数据，我想为传单中的每个数据设置一个特定的标记颜色。 数据是这样的：

var BillingDate = [
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"0",
          "flag_Title":null
          }
          {
           "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"2",
          "flag_Title":null
          }
        ];

我想说如果 flag===0 将标记颜色设置为蓝色，如果 flag===1 将标记颜色设置为红色等等。 我怎么能在传单中做到这一点？因为我猜if循环函数本身不起作用...... 我将此代码与 Awsome Markers 一起使用：

var customColor = "blue";

    if (ODO[i].flag === 1)
    customColor = "red";
    else if (ODO[i].flag === 2)
    customColor = "orange";
    else if (ODO[i].flag === 3)
    customColor = "green";

    var customMarker = L.AwesomeMarkers.icon({
    markerColor: customColor
    });
    var mainMap = L.marker( [ODO[i].LastX, ODO[i].LastY] , {icon: customMarker})
                    .bindPopup( popup );
    markerClusters.addLayer( mainMap );

但它给了我一个错误

Layer.js:52 Uncaught TypeError: t.addLayer is not a function
at i.addTo (Layer.js:52)
at MarkerOnMap (functions.js:61)
at Object.success (app.js:213)
at i (0:4002)
at XMLHttpRequest.Request.f.onload (0:4179)

在线： window.mainMap.addLayer( markerClusters ); markerClusterLayer = L.markerClusterGroup({disableClusteringAtZoom: 13}).addTo(mainMap);

有人可以帮忙吗？

Answer 1

我已经更新了我的例子，看看 -> Leaflet.awesome-markers

更新：添加 markerClusterGroup 插件

以下是您的问题的解决方案：

// config map
let config = {
  minZoom: 7,
  maxZomm: 18,
};
// magnification with which the map will start
const zoom = 17;
// co-ordinates
const lat = 52.2297700;
const lon = 21.0117800;

// coordinate array with popup text
let points = [{
    "lat": 52.230020586193795,
    "lng": 21.01083755493164,
    "text": "point 1",
    "flag": 1
  },
  {
    "lat": 52.22924516170657,
    "lng": 21.011320352554325,
    "text": "point 2",
    "flag": 0
  },
  {
    "lat": 52.229511304688444,
    "lng": 21.01270973682404,
    "text": "point 3",
    "flag": 2
  },
  {
    "lat": 52.23040500771883,
    "lng": 21.012146472930908,
    "text": "point 4",
    "flag": 3
  }
];

// calling map
const map = L.map('map', config).setView([lat, lon], zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Creates a red marker with the coffee icon
function colors(flag) {
  let colorMarker = '';
  switch (flag) {
    case 0:
      colorMarker = 'pink';
      break;
    case 1:
      colorMarker = 'red';
      break;
    case 2:
      colorMarker = 'blue';
      break;
    case 3:
      colorMarker = 'green';
      break;
    default:
      break;
  }

  return L.AwesomeMarkers.icon({
    markerColor: colorMarker
  });
}

let markers = L.markerClusterGroup();

// loop that adds many markers to the map
for (let i = 0; i < points.length; i++) {
  const {
    lat,
    lng,
    text,
    flag
  } = points[i];

  const marker = new L.marker([lat, lng], {
    icon: colors(flag)
  }).bindPopup(text)

  markers.addLayer(marker);

}

map.addLayer(markers);

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers@2.0.2/dist/leaflet.awesome-markers.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers@2.0.2/dist/leaflet.awesome-markers.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>

<div id="map"></div>