标签: openlayers-3

我正试图在OpenLayers 3地图上添加制作者.

我发现的唯一的例子是这样一个的OpenLayers例子列表.

但这个例子使用ol.Style.Icon的像,而不是OpenLayers.Marker在OpenLayers 2.

第一个问题

唯一的区别是你必须设置图像Url,但它是添加标记的唯一方法吗？

OpenLayers 3似乎也没有标记图像,所以如果没有其他方法,这将是有道理的ol.Style.Icon

第二个问题

如果有人能给我一个在加载地图后添加标记或图标的功能示例,那将是非常好的.

根据我在示例中的理解,他们为图标创建了一个图层

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});


var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'data/icon.png'
  }))
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
  features: [iconFeature] …

我在OpenLayers 3中有JavaScript应用程序,我的基础层是从本地磁贴创建的.我只在我的电脑上工作所以我不知道为什么我有CORS错误.

    var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png'
    })
});
var schladming = [21.6187, 48.7327]; // longitude first, then latitude
// since we are using OSM, we have to transform the coordinates...
var schladmingWebMercator = ol.proj.fromLonLat(schladming);

var map = new ol.Map({
    layers: [
        newLayer
    ],
    controls: [],
    target: 'mapid',
    view: new ol.View({
        center: schladmingWebMercator,
        zoom: 10,
        minZoom: 10,
        maxZoom: 14
    })
});

控制台的错误消息:

CORS策略阻止了file:///E:/Maperitive/Tiles/vychod/10/573/352.png 从原点访问映像null:响应无效.null因此不允许原点访问.

当我双击图像URL时,图像被打开.有什么想法有什么不对？我之前从未遇到过这个错误.

OpenLayers 2有一个非常有用的map.zoomToExtent(extent)功能.OpenLayers 3中有类似的东西吗？我可以获得感兴趣的程度source.getExtent(),但我无法弄清楚如何将该范围应用为"缩放级别".

我有一个OpenLayers 3地图,带有基础层和矢量图层.

this.topoLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: style
});

var baseLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://[…]/{z}/{x}/{y}.png',
        crossOrigin: 'null'
    })
});

this.map = new ol.Map({
    target: 'map',
    layers: [baseLayer, this.topoLayer],
    view: new ol.View2D({
        center: ol.proj.transform([11.38,  48.54], this.options.markerEPSG, this.options.mapEPSG),
        zoom: 5,
    }),
});

在用户交互时,我向向量层添加和删除了几个要素.以下是添加新功能的功能:

  var feature = new ol.Feature({
        topo: topo,
        selected: false,
        geometry: new ol.geom.Point(ol.proj.transform(location, this.options.markerEPSG, this.options.mapEPSG)),
  });

  this.topoLayer.getSource().addFeatures([feature]);

添加/删除新功能后,我想自动缩放和平移地图以适应我的功能.在旧的OpenLayers API中getDataExtent,矢量图层上有一个函数可以检索显示的所有特征周围的"边界框".但我想知道如何使用新的API做到这一点.

我设法为从远程GeoJSON资源添加的要素图层添加交互性.当我点击某个功能时,我会获取其ID,在地图区域外的页面上触发AJAX请求并显示有关该功能的相关信息.

我用过Select互动.

我想让用户更清楚地知道他可以点击地图上的功能.当鼠标悬停在一个包含的功能时,有什么办法可以将鼠标光标改为"手"的"光标" ol.layer.Vector？

我在文档中,在本网站上或通过谷歌搜索找不到任何内容.

我需要在Open Layers 3中处理缩放事件.

以下是我的代码:

map_object = new ol.Map({
target: 'map',
controls: controls_list,
interactions: interactions_list,
overlays: [overlay],
layers: [OSM_raster, WFS_layer],
    view: view
});


map_object.on("Zoom", function() {
  console.log('Zooming...');
});

此代码运行时没有错误并显示一个映射,但没有输出到控制台,表明此功能未触发.

我也尝试过:

map_object.on("drag", function() {
  console.log('Dragging...');
});

这也没有做任何事情.

任何有关如何处理OL3中的地图控制事件的帮助将非常受欢迎(特别是缩放!).注意我已尝试'zoom'以及'zoom'作为on方法的type字段.

我正在唱OpenLayers 3来显示地图.我想使用latLon坐标使地图居中.我正在使用快速启动代码.使用此代码,我无法更改地图的中心.我认为这与此有关Spherical Mercator projection.唯一的问题是,我只有lat lon坐标.

有谁知道如何从openlayers v3中心地图？

我试图从我的矢量图层获取功能.矢量图层由Geoserver加载的GeoJSON文档组成.我尝试过vector.features但是徒劳无功.任何人都可以帮忙吗？

如何使用OpenLayers-3将SVG图像用作图层(而不是地图标记)

使用任何ol.source.Vector和ol.format.Feature实例时,我无法获得任何SVG图像输出.

小例子:

var mapLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'image.svg',
        format: new ol.format.Feature() // http://openlayers.org/en/v3.12.1/apidoc/ol.format.Feature.html
    }),
}); 

我在使用ImageStatic图层时能够获得输出,但这会使用/生成(？)静态图像,因此SVG的优势消失了.

例:

// Not sure if I need this for SVG, but is is required for an image
var extent = [0, 0, 1000, 1000]; // random image size
var projection = new ol.proj.Projection({
    code: 'test',
    units: 'pixels',
    extent: extent
});

var mapLayer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        url: 'image.svg',
        projection: projection,
        imageExtent: extent
    }) …

我需要在我的网络应用程序中使用一项功能来撤消最后一点.已经有一些解决方案,如这对于给定的问题,它可以处理它在一定程度上:

var undo = false; // set this to true in the Esc key handler
var draw = new ol.interaction.Draw({
// ...
geometryFunction: function(coords, geom) {
    if (!geom) {
        geom = new ol.geom.LineString(null);
    }
    if (undo) {
        if (coords.length > 1) {
            coords.pop();
        }
        undo = false;
    }
    geom.setCoordinates(coords);
    return geom;
    }
});

但似乎有一个我无法弄清楚的错误.

使用这个plunker你可以尝试我要解释的内容:

如果你绘制一条带有一些顶点的线然后撤消(点击ESC)直到线上的最后一个点被移除,然后在刚刚撤消的同一点完成(或接近足够),最后一段将被删除,为什么？

由数字解释:

1-绘制线要素

2-撤消最后(第三)点

3-在相同点处(或接近)完成线.

4 - 删除最后一个段.

我试了好几次就发生了.如果添加一个不接近移除的点或添加多个点,则不会发生这种情况.

编辑

似乎OL3检查几何的最后两个坐标,如果它们相同则决定完成绘图会话,并删除最后一个.我尝试了下面的代码:

function geometryChange(coordinates, geometry){
if (!geometry) {
    geometry = new ol.geom.LineString(null); …