У меня есть следующий код JS для создания буфера в 1 милю в Openlayers с использованием JSTS. Однако я бы хотел добавить 2 или 3 буфера, но изменить цвет по умолчанию для облегчения просмотра. Пока что пробовал ...

-1
user_map123 5 Мар 2021 в 02:51

1 ответ

Лучший ответ

Как указал @Mike в своем комментарии: «Параметр изображения в ol.style.Style используется для стилизации точечных объектов с помощью значка или обычных форм, таких как круг. Ваша буферизованная геометрия представляет собой многоугольник и оформляется параметрами обводки и заливки of ol.style.Style "

Измените style:

style: new ol.style.Style({
  image: new ol.style.Circle({
    stroke: new ol.style.Stroke({
      color: [0, 102, 77],
      width: 2
    }),
    fill: new ol.style.Fill({
      color: [230, 255, 255, 0.6]
    })
  })
})

Чтобы удалить image: new ol.styld.Circle, например:

var vectorLayer = new ol.layer.Vector({ // VectorLayer({
  source: source,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 3,
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.3)',
    }),
  }),
});

снимок экрана стилизованных буферов фрагмент кода

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JSTS Integration</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
  <script src="https://unpkg.com/jsts@2.3.0/dist/jsts.min.js"></script>
  <style>

  </style>
</head>

<body>
  <div id="map" class="map"></div>
  <script>
    var json = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.1",
        "geometry": {
          "type": "Point",
          "coordinates": [-760868.77651775, 7266893.59283424]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.2",
        "geometry": {
          "type": "Point",
          "coordinates": [-745762.5639359, 7273034.00676835]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.3",
        "geometry": {
          "type": "Point",
          "coordinates": [-746154.82706286, 7273335.72201827]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.4",
        "geometry": {
          "type": "Point",
          "coordinates": [-744607.30629421, 7255093.16775183]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.5",
        "geometry": {
          "type": "Point",
          "coordinates": [-745202.69041239, 7255413.35399374]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.6",
        "geometry": {
          "type": "Point",
          "coordinates": [-753889.58828371, 7266121.43420011]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.7",
        "geometry": {
          "type": "Point",
          "coordinates": [-753078.05077876, 7267405.03419487]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.8",
        "geometry": {
          "type": "Point",
          "coordinates": [-797828.64640079, 7249092.54222032]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.9",
        "geometry": {
          "type": "Point",
          "coordinates": [-753881.35356931, 7266025.39133859]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.10",
        "geometry": {
          "type": "Point",
          "coordinates": [-742327.05477715, 7302434.75328766]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.11",
        "geometry": {
          "type": "Point",
          "coordinates": [-750757.26468702, 7294103.95069428]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.12",
        "geometry": {
          "type": "Point",
          "coordinates": [-742442.85453496, 7302225.99299248]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.13",
        "geometry": {
          "type": "Point",
          "coordinates": [-750678.90941561, 7293250.62728349]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.14",
        "geometry": {
          "type": "Point",
          "coordinates": [-751029.88000637, 7293128.14558216]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.15",
        "geometry": {
          "type": "Point",
          "coordinates": [-750678.90941561, 7293250.62728349]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.16",
        "geometry": {
          "type": "Point",
          "coordinates": [-750757.26468702, 7294103.95069428]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.17",
        "geometry": {
          "type": "Point",
          "coordinates": [-743083.01564625, 7280176.20812626]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.18",
        "geometry": {
          "type": "Point",
          "coordinates": [-750837.75665786, 7294119.26420537]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.19",
        "geometry": {
          "type": "Point",
          "coordinates": [-750757.26468702, 7294103.95069428]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.20",
        "geometry": {
          "type": "Point",
          "coordinates": [-750790.13706862, 7294411.61511293]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.21",
        "geometry": {
          "type": "Point",
          "coordinates": [-751029.88000637, 7293128.14558216]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.22",
        "geometry": {
          "type": "Point",
          "coordinates": [-729059.04788702, 7288230.5536544]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, {
        "type": "Feature",
        "id": "FoodOutlets-MidUlst1.23",
        "geometry": {
          "type": "Point",
          "coordinates": [-771157.83824017, 7283468.51757007]
        },
        "geometry_name": "the_geom",
        "properties": {}
      }, ],
      "totalFeatures": 140,
      "numberMatched": 140,
      "numberReturned": 140,
      "timeStamp": "2021-03-02T05:15:46.157Z",
      "crs": {
        "type": "name",
        "properties": {
          "name": "urn:ogc:def:crs:EPSG::3857"
        }
      }
    };

    var format = new ol.format.GeoJSON();
    var features = format.readFeatures(json, {
      featureProjection: 'EPSG:3857'
    });

    var source = new ol.source.Vector(); // VectorSource();
    var parser = new jsts.io.OL3Parser();
    parser.inject(
      ol.geom.Point,
      ol.geom.LineString,
      ol.geom.LinearRing,
      ol.geom.Polygon,
      ol.geom.MultiPoint,
      ol.geom.MultiLineString,
      ol.geom.MultiPolygon
    );

    for (var i = 0; i < features.length; i++) {
      var feature = features[i];
      // convert the OpenLayers geometry to a JSTS geometry
      var jstsGeom = parser.read(feature.getGeometry());

      // create a buffer of 1 mile =1609 metres adjusted for the projection
      var buffered = jstsGeom.buffer(1609 / ol.proj.getPointResolution('EPSG:3857', 1, ol.extent.getCenter(feature.getGeometry().getExtent())));
      // create a buffer of 40 meters around each line
      // var buffered = jstsGeom.buffer(1000);

      // convert back from JSTS and replace the geometry on the feature
      feature.setGeometry(parser.write(buffered));
    }

    source.addFeatures(features);

    var vectorLayer = new ol.layer.Vector({ // VectorLayer({
      source: source,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          width: 3,
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.3)',
        }),
      }),
    });

    var rasterLayer = new ol.layer.Tile({ // TileLayer({
      source: new ol.source.OSM()
    });

    var map = new ol.Map({
      layers: [rasterLayer, vectorLayer],
      target: document.getElementById('map'),
      view: new ol.View({
        center: ol.proj.fromLonLat([126.979293, 37.528787]),
        zoom: 15,
      }),
    });
    map.getView().fit(source.getExtent());
  </script>
</body>

</html>
0
geocodezip 5 Мар 2021 в 22:09