主页 / coding / 问题

问题[openlayers](coding)

Martin Hope
semihher
Asked: 2025-02-04 19:40:43 +0800 CST
  • 5

如果该点是某个群集的一部分（即它具有多个特征），我想显示特征的数量。我以前是这样做的VectorLayer：

const clusterSource = new Cluster({
  distance: 50,
  minDistance: 10,
  source: source,
});

const noClusterStyle = new Style({
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({
      color: '#ffcc33',
    }),
  }),
});

const clusterStyle = new Style({
  text: new Text({
    fill: new Fill({
      color: '#fff',
    }),
  }),
})

const vectorLayer = new VectorLayer({
  source: clusterSource,
  style: function (feature) {
    const size = feature.get('features').length;
    if (size > 1) {
      clusterStyle.getText().setText(size.toString());
      return clusterStyle;
    }
    return noClusterStyle;
  },
});

现在我想使用 aWebGLVectorLayer代替VectorLayer，但是它的样式必须是FlatStyleLike。

我尝试了以下操作：

import WebGLVectorLayer from 'ol/layer/WebGLVector';

const generateTextLabel = (featuresAmount) => {
  return (
    `<svg width="10" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <text x="0" y="18" fill="white" font-size="16">${featuresAmount}</text>
    </svg>`
  )
}

const flatLikeStyle = [
  {
    style: {
      'shape-fill-color': 'black',
      'shape-points': 4,
      'shape-radius': 10,
    }
  },
  {
    filter: ['>', ['get', 'features'], 1],
    style: {
      'icon-src': 'data:image/svg+xml;utf8,' + generateTextLabel(0),
    },
  },
]

const webglVectorLayer = new WebGLVectorLayer({
  source: clusterSource,
  style: flatLikeStyle
})

但我不知道如何让过滤器根据特征的大小工作。我也不知道如何将特征的数量传递给函数generateTextLabel()。

openlayers
Martin Hope
MacW
Asked: 2024-12-27 01:10:03 +0800 CST
  • 5

我正在使用 OpenLayers 6.11 这个小项目多年来成功访问 OpenStreetMap、CyclOSM、Bing 和 HERE Maps。

最近，一些用户报告说他们无法使用 HERE 地图。我尝试时它运行正常。然后我发现有问题的用户最近获得了 HERE 地图 API 密钥。

于是我获得了一个新的 API 密钥，而事实上，HERE Maps 不再在 OpenLayers 中工作。对于每个图块请求，HERE 都会返回 HTTP 429 Too Many Requests。切换回我的旧 API 密钥后，一切又恢复正常。

有人遇到过这种情况吗？是不是因为我使用的是旧版本的 OpenLayers（6.11）？

我使用端点

https://{1-4}.${ld.base}.maps.api.here.com/${ld.type}/2.1/maptile/newest/

官方 OpenLayers 示例也使用了它。ld.base 和 ld.type 动态选择地图类型。

我希望 OpenLayers 能够与 HERE Maps 一起工作，无论 API 密钥的生成时间如何。

openlayers
Martin Hope
Tamas Ferenci
Asked: 2024-12-15 21:22:14 +0800 CST
  • 5

是否有可能在 Openlayers 中获取 XYZ 源的中心（或范围）？（我不是说获取视图的中心，而是获取源本身定义的地图的中心。）确实VectorSource有一个getExtent函数，但不幸的是 XYZ 没有这样的方法。

不幸的是，使用source.getTileGrid().getExtent()似乎不起作用；这是一个最小的可重现的例子：

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
</head>
<body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        const src = new ol.source.XYZ({
            url: 'https://s3.eu-central-1.amazonaws.com/old-maps/the-hague-1944/tiles/{z}/{x}/{y}.jpg'
        })
        const ext = src.getTileGrid().getExtent();
        console.log(ext);
    </script>
</body>
</html>

（我用的是这张地图。）

返回的结果[-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]好像中心是 [0, 0, 0, 0]。当然事实并非如此，如果我使用不同的地图，结果将是完全相同的范围。

openlayers
Martin Hope
pileup
Asked: 2024-09-04 02:07:14 +0800 CST
  • 5

我按照这个例子创建了一个带有圆形标记点的简单地图：https://openlayers.org/en/latest/examples/icon-color.html

这是我当前的代码：

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Point from 'ol/geom/Point.js';
import View from 'ol/View.js';
import {Icon, Style} from 'ol/style.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';

const rome = new Feature({
  geometry: new Point(fromLonLat([12.5, 41.9])),
});

rome.setStyle(
  new Style({
    image: new Icon({
      color: '#BADA55',
      crossOrigin: 'anonymous',
      src: 'data/dot.svg',
    }),
  }),
);

const vectorSource = new VectorSource({
  features: [rome],
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

const tileLayer = new TileLayer({
  source: new OSM()
});

const map = new Map({
  layers: [tileLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: fromLonLat([2.896372, 44.6024]),
    zoom: 3,
  }),
});

现在我希望能够单击该点并根据新的经度和纬度将其位置更改为新点。

我已经在文档中查找了 Point：https://openlayers.org/en/latest/apidoc/module-ol_geom_Point-Point.html

但它们确实令人困惑，我找不到使上述点可点击并移动到新位置的方法（在这种情况下，我只想根据固定的经度和纬度将其移动到附近的位置）

这些文档真的很混乱

openlayers
Martin Hope
Jose Gómez
Asked: 2024-08-01 21:25:45 +0800 CST
  • 5

最新的 Openlayers 文档指出，tileUrlFunction 在 XYZ 源中已弃用。我尝试使用 tileLoadFunction 迁移到 TileImage，但什么都没有显示。

旧版本正常运行：

Number.prototype.mod = function (n) {
    return ((this%n)+n)%n;
};

var mylayer = new TileLayer({
    source: new XYZ({
        tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            console.log("tileUrlFunction invoked");
            if (tileCoord === null) {
                return undefined;
            }

            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            var zfactor = Math.pow(2, z);
            const url = "https://tile.openstreetmap.org/" + z + "/" + x.mod(zfactor) + "/" + y.mod(zfactor) + ".png";
            return url;
        },
        tileSize: 256,
        minZoom: 0,
        maxZoom: 19,
        attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    })
});

这不起作用（tileLoadFunction从未被调用）：

Number.prototype.mod = function (n) {
    return ((this%n)+n)%n;
};

var mylayer = new TileLayer({
    source: new TileImage({
        tileGrid: createXYZ({
            tileSize: 256, // Standard tile size for OpenStreetMap
            minZoom: 0,
            maxZoom: 19, // OpenStreetMap supports zoom levels 0-19
        }),
        tileLoadFunction: function (imageTile, src) {
            console.log("tileLoadFunction invoked");
            const tileCoord = imageTile.getTileCoord();
            if (!tileCoord) {
                console.log("Tile coordinate is null");
                imageTile.getImage().src = ''; // Handle undefined tile coordinate
                return;
            }

            const z = tileCoord[0];
            const x = tileCoord[1];
            const y = tileCoord[2];
            const zfactor = Math.pow(2, z);
            const url = "https://tile.openstreetmap.org/" + z + "/" + x.mod(zfactor) + "/" + y.mod(zfactor) + ".png";

            console.log("Loading URL for coordinates - " + z + "," + x + "," + y + " --> " + url);
            imageTile.getImage().src = url;
        },
        attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }),
});

JSFiddle：https://jsfiddle.net/yertp50n/

openlayers
Martin Hope
hansmei
Asked: 2023-09-17 04:25:29 +0800 CST
  • 5

我希望能够修改 Openlayers 中由多个子多边形组成的多多边形。我已经激活了标准的修改交互，并且在拖动线上时拖动两个顶点并创建新的线段效果很好。但在编辑操作上似乎不一致。

这种行为是非常不合理的。对于某些顶点，它将拖动所有连接的顶点（所需的行为），如下所示： 期望的行为

对于其他位置，它只会拖动一些顶点，而不是所有顶点： 不良行为

当拖动以添加新段时，它不会（总是，但有时）修改两个子实体： 插入新顶点

这是重现意外行为的代码：

var multiPolygon = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "id": "1.1"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              1193836.0495014254,
              8383930.129123866
            ],
            [
              1193847.7380479588,
              8383914.044627354
            ],
            [
              1193861.7086440534,
              8383894.250081073
            ],
            [
              1193873.9649199897,
              8383877.232589948
            ],
            [
              1193883.717211206,
              8383863.628916129
            ],
            [
              1193894.5047360454,
              8383944.666907605
            ],
            [
              1193881.5012495161,
              8383963.164657038
            ],
            [
              1193860.4841296545,
              8383947.813224077
            ],
            [
              1193843.674886545,
              8383935.594306091
            ],
            [
              1193836.0495014254,
              8383930.129123866
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "2.1"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              1193883.717211206,
              8383863.628916128
            ],
            [
              1193889.0153151448,
              8383856.238480768
            ],
            [
              1193890.5403921688,
              8383857.260414857
            ],
            [
              1193909.1752749276,
              8383870.745514915
            ],
            [
              1193929.301838863,
              8383884.8526888145
            ],
            [
              1193934.6451744211,
              8383888.740497403
            ],
            [
              1193929.168255474,
              8383896.316176012
            ],
            [
              1193903.787411573,
              8383931.462094758
            ],
            [
              1193894.5047360454,
              8383944.666907605
            ],
            [
              1193883.717211206,
              8383863.628916128
            ]
          ]
        ]
      }
    }
  ]
}

const styleFunction = () => {
  const style = [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(0,0,255,0.4)',
        width: 2,
      }),
      fill: new ol.style.Fill({
        color: `rgba(0,0,255,0.2)`,
      }),
    }),
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 3,
        fill: new ol.style.Fill({
          color: 'rgba(0,0,255,0.4)',
        }),
      }),
      geometry: function(feature) {
        // return the coordinates of the first ring of the polygon
        const type = feature.getGeometry().getType();
        let coordinates;
        if (type === 'Polygon') {
          coordinates = feature.getGeometry().getCoordinates()[0];
        } else if (type === 'MultiPolygon') {
          const coordArray = feature.getGeometry().getCoordinates();
          coordinates = [];
          coordArray.forEach((ring) => {
            coordinates.push(...ring[0]);
          });
        }
        return new ol.geom.MultiPoint(coordinates);
      },
    }),
  ];
  return style;
};

var multiPolygonFeatures = new ol.format.GeoJSON().readFeatures(multiPolygon);
var vectorSource = new ol.source.Vector({
  features: multiPolygonFeatures,
});

var viewCenter = [1193887, 8383870];
var view = new ol.View({
  projection: 'EPSG:3857',
  center: viewCenter,
  zoom: 18,
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: vectorSource,
      style: styleFunction
    })
  ],
  target: 'map',
  view: view,
});


const modify = new ol.interaction.Modify({
  source: vectorSource
});
map.addInteraction(modify);
html,
body,
.map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.ol-dragbox {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(100, 150, 0, 1);
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<div id="map" class="map"></div>

openlayers