Javascript [传单]如何更改每个区域的颜色并使其可编辑？
我有一张在传单中创建的地图，这是示例图片 根据您看到的图片，左侧的边界区域是可编辑的，而世界的其他部分不是。现在我的问题是，我怎样才能使右侧的地图与左侧的地图相同？我的意思是它们都是可编辑的，而世界上其他地方不是？以及如何改变它们的颜色 这是密码Javascript [传单]如何更改每个区域的颜色并使其可编辑？,javascript,html,ajax,leaflet,Javascript,Html,Ajax,Leaflet,我有一张在传单中创建的地图，这是示例图片 根据您看到的图片，左侧的边界区域是可编辑的，而世界的其他部分不是。现在我的问题是，我怎样才能使右侧的地图与左侧的地图相同？我的意思是它们都是可编辑的，而世界上其他地方不是？以及如何改变它们的颜色 这是密码 <center> <div id="map" style="width: 1200px; height: 700px"></div></center> <div id="menu"> &
<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 © 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>
//学分：https://github.com/turban/Leaflet.Mask
L.遮罩=L.多边形.延伸({
选项：{
笔画：错，
颜色：“#333”，
填充不透明度：0.5，
可点击：正确，
外边界：新的L.LatLngBounds（[-90，-360]，[90360]）
},
初始化：功能（锁定、选项）{
var outerBoundsLatLngs=[
this.options.outerBounds.getSouthWest（），
this.options.outerBounds.getNorthWest（），
this.options.outerBounds.getNorthEast（），
this.options.outerBounds.getSouthwest（）
];
L.Polygon.prototype.initialize.call（此[OuterBoundSlatlings，latLngs]，选项）；
},
});
L.mask=功能（板条、选项）{
返回新的L.掩码（latLngs，选项）；
};
//使用创建的多边形http://geojson.io/
var sanbartolome={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“属性”：{}，
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[
[
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.6997818857
// 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);
// 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);