标签: openlayers

我正在尝试在地图上的两点之间添加一条线。我有以下代码，但网页仅显示底图，没有我想要的线条。

如何将此线添加到 OpenLayers 地图？

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([ -95.36,29.75]),
      zoom: 10
    })
  });
    var coords = [[-95.36,29.75], [-96.36,30.75]];
    var lineString = new ol.geom.LineString(coords);
    // transform to EPSG:3857
    lineString.transform('EPSG:4326', 'EPSG:3857');

    // create the feature
    var feature = new ol.Feature({
        geometry: lineString,
        name: 'Line'
    });

    var lineStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 10
        })
    });

    var raster = new ol.layer.Tile({
      source: …

我有一个 EPSG:3857 格式的坐标，需要将其转换为 EPSG:4326。对于转换，我使用 geotools。当查找我能找到的每个示例时，但我似乎得到了一个在任何地方都没有解释的异常。

这是我尝试做的事情。

    private CoordinateReferenceSystem sourceCRS;
    private CoordinateReferenceSystem targetCRS;

private GeoCoordinate transform(GeoCoordinate geoCoordinate)
    throws FactoryException,
    TransformException {
    CRSAuthorityFactory factory = CRS.getAuthorityFactory(true);
    this.sourceCRS = factory.createCoordinateReferenceSystem("EPSG:3857");
    this.targetCRS = factory.createCoordinateReferenceSystem("EPSG:4326");

    // Or i try to use the CRS directly, that does not change anything

    // this.targetCRS = CRS.decode("EPSG:4326");
    // this.sourceCRS = CRS.decode("EPSG:3857");

    MathTransform transform = CRS.findMathTransform(this.sourceCRS, this.targetCRS, false);
    GeometryFactory geometryFactory = new GeometryFactory(new PrecisionModel(), 4326);
    Point point =
        geometryFactory.createPoint(new Coordinate(geoCoordinate.getLongitude(), geoCoordinate.getLatitude()));
    Point targetPoint = (Point) JTS.transform(point, transform);
    return new GeoCoordinate(targetPoint.getX(), …

我在我的项目中使用 openlayers 6。地图上的图层根据缩放级别隐藏/显示。

这是地图和视图定义：

view = new View({
    center: mapCenter,
    projection: israeliTM.getCode(),
    zoom: 0,
    resolutions: resolutions // resolutions array 
});

map = new Map({
    layers: layers,
    target: 'map',
    view: view
});

当缩放更改时会触发此行：

var curRes = map.getView().getResolution()[map.getView().getZoom()];

正如您在定义为数组的视图定义分辨率中看到的，当缩放更改时，我希望从这个map.getView().getZoom()整数中获取显示分辨率数组中的索引并返回当前分辨率。一般来说，它按预期工作，但有时 map.getView().getZoom()会返回十进制数，例如 3.56989。

知道为什么map.getView().getZoom()返回一些小数时间吗？

我需要在 openlayer 地图上添加多个（例如 20 个）标记。
现在我能够做到这一点，但我确信这不是更有效的方法。

这是我在网上找到的代码：

var addressOSM = new ol.Map({
    controls: null,
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([lng, lat]),
        zoom: 15
    })
});

要添加标记，我使用以下代码：

for (let i = 0; i < data.length; i++) {
    addressOSM.addLayer(createMarker(data[i].longitude, data[i].latitude, data[i].id)));
}

其createMarker功能是：

function createMarker(lng, lat, id) {
    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(lng), parseFloat(lat)])),
                id: id
            })]
        }),
        style: new ol.style.Style({ …

我有一个地图表示形式，我想添加一个基于 GEOJSON 的图层，但我不想直接从 GEOJSON 文件读取它，而是有一个包含我需要的确切 GEOJSON 字符串的变量，可以从变量而不是 url 加载它吗？

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
                  title: 'bikesRented',
                  source: new ol.source.Vector({
                     url: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                     format: new ol.format.GeoJSON()
                  }),
                  style: bikeStyle2
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([11.341868,44.494949]),
        zoom: 14
    })
});

有没有办法在Flex上使用OpenLayers？到目前为止,我已经找到了Open-Scales项目,但它正处于开发阶段(功能不全).

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Drag Feature Example</title>

        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <style type="text/css">
            #controls {
                width: 512px;
            }
            #controlToggle {
                padding-left: 1em;
            }
            #controlToggle li {
                list-style: none;
            }
        </style>

        <script src="../OpenLayers.js"></script>
        <script type="text/javascript">
            var map, vectors, controls;
            function init(){
                map = new OpenLayers.Map('map');
                var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

                vectors = new OpenLayers.Layer.Vector("Vector Layer");

                map.addLayers([wms, vectors]);
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new …

我知道如何在视图中的地图(openlayers地图)中显示地理数据,但我不知道如何在节点页面中显示它,任何人都可以帮我解决？

谢谢!

我正在尝试将 OpenLayers 与 Angular 5 一起使用。我正在测试实现地图的不同方法，我已经在简单的 HTML 文件中测试了 Leaflet 和 OpenLayers，并且我选择使用 OpenLayers，这在我的情况下效率更高。

使用这张地图，我想在不同的图层之间切换（使用 ol-layerswitcher），根据 GeoJSON 文件放置标记并显示弹出窗口。所有这些功能在我的 HTML 文件中运行良好，现在，我想用 Angular 5（而不是 angular-openlayers-directive）做同样的事情！

我已经在我的 app.component.ts 文件中调整了我在 Angular 中的 HTML 代码，标记根据我的 GeoJSON 文件显示，我的图层切换器也是，但我有两个函数的问题：forEachFeatureatPixel 和 getEventPixel ...

这是我的 src/app/app.component.ts ：

import { Component, OnInit } from '@angular/core';

import OlMap from 'ol/map';
import OlWMS from 'ol/source/tilewms';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import olProj from 'ol/proj';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import Point from 'ol/geom/point';
import Style from 'ol/style/style';
import …

我正在用Angular用OpenLayers编程一个地图应用程序，我想在复选框上添加一些事件。我创建了带有两个菜单复选框的mat-button。

所有地图组件都在app.component.ts文件中，而带有复选框的菜单创建了一个app.component.html文件。

app.component.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>

    <body>

      <div class="header">
          <mat-toolbar>OpenLayers</mat-toolbar>

          <div class="menu">
              <button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
              <mat-menu #menu="matMenu">
                <input type="checkbox" id="piscine" name="piscine" value="piscine">
                <label for="subscribeNews">Piscines</label>
                <br>
                <input type="checkbox" id="piscine" name="piscine" value="piscine">
                <label for="subscribeNews">Parkings</label>
              </mat-menu>
          </div>
      </div>

      <div id="map" class="map"></div>
          <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
          </div>
    </body>
</html>

在我的app.component.ts中，我有这段代码来检索复选框状态，但这不起作用（此代码在简单的HTML文件中有效）

app.component.ts：（提取）

$('#piscine').on('change', function() {
    var isChecked = $(this).is(':checked');
    if (isChecked) {
      this.map.addControl(this.vectorLayer_Piscine);
      this.vectorLayer_Piscine.setStyle(piscine);
      this.map.addOverlay(popup);
    } else …