Изменение цвета стиля полигона geoJSON, но геоджон не отображается

Мой слой не появится, я использовал пример Leaflet, но он все еще не отображается.

Вот фрагмент, демонстрирующий проблему.

// 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>

Источник

1 ответ

У вас есть неправильный геойсон.

  1. Элементы в вашей коллекции элементов должны быть в массиве, даже если присутствует только одна функция:

{"type":"FeatureCollection","features": [{feature},{feature}] }

  1. Хотя я не верю, что Leaflet потерпит неудачу, конечная точка каждого многоугольника должна совпадать с начальной точкой.

Обратите внимание, что вы включили один массив координат, они образуют внешнюю оболочку многоугольника - это означает, что острова, которые вы включили, соединены вместе с материковым Вашингтоном - вам нужно изучить многогранную геометрию или использовать несколько Полигональные возможности, чтобы получить ожидаемый эффект.

Реализуя один и два выше, ваш геойсон должен выглядеть так:

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 &copy; <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);
 <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>

Источник
Другие вопросы по тегам