繁体   English   中英

geoJson object 不使用开放层绘制

[英]geoJson object not drawing with open layers

我有一个代码笔演示了这个问题: https://codepen.io/ericg_off/pen/OJvqZMx

我可以得到这个 geojson object 来绘制 leaflet - https://codepen.io/ericg_off/pen/OJvqEdL

我正在使用 v6.15.1。

我相信解决方案将涉及 OpenLayers 的投影功能。

我需要更改什么以便 geojson object 将绘制?

HTML:

<div id="map"></div>

CSS:

#map {
  height: 512px;
  width: 1024px;
}

JS:

const kuwait = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            // lat/lon order
            // [47.974519077349896, 29.9758192001485],
            // [48.18318851094448, 29.534476630159766],
            // [48.09394331237642, 29.306299343375002],
            // [48.416094191283946, 28.55200429942667],
            // [47.708850538937384, 28.526062730416143],
            // [47.45982181172283, 29.002519436147224],
            // [46.568713413281756, 29.09902517345229],
            // [47.30262210469096, 30.05906993257072],
            // [47.974519077349896, 29.9758192001485]
            
            // lon/lat order
            [47.974519077349896, 29.9758192001485],
            [48.18318851094448, 29.534476630159766],
            [48.09394331237642, 29.306299343375002],
            [48.416094191283946, 28.55200429942667],
            [47.708850538937384, 28.526062730416143],
            [47.45982181172283, 29.002519436147224],
            [46.568713413281756, 29.09902517345229],
            [47.30262210469096, 30.05906993257072],
            [47.974519077349896, 29.9758192001485]            
          ]
        ]
      }
    }
  ]
};

const styles = {
  Polygon: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: "blue",
      lineDash: [4],
      width: 3
    }),
    fill: new ol.style.Fill({
      color: "rgba(0, 0, 255, 0.1)"
    })
  })
};

const styleFunction = function (feature) {
  const featureType = feature.getGeometry().getType();
  return styles[featureType];
};

const vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(kuwait)
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: styleFunction
});

const map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

解析 GeoJSON 时,您需要指定要在其中查看要素的投影

features: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'}).readFeatures(kuwait)

https://codepen.io/mike-000/pen/oNqVMEK

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM