我的图层不会显示,我使用了Leaflet的example,但它仍未显示。
这是一个展示问题的片段。
// Setting map point of view with L.map and set view
var map = L.map('map').setView([47.656896, -122.307511], 7);
// Adding a tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
// Washington Boundaries geoJSONLayer
var stateBoundaries = {
"type": "FeatureCollection",
"features": {
"type":"Feature",
"properties": {
"name":"Washington"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[[[
[-117.033359,49.000239],[-117.044313,47.762451],
[-117.038836,46.426077],[-117.055267,46.343923],
[-116.92382,46.168661],[-116.918344,45.993399],
[-118.988627,45.998876],[-119.125551,45.933153],
[-119.525367,45.911245],[-119.963522,45.823614],
[-120.209985,45.725029],[-120.505739,45.697644],
[-120.637186,45.746937],[-121.18488,45.604536],
[-121.217742,45.670259],[-121.535404,45.725029],
[-121.809251,45.708598],[-122.247407,45.549767],
[-122.762239,45.659305],[-122.811531,45.960537],
[-122.904639,46.08103],[-123.11824,46.185092],
[-123.211348,46.174138],[-123.370179,46.146753],
[-123.545441,46.261769],[-123.72618,46.300108],
[-123.874058,46.239861],[-124.065751,46.327492],
[-124.027412,46.464416],[-123.895966,46.535616],
[-124.098612,46.74374],[-124.235536,47.285957],
[-124.31769,47.357157],[-124.427229,47.740543],
[-124.624399,47.88842],[-124.706553,48.184175],
[-124.597014,48.381345],[-124.394367,48.288237],
[-123.983597,48.162267],[-123.704273,48.167744],
[-123.424949,48.118452],[-123.162056,48.167744],
[-123.036086,48.080113],[-122.800578,48.08559],
[-122.636269,47.866512],[-122.515777,47.882943],
[-122.493869,47.587189],[-122.422669,47.318818],
[-122.324084,47.346203],[-122.422669,47.576235],
[-122.395284,47.800789],[-122.230976,48.030821],
[-122.362422,48.123929],[-122.373376,48.288237],
[-122.471961,48.468976],[-122.422669,48.600422],
[-122.488392,48.753777],[-122.647223,48.775685],
[-122.795101,48.8907],[-122.756762,49.000239],
[-117.033359,49.000239],[-122.718423,48.310145],
[-122.586977,48.35396],[-122.608885,48.151313],
[-122.767716,48.227991],[-122.718423,48.310145],
[-123.025132,48.583992],[-122.915593,48.715438],
[-122.767716,48.556607],[-122.811531,48.419683],
[-123.041563,48.458022],[-123.025132,48.583992] ]]]
}
}
};
var styleState = {
color: "#ff7800",
weight: 5,
opacity: 0.65
};
L.geoJSON(stateBoundaries, {style: styleState}).addTo(map);
<!-- Leaflet CSS styles-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"/>
<!-- Leaflet javascript library -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<!-- <div> element to hold the map and height style -->
<div id="map" style="width: 800px; height: 600px; margin: auto; border: 1px solid #AAA"></div>
答案 0 :(得分:1)
你有一个格式错误的geojson。
{"type":"FeatureCollection","features": [{feature},{feature}] }
注意,你已经包含了一个坐标数组,这些坐标形成了多边形的外壳 - 这意味着你所包含的岛屿与华盛顿大陆一起串联 - 你需要调查一下多边形几何体或使用多个面要素来获得您可能正在寻找的最终效果。
实现上面的一个和两个,你的geojson应该是这样的:
var stateBoundaries = { "type": "FeatureCollection", "features": [{ "type":"Feature", "properties": { "name":"Washington" }, "geometry":{ "type":"MultiPolygon", "coordinates":[[[ [-117.033359,49.000239],[-117.044313,47.762451], [-117.038836,46.426077],[-117.055267,46.343923], [-116.92382,46.168661],[-116.918344,45.993399], [-118.988627,45.998876],[-119.125551,45.933153], [-119.525367,45.911245],[-119.963522,45.823614], [-120.209985,45.725029],[-120.505739,45.697644], [-120.637186,45.746937],[-121.18488,45.604536], [-121.217742,45.670259],[-121.535404,45.725029], [-121.809251,45.708598],[-122.247407,45.549767], [-122.762239,45.659305],[-122.811531,45.960537], [-122.904639,46.08103],[-123.11824,46.185092], [-123.211348,46.174138],[-123.370179,46.146753], [-123.545441,46.261769],[-123.72618,46.300108], [-123.874058,46.239861],[-124.065751,46.327492], [-124.027412,46.464416],[-123.895966,46.535616], [-124.098612,46.74374],[-124.235536,47.285957], [-124.31769,47.357157],[-124.427229,47.740543], [-124.624399,47.88842],[-124.706553,48.184175], [-124.597014,48.381345],[-124.394367,48.288237], [-123.983597,48.162267],[-123.704273,48.167744], [-123.424949,48.118452],[-123.162056,48.167744], [-123.036086,48.080113],[-122.800578,48.08559], [-122.636269,47.866512],[-122.515777,47.882943], [-122.493869,47.587189],[-122.422669,47.318818], [-122.324084,47.346203],[-122.422669,47.576235], [-122.395284,47.800789],[-122.230976,48.030821], [-122.362422,48.123929],[-122.373376,48.288237], [-122.471961,48.468976],[-122.422669,48.600422], [-122.488392,48.753777],[-122.647223,48.775685], [-122.795101,48.8907],[-122.756762,49.000239], [-117.033359,49.000239],[-122.718423,48.310145], [-122.586977,48.35396],[-122.608885,48.151313], [-122.767716,48.227991],[-122.718423,48.310145], [-123.025132,48.583992],[-122.915593,48.715438], [-122.767716,48.556607],[-122.811531,48.419683], [-123.041563,48.458022],[-123.025132,48.583992] ]]] } }] };
这是传单:
var stateBoundaries = { "type": "FeatureCollection", "features": [{ "type":"Feature", "properties": { "name":"Washington" }, "geometry":{ "type":"MultiPolygon", "coordinates":[[[ [-117.033359,49.000239],[-117.044313,47.762451], [-117.038836,46.426077],[-117.055267,46.343923], [-116.92382,46.168661],[-116.918344,45.993399], [-118.988627,45.998876],[-119.125551,45.933153], [-119.525367,45.911245],[-119.963522,45.823614], [-120.209985,45.725029],[-120.505739,45.697644], [-120.637186,45.746937],[-121.18488,45.604536], [-121.217742,45.670259],[-121.535404,45.725029], [-121.809251,45.708598],[-122.247407,45.549767], [-122.762239,45.659305],[-122.811531,45.960537], [-122.904639,46.08103],[-123.11824,46.185092], [-123.211348,46.174138],[-123.370179,46.146753], [-123.545441,46.261769],[-123.72618,46.300108], [-123.874058,46.239861],[-124.065751,46.327492], [-124.027412,46.464416],[-123.895966,46.535616], [-124.098612,46.74374],[-124.235536,47.285957], [-124.31769,47.357157],[-124.427229,47.740543], [-124.624399,47.88842],[-124.706553,48.184175], [-124.597014,48.381345],[-124.394367,48.288237], [-123.983597,48.162267],[-123.704273,48.167744], [-123.424949,48.118452],[-123.162056,48.167744], [-123.036086,48.080113],[-122.800578,48.08559], [-122.636269,47.866512],[-122.515777,47.882943], [-122.493869,47.587189],[-122.422669,47.318818], [-122.324084,47.346203],[-122.422669,47.576235], [-122.395284,47.800789],[-122.230976,48.030821], [-122.362422,48.123929],[-122.373376,48.288237], [-122.471961,48.468976],[-122.422669,48.600422], [-122.488392,48.753777],[-122.647223,48.775685], [-122.795101,48.8907],[-122.756762,49.000239], [-117.033359,49.000239],[-122.718423,48.310145], [-122.586977,48.35396],[-122.608885,48.151313], [-122.767716,48.227991],[-122.718423,48.310145], [-123.025132,48.583992],[-122.915593,48.715438], [-122.767716,48.556607],[-122.811531,48.419683], [-123.041563,48.458022] ]]] } }] };
var mymap = L.map('mapid').setView([46.8907,-118.795101], 5);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var styleState = { color: "#ff7800", weight: 5, opacity: 0.65 };
L.geoJSON(stateBoundaries, {style: styleState}).addTo(mymap);
&#13;
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<div id="mapid" style="width: 600px; height: 400px;"></div>
&#13;