标签: openlayers-5

我正在尝试为某些碰巧导入一两个 openlayers 模块的模块编写一些测试。但正如其他一些人发现的那样（此处、此处和此处），这并不是开箱即用的。这是我尝试过的：

• 重命名.babelrc并babel.config.js导出配置
• 添加transformIgnorePatterns到我的jest.config.js

我现在只是不知道如何解决这个问题。

我在用着：

• 非 CRA webpack 配置
• 玩笑 v23.6.0
• 巴别尔核心 6.26.3
• 打字稿 3.1.3
• ts-玩笑 22.4.6

这是我的配置：

笑话：

module.exports = {
  setupFiles: [
    "./testConfig/test-shim.js",
    "./testConfig/test-setup.js"
  ],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  transformIgnorePatterns: [
    "/node_modules/(?!(ol)/).*/",
    "node_modules/(?!(ol)/)",
  ],
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx|tsx?)$",
  moduleNameMapper: {
    "^(Controllers|Api|Utilities)/(.*)$": "<rootDir>Scripts/$1/$2"
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  coverageReporters: ["text", "text-summary", "html"],
  coverageDirectory: "testConfig/coverageReport",
  collectCoverageFrom: ["**/Scripts/{App,Controllers,Utilities,Localization,EntryPoints}/**/*.{ts,tsx}"],
  coverageThreshold: {
    global: {
      branches: 0, …

我正在尝试制作一个应用程序，用户可以在其中对扫描地图进行地理配准。您可以在此处查看示例： https: //codesandbox.io/s/2o99jvrnyy 有两个图像：

• asset/test.png - 不旋转
• asset/test_rotation.png - 带旋转

第一个图像已正确加载到地图上，但旋转的图像则不然。

我找不到有关 OpenLayers 5 是否可以处理具有存储在 world file 中的变换参数的图像的信息。可能我错过了一些东西，但不知道是什么。

我的逻辑是这样的：

使用 4 个点通过仿射变换计算变换参数。您可以在Affine.js文件中看到逻辑。从源图像和地图中至少选取 4 个点。然后使用这 4 个点计算变换参数。之后我计算图像的范围：

width = image.width in pixels
height = image.height in pixels
width *= Math.sqrt(Math.pow(parameters.A, 2) + Math.pow(parameters.D, 2));
height *= Math.sqrt(Math.pow(parameters.B, 2) + Math.pow(parameters.E, 2));

// then the extent in projection units is
extent = [parameters.C, parameters.F - height, parameters.C + width, parameters.F];

世界文件参数按照此处的定义进行计算。

问题可能是在 OpenLayers 5 中作为静态图像加载时，带有旋转的图像不会旋转，但找不到方法来做到这一点。

我尝试使用计算的参数在 QGIS 和 …

我正在尝试升级到 OpenLayers v5.2.0，但我看不到有一条清晰的路径可以将圆绘制为多边形（我需要它，以便我可以将其存储在我们的数据库中）

这就是我正在做的...

if (webMapValues.activeDrawControl == "Circle") {
    var wgs84Sphere = new ol.Sphere(6378138);
    webMapValues.drawObj = new ol.interaction.Draw({
        features: webMapValues.features,
        type: /** @type {ol.geom.GeometryType} */ (webMapValues.drawType),
        geometryFunction: function (coordinates, geometry) {
            if (!geometry) {
                geometry = new ol.geom.Polygon(null);
            }
            var center = coordinates[0];
            var last = coordinates[1];
            var dx = center[0] - last[0];
            var dy = center[1] - last[1];
            var radius = Math.sqrt(dx * dx + dy * dy);
            var circle = ol.geom.Polygon.circular(wgs84Sphere, ol.proj.toLonLat(center), radius);
            circle.transform('EPSG:4326', 'EPSG:3857');
            geometry.setCoordinates(circle.getCoordinates());
            return geometry; …

当我在 Openlayers 中加载超过 500 个矢量特征时，平板电脑和手机上的性能会严重下降。我的解决方案是清除地图moveend事件的来源。这可行，但会导致恼人的闪烁，大概是在清除和重新加载源之间。

早期针对此“闪烁”的解决方案不再起作用，它会导致对 WFS 的递归调用。

这是我当前的代码：

import {GeoJSON} from 'ol/format';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import VectorSource from 'ol/source/Vector.js';
import VectorLayer from 'ol/layer/Vector';

var vectorSource = new VectorSource({
 format: new GeoJSON({ dataProjection: layerProjection }),
 loader: function(extent, resolution, projection) {
   var proj = projection.getCode();
   var url = 'https://xxx.xxx/geoserver/wfs?service=WFS' +
     '&version=1.1.0&request=GetFeature&typename=' + layer + 
     '&maxFeatures=200&outputFormat=application/json&srsname=' + proj +
     '&bbox=' + extent.join(',') + ',' + proj;
   var xhr = new XMLHttpRequest();
   xhr.open('GET', url);
   var onError = …

我正在为项目使用OpenLayers 5，但在这里找不到任何东西。过去，OpenLayers曾经有过restrictExtent，但是似乎已经消失了。有没有办法限制或限制用户垂直平移的能力，以使他们不能将其拖离屏幕？

我尝试maxExtent在包含地图和视图的图层上同时使用，并且通过在视图上进行操作来限制可见的内容。但是，我无法限制平移。任何帮助都会很棒。

map.js

componentDidMount() {
        BASE_VIEW.setMinZoom(this.getMinZoom());
        this.resize();
        this.map = new Map({
            controls: defaultControls().extend([MOUSE_POSITION_CONTROL]),
            layers: [BASE_LAYER],
            target: 'map',
            view: BASE_VIEW
        });
    }

map-constants.js

const baseView = new View({
    center: fromLonLat(conus, projection),
    projection: projection,
    zoom: 4,
    extent: [Number.NEGATIVE_INFINITY, -43, Number.POSITIVE_INFINITY, 43]
});

我正在使用 AGM（Angular Google Maps）和 OpenLayers。

我需要以编程方式设置我的 AGM 的缩放，但一直无法弄清楚它是如何工作的。

HTML 地图...

<div id="mapWrap" class="mapWrap" style="padding: 0px; width: 100%; height: 
100%; text-align: left">

  <agm-map  
    [latitude]="lat" 
    [longitude]="lng"
    [zoom]="currZoom" 
    [mapTypeId]="mapType" 
    [mapTypeControl]="mapControls" 
    [zoomControl]="mapControls" 
    [streetViewControl]="mapControls" 
  ></agm-map>

  <div id="map" class="map" style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: absolute; opacity: 0.5"></div>
</div>

组件代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';
import { GoogleMap } from '@agm/core/services/google-maps-types';

import olMap from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import OSM …

我刚刚开始在我的angular 6中使用openlayers 5，并且按照本教程进行操作，同时也在研究这个SO问题。我的角度分量现在有

import ol-map from 'ol/map';
import ol-xyz from 'ol/source/xyz';
import ol-tile from 'ol/layer/tile';
import ol-view from 'ol/View';
import * as ol-proj from 'ol/proj';

在我班上

 olmap: ol-map;
 source: ol-xyz;
 layer: ol-tile;
 view: ol-view;

然后在我的 ngOnInit

this.source = new ol-xyz({
  url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
});

this.layer = new ol-tile({
  source: this.source
});

this.view = new ol-view({
  center: ol-proj.fromLonLat([6.661594, 50.433237]),
  zoom: 3,
});

this.olmap = new ol-map({
  target: 'map',
  layers: [this.layer],
  view: this.view
});

这可行，但我不了解openlayers的样式。我将缩放按钮作为简单，无样式的按钮放在地图下面div。我在这里想念什么？如何插入opelayers CSS样式？

谢谢

我使用 OpenLayers 5.3 对标记标记进行了一些研究。不幸的是，我没有让文本起作用。我将文本插入到特征对象中。带有图像的标记是可见的并且按预期工作，但它不显示任何文本。

这是我的代码：

var map;
var view;
var vectorSource;
var vectorLayer;
var ownMarker = null;

function drawMap() {

  var coordinate = [13.4, 52.5077286];
  vectorSource = new ol.source.Vector({});
  vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });
  view = new ol.View({
    center: ol.proj.fromLonLat(coordinate),
    zoom: 12,
    maxZoom: 17,
    minZoom: 7
  });
  map = new ol.Map({
    layers: [new ol.layer.Tile({
      source: new ol.source.OSM()
    }), vectorLayer, ],
    target: document.getElementById('map'),
    controls: ol.control.defaults(),
    view: view
  });

  var marker;
  this.setOwnMarker = function(coordinate) {
    marker = new ol.Feature(
      new …

我正在使用开放层库版本 5。我需要标记上的 onClick 事件来执行一些业务逻辑。任何人都可以帮我解决这个问题，谢谢。我已经尝试了所有代码和片段。我正在使用这个库来响应js。

import Feature from "ol/Feature";
  import point from "ol/geom/Point"
  import Style from "ol/style/Style";
  import Icon from "ol/style/Icon";

renderMap = (lat = 24.8856802, lng = 67.0830459) => {
    console.log(lat, lng);
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: fromLonLat([lng, lat]),
        zoom: 17,

      })
    });


    this.makeMarker(24.8856802, 67.0830459, 0);


  }
//here is my marker function 
makeMarker = (lat, lng, index) => {
    let marker = new Feature({
      geometry: new …

使用 openlayers 5，我遇到一个问题：删除几何图形后，它仍然保留在地图上 - 似乎地图未正确更新。有没有办法强制更新/刷新地图及其功能？在文档中找不到与此相关的任何内容。

尝试使用map.render()但这似乎也不起作用。

调用.getFeatures()我的 VectorSource 对象显示该几何图形/对象不在功能列表中，但它仍然出现在我页面的地图上。