使用传单，同时绘制许多多边形和标记

Question

  

使用传单，我想绘制一个包含多边形和标记的列表。

我对传单了解得很少，所以我想寻求一些建议或推荐。

如何绘制所有标记和多边形？我可能没有找到它，因为我的搜索不正确，但是如果找到合适的副本，请链接。

这是我的数据示例。

[
   {
      "id":"6faa24dc-153f-4724-ad40-638a15a4347a",
      "data":{
         "custom_region_info":{
            "type":"FeatureCollection",
            "features":[
               {
                  "geometry":{
                     "coordinates":[
                        [
                           [
                              126.179095,
                              37.766847
                           ],
                           [
                              127.124778,
                              37.327635
                           ],
                           [
                              128.403225,
                              37.652676
                           ],
                           [
                              128.662563,
                              38.472205
                           ],
                           [
                              127.321475,
                              38.670943
                           ],
                           [
                              126.179095,
                              37.766847
                           ]
                        ]
                     ],
                     "type":"Polygon"
                  },
                  "type":"Feature",
                  "properties":{
                     "name":"koreawith",
                     "shapeContinent":"AS",
                     "detail":"bukhan",
                     "shapeCountry":"KR"
                  }
               }
            ]
         },
         "custom_region_detail":"bukhan"
      },
      "temporary":false,
      "is_aoi":"true"
   },
   {
      "id":"70461179-0feb-48e1-a47d-ca94e3dee14a",
      "data":{
         "custom_region_info":{
            "type":"FeatureCollection",
            "features":[
               {
                  "geometry":{
                     "coordinates":[
                        127.030812,
                        37.504279
                     ],
                     "type":"Point"
                  },
                  "type":"Feature",
                  "properties":{
                     "name":"gangnam",
                     "shapeContinent":"AS",
                     "detail":"gangnam style",
                     "shapeCountry":"KR"
                  }
               }
            ]
         },
         "custom_region_detail":"gangnam style"
      },
      "temporary":false,
      "is_aoi":"true"
   }
]

现在，我可以添加新标记或新多边形。

map.on('draw:created', function (e) {
        var type = e.layerType,
            layer = e.layer;
        if (type === 'marker') {
            // Do marker specific actions
        }
        if (Array.isArray(layer._latlngs)) {
            latLngs = layer._latlngs[0];
        } else {
            var temp_arr = [];
            temp_arr.push(layer._latlng);
            latLngs = temp_arr;
        }
        // Do whatever else you need to. (save to db; add to map etc)
        // var idIW = L.popup();
        var result = confirm("만들려는 지역이 도시 레벨입니까? \n\n ex) \n 확인 : 홍대 - 도시레벨 \n 취소 : 동유럽 - 국가레벨 이상");

        var content = result ?
            '<span><b>Shape Continent</b></span><br/>' +
            '<input id="shapeContinent" type="text" placeholder="지역을 포함시킬 대륙을 영어로 작성하세요"/>' +
            '<br/>' +
            '<br/>' +
            '<span><b>Shape Country<b/></span><br/>' +
            '<input id="shapeCountry" type="text"/>' +
            '<br/>' +
            '<br/>' +
            '<span><b>Shape Name</b></span><br/>' +
            '<input id="shapeName" type="text" placeholder="영어로 작성하세요"/>' +
            '<br/>' +
            '<br/>' +
            '<span><b>Shape Description<b/></span>' +
            '<br/>' +
            '<textarea id="shapeDesc" cols="25" rows="5" placeholder="한글작성 가능"></textarea>' +
            '<br/>' +
            '<br/>' +
            '<input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>'

            :

            '<span><b>Shape Continent<b/></span><br/>' +
            '<input id="shapeContinent" type="text" placeholder="지역을 포함시킬 대륙을 영어로 작성하세요" />' +
            '<br/>' +
            '<br/>' +
            '<span><b>Shape Name</b></span><br/>' +
            '<input id="shapeName" type="text"/>' +
            '<br/>' +
            '<br/>' +
            '<span><b>Shape Description<b/></span>' +
            '<br/>' +
            '<textarea id="shapeDesc" cols="25" rows="5"></textarea>' +
            '<br/>' +
            '<br/>' +
            '<input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>';

        idIW.setContent(content);

        if (layer._bounds) {
            var bounds = layer.getBounds();
            // idIW.setLataLng($scope.latLng);
            idIW.setLatLng(bounds.getCenter()); //calculated based on the e.layertype
        } else {
            idIW.setLatLng(layer._latlng);
        }

        idIW.openOn(map);

        map.addLayer(layer);
    });

这仅显示一个标记，但是在创建另一个标记之前，我想查看所有标记。

Answer 1

在加载页面之前，我可以从沙发床获取所有数据。

我关注了这些文章。

[1] https://gist.github.com/stoolrossa/1313195/8e3e5161ce71d16ce4a383e747a63c5b9def54b9

[2] How to add markers to different layers in leaflet using onEachFeature and geojson

[3] https://leafletjs.com/examples/geojson/

function requestUpdatedCadastre(bounds) {
        $.ajax({
            type: 'GET',
            url: ATLAS_ADMIN_HOST + "/admin_api/regions/aois",
            dataType: 'json',
            success: function (result) {
                var custom_region_info = result.map(function (item) { return item["data"]["custom_region_info"]}); // 마커와 폴리곤 배열
                console.log("마커와 폴리곤 배열 : ");
                console.log(custom_region_info);
                parseResponseCadastre(custom_region_info);
            },
            error: function (req, status, error) {
                alert('Unable to get cadastral data:' + error);
            }
        });
    }

    // parse the features retrieved from Couchbase
    function parseResponseCadastre(data) {
        var marker_array = data.map(function (item) { return item["features"][0]["geometry"]});
        console.log("parse before: ");
        console.log(data);
        console.log("parse: ");
        console.log(marker_array);

        if (drawnItems != undefined)
        {
            map.removeLayer(drawnItems);
        }

        for(var i=0; i< data.length; i++) {
            L.geoJSON(data[i]).addTo(map);
        }
    }

 var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    map.on('load', function(e) {
        requestUpdatedCadastre(e.target.getBounds());
    });

    map.setView([37.507805, 127.056605], 13);

首先调用map.on（'load'）比map.setView重要。