更改geoJSON多边形的样式颜色,但geojson未显示

时间:2017-12-01 18:55:15

标签: leaflet gis geojson geojsonio

我的图层不会显示,我使用了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>

1 个答案:

答案 0 :(得分:1)

你有一个格式错误的geojson。

  1. 要素集中的要素必须位于数组中 - 即使只有一个要素:
  2. {"type":"FeatureCollection","features": [{feature},{feature}] }

    1. 虽然我不相信Leaflet会因此而失败,但每个多边形的终点应与起点相同。
    2. 注意,你已经包含了一个坐标数组,这些坐标形成了多边形的外壳 - 这意味着你所包含的岛屿与华盛顿大陆一起串联 - 你需要调查一下多边形几何体或使用多个面要素来获得您可能正在寻找的最终效果。

      实现上面的一个和两个,你的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] ]]] } }] }; 
      

      这是传单:

      &#13;
      &#13;
       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);
      &#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;
      &#13;
      &#13;