[Leaflet]如何改变每个区域的颜色并使其可编辑?

[Leaflet]How to change the color of each area and make it editable?

我在传单中创建了一张地图,这是示例图片

http://i58.tinypic.com/2a7xwqo.jpg

根据您看到的图片,左侧的边框区域是可编辑的,而世界其他地方则不可。现在我的问题是如何使右侧的地图与左侧的地图相同?我的意思是它们都是可编辑的,而世界其他地方不是?以及如何改变它们的颜色?

这是代码

<center> <div id="map" style="width: 1200px; height: 700px"></div></center>

 <div id="menu">
<ul>




<td>
<br>

</td>
</table>
<br>






    <script
        src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>

    <script
        src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js">
    </script>

     <script>
// credits: https://github.com/turban/Leaflet.Mask
L.Mask = L.Polygon.extend({
    options: {
        stroke: false,
        color: '#333',
        fillOpacity: 0.5,
        clickable: true,


        outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
    },

    initialize: function (latLngs, options) {

         var outerBoundsLatLngs = [
            this.options.outerBounds.getSouthWest(),
            this.options.outerBounds.getNorthWest(),
            this.options.outerBounds.getNorthEast(),
            this.options.outerBounds.getSouthEast()
        ];
        L.Polygon.prototype.initialize.call(this, [outerBoundsLatLngs, latLngs], options);  
    },

});
L.mask = function (latLngs, options) {
    return new L.Mask(latLngs, options);
};



// Polygon created with http://geojson.io/
var sanbartolome = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              121.0207986831665,
              14.71238001066067
            ],
            [
              121.02015495300293,
              14.71200643586981
            ],
            [
              121.01968288421631,
              14.712338502382146
            ],
            [
              121.01908206939697,
              14.712421518931281
            ],
            [
              121.0184383392334,
              14.712172469189156
            ],
            [
              121.0180950164795,
              14.711715877256967
            ],
            [
              121.01775169372559,
              14.71113475887066
            ],
            [
              121.01766586303711,
              14.710512130310955
            ],
            [
              121.01783752441405,
              14.709681956134785
            ],
            [
              121.01818084716797,
              14.708810269851188
            ],
            [
              121.01886749267578,
              14.707648016057705
            ],
            [
              121.01895332336426,
              14.70611217119577
            ],
            [
              121.01818084716797,
              14.705198961020216
            ],
            [
              121.01792335510252,
              14.704742354499942
            ],
            [
              121.01783752441405,
              14.704161217547579
            ],
            [
              121.01818084716797,
              14.703663098928693
            ],
            [
              121.01818084716797,
              14.703497059136536
            ],
            [
              121.0185670852661,
              14.703663098928693
            ],
            [
              121.01912498474121,
              14.703331019218112
            ],
            [
              121.01989746093749,
              14.703538569096404
            ],
            [
              121.02054119110106,
              14.70370460885701
            ],
            [
              121.02161407470703,
              14.703912158380186
            ],
            [
              121.0215711593628,
              14.70436876663671
            ],
            [
              121.02178573608397,
              14.704410276430858
            ],
            [
              121.02195739746092,
              14.703497059136536
            ],
            [
              121.02230072021484,
              14.702417797409819
            ],
            [
              121.02380275726317,
              14.702293266867338
            ],
            [
              121.02569103240967,
              14.702168736253803
            ],
            [
              121.02646350860594,
              14.701878164546082
            ],
            [
              121.02706432342528,
              14.700757384337317
            ],
            [
              121.02805137634277,
              14.700259257953755
            ],
            [
              121.02899551391602,
              14.699179980225122
            ],
            [
              121.02981090545653,
              14.699179980225122
            ],
            [
              121.03191375732423,
              14.699138469436718
            ],
            [
              121.03272914886475,
              14.699076203239365
            ],
            [
              121.03275060653685,
              14.699449800157279
            ],
            [
              121.03339433670043,
              14.69963659837658
            ],
            [
              121.03414535522461,
              14.699595087674995
            ],
            [
              121.03498220443726,
              14.69976113043405
            ],
            [
              121.03519678115845,
              14.69976113043405
            ],
            [
              121.03528261184691,
              14.69984415176623
            ],
            [
              121.03601217269896,
              14.699449800157279
            ],
            [
              121.03624820709227,
              14.699179980225122
            ],
            [
              121.03901624679565,
              14.69996868370533
            ],
            [
              121.03953123092651,
              14.699512066248136
            ],
            [
              121.0398530960083,
              14.699366778675191
            ],
            [
              121.04068994522093,
              14.699781885770053
            ],
            [
              121.04114055633545,
              14.699532821607814
            ],
            [
              121.0413122177124,
              14.699283757161554
            ],
            [
              121.04171991348267,
              14.699408289420186
            ],
            [
              121.0417413711548,
              14.699574332321244
            ],
            [
              121.04339361190797,
              14.700487566020588
            ],
            [
              121.0443377494812,
              14.699532821607814
            ],
            [
              121.04448795318604,
              14.699449800157279
            ],
            [
              121.04633331298827,
              14.700549831815577
            ],
            [
              121.04828596115112,
              14.699449800157279
            ],
            [
              121.04929447174072,
              14.700051704958621
            ],
            [
              121.04968070983888,
              14.700591342335706
            ],
            [
              121.04944467544556,
              14.70121399919081
            ],
            [
              121.04987382888793,
              14.702625348156174
            ],
            [
              121.0497236251831,
              14.702791388611221
            ],
            [
              121.04920864105225,
              14.70277063356125
            ],
            [
              121.0489296913147,
              14.702293266867338
            ],
            [
              121.04762077331542,
              14.70254232788131
            ],
            [
              121.04611873626708,
              14.703642343961583
            ],
            [
              121.0454750061035,
              14.704804619081676
            ],
            [
              121.04521751403809,
              14.704991412720306
            ],
            [
              121.04508876800537,
              14.705219715839354
            ],
            [
              121.04195594787598,
              14.705240470656518
            ],
            [
              121.0413122177124,
              14.707212169289635
            ],
            [
              121.04124784469603,
              14.707648016057705
            ],
            [
              121.03998184204102,
              14.708208389195038
            ],
            [
              121.03970289230347,
              14.708104616500359
            ],
            [
              121.03871583938597,
              14.708540461486441
            ],
            [
              121.0380506515503,
              14.709308376725264
            ],
            [
              121.03729963302611,
              14.709183850113313
            ],
            [
              121.03691339492798,
              14.708976305602194
            ],
            [
              121.03669881820677,
              14.70910083233254
            ],
            [
              121.03644132614136,
              14.70910083233254
            ],
            [
              121.03607654571533,
              14.709453657682731
            ],
            [
              121.03358745574951,
              14.709744219307547
            ],
            [
              121.03341579437256,
              14.710408358711632
            ],
            [
              121.0334587097168,
              14.710532884624905
            ],
            [
              121.03257894515991,
              14.710740427655768
            ],
            [
              121.03169918060301,
              14.710761181948001
            ],
            [
              121.03107690811157,
              14.71049137599503
            ],
            [
              121.03081941604613,
              14.710636656165004
            ],
            [
              121.0309910774231,
              14.711363055564133
            ],
            [
              121.03090524673463,
              14.711757385653923
            ],
            [
              121.03021860122679,
              14.71238001066067
            ],
            [
              121.03002548217773,
              14.713210174572755
            ],
            [
              121.0294461250305,
              14.714164859166916
            ],
            [
              121.02940320968627,
              14.714621445974403
            ],
            [
              121.02946758270264,
              14.714808231211153
            ],
            [
              121.02918863296509,
              14.715327078251933
            ],
            [
              121.02910280227661,
              14.715513862884555
            ],
            [
              121.02882385253906,
              14.715700647357233
            ],
            [
              121.0284376144409,
              14.715742154996123
            ],
            [
              121.02777242660522,
              14.71607421582282
            ],
            [
              121.02704286575317,
              14.71621949227558
            ],
            [
              121.02564811706543,
              14.716862858260502
            ],
            [
              121.0254120826721,
              14.71694587308808
            ],
            [
              121.02513313293456,
              14.716904365678229
            ],
            [
              121.02459669113159,
              14.71644778364871
            ],
            [
              121.02384567260741,
              14.716800597119072
            ],
            [
              121.02365255355836,
              14.716759089681588
            ],
            [
              121.02330923080444,
              14.716364768631571
            ],
            [
              121.02230072021484,
              14.715887431669993
            ],
            [
              121.02191448211669,
              14.715534616722733
            ],
            [
              121.0215711593628,
              14.712919617562784
            ],
            [
              121.02139949798585,
              14.712712076604523
            ],
            [
              121.02120637893677,
              14.71252528957328
            ],
            [
              121.0207986831665,
              14.71238001066067
            ]
          ]
        ]
      }
    }
  ]
};











var sanbartolome1 = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
          "coordinates": [
          [
            [
              121.04564666748045,
              14.730808905988164
            ],
            [
              121.04556083679198,
              14.729376986829836
            ],
            [
              121.04515314102171,
              14.729376986829836
            ],
            [
              121.04483127593993,
              14.729127956450599
            ],
            [
              121.0447883605957,
              14.727218714090242
            ],
            [
              121.04315757751465,
              14.726803659190255
            ],
            [
              121.04324340820312,
              14.726222581002583
            ],
            [
              121.04485273361206,
              14.726720648115412
            ],
            [
              121.04867219924928,
              14.727197961364011
            ],
            [
              121.04860782623291,
              14.720868287675927
            ],
            [
              121.04712724685668,
              14.720951300978989
            ],
            [
              121.04708433151245,
              14.719457056689269
            ],
            [
              121.04712724685668,
              14.718917465957539
            ],
            [
              121.04755640029907,
              14.718232598875604
            ],
            [
              121.04815721511841,
              14.718792944829868
            ],
            [
              121.04913353919983,
              14.717682628298446
            ],
            [
              121.05102181434631,
              14.719311782392825
            ],
            [
              121.05281352996825,
              14.717039264731355
            ],
            [
              121.05459451675416,
              14.718481641699666
            ],
            [
              121.05769515037538,
              14.714445037548428
            ],
            [
              121.05461597442627,
              14.711944173342486
            ],
            [
              121.05950832366945,
              14.706081039093599
            ],
            [
              121.05897188186644,
              14.7055621700703
            ],
            [
              121.05849981307982,
              14.70578009521028
            ],
            [
              121.0579526424408,
              14.705302735096184
            ],
            [
              121.0577917098999,
              14.705167828787806
            ],
            [
              121.05709433555603,
              14.70540650912283
            ],
            [
              121.05606436729431,
              14.70654802016014
            ],
            [
              121.05544209480286,
              14.70749235659759
            ],
            [
              121.0555064678192,
              14.707824429978333
            ],
            [
              121.054927110672,
              14.708540461486441
            ],
            [
              121.05369329452513,
              14.708696120199113
            ],
            [
              121.05327486991882,
              14.70891404221037
            ],
            [
              121.05248093605042,
              14.709080077882422
            ],
            [
              121.05218052864075,
              14.709557429735995
            ],
            [
              121.05213761329652,
              14.709692333331473
            ],
            [
              121.05172991752623,
              14.709412148847598
            ],
            [
              121.05132222175597,
              14.709723464918598
            ],
            [
              121.05082869529724,
              14.710532884624905
            ],
            [
              121.0497236251831,
              14.710325341396656
            ],
            [
              121.04926228523253,
              14.710460244517469
            ],
            [
              121.04888677597046,
              14.710180061019438
            ],
            [
              121.04822158813475,
              14.709671578937602
            ],
            [
              121.04772806167603,
              14.710014026184215
            ],
            [
              121.04685902595521,
              14.709982894638525
            ],
            [
              121.04612946510314,
              14.710045157725437
            ],
            [
              121.04605436325075,
              14.710211192536972
            ],
            [
              121.04620456695555,
              14.710615901860939
            ],
            [
              121.04678392410278,
              14.710916839076834
            ],
            [
              121.04711651802063,
              14.71135267844687
            ],
            [
              121.04681611061095,
              14.711985681695994
            ],
            [
              121.04615092277527,
              14.71256679781626
            ],
            [
              121.04567885398863,
              14.712857355296048
            ],
            [
              121.04526042938232,
              14.712940371647761
            ],
            [
              121.04483127593993,
              14.712784715962366
            ],
            [
              121.04371547698976,
              14.712037567126806
            ],
            [
              121.04352235794067,
              14.712016812955968
            ],
            [
              121.04323267936708,
              14.712317748239931
            ],
            [
              121.04296445846558,
              14.712763961862594
            ],
            [
              121.0429000854492,
              14.713013010929627
            ],
            [
              121.04325413703918,
              14.713625255344366
            ],
            [
              121.04298591613768,
              14.714465791488294
            ],
            [
              121.04295372962952,
              14.714943131560467
            ],
            [
              121.04322195053099,
              14.715347832107897
            ],
            [
              121.04357600212097,
              14.715596878225487
            ],
            [
              121.04401588439941,
              14.715783662627086
            ],
            [
              121.0443377494812,
              14.715939316172935
            ],
            [
              121.04429483413696,
              14.716115723390619
            ],
            [
              121.04398369789122,
              14.71654117550522
            ],
            [
              121.04397296905518,
              14.716873235115676
            ],
            [
              121.04389786720276,
              14.71720529422065
            ],
            [
              121.04364037513733,
              14.718253352455127
            ],
            [
              121.04346871376036,
              14.71875143777152
            ],
            [
              121.04325413703918,
              14.718803321593224
            ],
            [
              121.04286789894103,
              14.718595786232333
            ],
            [
              121.04257822036742,
              14.718377873890866
            ],
            [
              121.04224562644958,
              14.718346743538586
            ],
            [
              121.04183793067932,
              14.718429757801436
            ],
            [
              121.04144096374512,
              14.718917465957539
            ],
            [
              121.04116201400757,
              14.719073117267152
            ],
            [
              121.04107618331909,
              14.719560823984638
            ],
            [
              121.04078650474548,
              14.720214556810097
            ],
            [
              121.04055047035217,
              14.721283353875215
            ],
            [
              121.04040026664732,
              14.721771055649866
            ],
            [
              121.04033589363098,
              14.721905951692825
            ],
            [
              121.04169845581053,
              14.722227626535446
            ],
            [
              121.04141950607301,
              14.723846370153696
            ],
            [
              121.04120492935179,
              14.725734889185244
            ],
            [
              121.04133367538451,
              14.726471614701252
            ],
            [
              121.04179501533508,
              14.72843274513597
            ],
            [
              121.04243874549866,
              14.728961936039699
            ],
            [
              121.04518532752991,
              14.730757025023513
            ],
            [
              121.04564666748045,
              14.730808905988164
            ]
          ]
        ]
      }
    }
  ]
};


var map = new L.Map('map');

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy; OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 15, maxZoom: 18, attribution: osmAttrib});
map.addLayer(osm);

map.setView([14.7053533,121.031448],15);

// transform geojson coordinates into an array of L.LatLng
var coordinates = sanbartolome.features[0].geometry.coordinates[0];
var latLngs = [];
for (i=0; i<coordinates.length; i++) {
    latLngs.push(new L.LatLng(coordinates[i][1], coordinates[i][0]));
}

L.mask(latLngs).addTo(map);
var layerpoly = new L.geoJson(sanbartolome.features,myStyle).addTo(map);
var layerpoly = new L.geoJson(sanbartolome1.features,myStyle).addTo(map);

var myStyle = {
    "color": "#fff",
    "weight": 5,
    "opacity": 0.001,
};



    </script>

TY

任何帮助都会很棒

目前地图上右侧的 GeoJSON 图层被您为左侧图层创建的遮罩覆盖。因此,如果您将正确的坐标添加到遮罩中,它也会使地图的那部分远离遮罩:

// Coordinates of first GeoJSON feature
var coordinates = sanbartolome.features[0].geometry.coordinates[0];
// Coordinates of second GeoJSON feature
var coordinates1 = sanbartolome1.features[0].geometry.coordinates[0];
// Empty array for storing all coordinates
var latLngs = [];
// Loop over first feature
for (i=0; i<coordinates.length; i++) {
    // Add coordinates to array
    latLngs.push(new L.LatLng(coordinates[i][1], coordinates[i][0]));
}
// Loop over second feature
for (i=0; i<coordinates1.length; i++) {
    // Add coordinates to array
    latLngs.push(new L.LatLng(coordinates1[i][1], coordinates1[i][0]));
}
// Instanciate mask with coordinates array
L.mask(latLngs).addTo(map);

现在这两个特征都不会被遮罩覆盖。至于颜色。创建 GeoJSON 层时,您首先使用名为 myStyle 的变量。然后,您声明它。那永远行不通。您首先需要声明一个变量,然后才能使用它。您可能已经在您的控制台中看到了这一点,因为它会抛出一个错误:myStyle is not defined。此外,您尝试执行的操作也不正确。 L.GeoJSON 采用一个选项数组,其样式 属性 应包含一个函数,该函数 returns 一个具有样式属性的对象。正确的方法是:

// First declare options object
var options = {
  style: function (feature) {
    return {
      "color": "yellow",
      "weight": 5,
      "opacity": 0.001,
      "fillColor": "red",
      "fillOpacity": 0.1
    };
  }
};

// Then use the options object
var layerpoly = new L.geoJson(sanbartolome.features,options).addTo(map);
var layerpoly1 = new L.geoJson(sanbartolome1.features,options).addTo(map);

这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/1I7dIw?p=preview