如何在传单上加载 json 文件并设置样式？

Question

我想从 json 文件加载我的 html 代码中的标记，并加载另一个带有自定义标记的 json 文件。此文件具有需要指定为纬度和经度的自定义坐标。 X 坐标应为 lng，Y 坐标应为 lat。另外，可以用单独的图标为每个组设置样式吗？？我在处理 json 文件时遇到困难，对此了解不多。示例代码：

{
  "Resources": [
    {
      "Name": "AITokarServer",
      "coords": [
        {
          "x": -1210.0,
          "y": -1770.0
        },
        {
          "x": -1230.0,
          "y": -1810.0
        },

完整代码在这里：http://plnkr.co/edit/q0Jyi528X22KnXcRg2Fs?p=preview

Answer 1

这里有一个——希望得到很好的评论——你可以如何迭代 json 对象并使用数据创建标记的例子。

// Pretend this is the response from reading a file
  var geoJson = {
    resources: [{
      x: 4288,
      y: -4288,
    }, {
      x: -2320,
      y: -4000,
    }, {
      x: -2320,
      y: -4080,
    }, {
      x: -2400,
      y: -804,
    }, {
      x: -2370,
      y: -1092,
    },
    {
      x: -2470,
      y: -1192,
    },
    {
      x: -2320,
      y: -1122,
    },
    {
      x: -2570,
      y: -1125,
    },
    {
      x: -1350,
      y: -1252,
    },
    {
      x: -1355,
      y: -2125,
    }]
  };


  // Iterate over the resources array of the geoJson object
  // Nested properties of object literals (JSON) can be accessed using dot notation or array syntax
  // eg: dot notation: geoJson.resources
  // eg: array syntax: geoJson["resources"]
  for (var i = 0; i < geoJson.resources.length; i++) {

    // Create a local variable pointing to the
    // coordinate pair object at index i in the resources array of objects
    var currentCoordPair = geoJson.resources[i];

    // Construct a 2 item array containing the x and y values of the current object
    var xyArray = [currentCoordPair.x, currentCoordPair.y];

    // Create a new marker object just like you did before
    var marker = L.marker(xyArray, {icon: icon01});


    // Add the marker to the map
    var addedMarker = marker.addTo(map);


    // Bind your popup
    addedMarker.bindPopup("Base");

  }

还有一个 link 给 plunker，它只是你代码的一个分支。 http://plnkr.co/edit/O8xqcQlWJM3JiztQXePP

我注意到您在您提供的 Plunker 的其他区域处理 LatLng 值。假设您有一个如下所示的对象：

{lat: 152.25151, long: 125.51251} // Just example values

在这种情况下，您将能够按照我在上面展示的相同方式访问这些值并将其应用于标记。不同之处在于您将访问 currentCoordPair.lat 而不是 currentCoordPair.x

希望对您有所帮助

如何在传单上加载 json 文件并设置样式？

How to load json file on leaflet and style it?

javascript

maps

json

leaflet