我怎样才能上的OpenLayers-3

如何使用一个SVG图像作为层（所以不作为地图标记）与的OpenLayers-3我怎样才能上的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 
    }) 
});

我已经尝试过的伎俩与设置Content-type:到image/svg+xml但这并没有帮助我。

所以，再次：我如何（如果可能）使用OpenLayers-3的SVG图像？

来源

2015-12-22 Matthijs

我很好奇，你怎么会想使用SVG的不是静态图像等优点，？ – PSorey

嗯，对我的想法（如果我错了，请纠正我）我应该可以添加一个“可缩放”的SVG图层，所以即使放大图像也不会变得像素化并保持清晰。我们倾向于将它用于平面布局图，所以SVG（或者其他矢量格式）会很好。当然静态图像仍然可以使用，但是放大后总是会变得模糊不清。 – Matthijs

我自己也在跟OL3进行速度攀升，并一直在想SVG。我还需要在基础图层上绘制类似于CAD的矢量图，并且从我读过的评论中可能还不支持SVG？但是你可以使用Point，LineString和Polygon类型来制作一个可缩放的图层。我将尝试[ogr2ogr将DXF转换为GeoJSON。]（http://ogre.adc4gis.com/） – PSorey

您不能将ol.source.Vector用于svg文件，但OL3可以将svg文件显示为图像。

缩放时图像保持清晰。

我修改了官方static image example，并用svg文件替换了png文件。请参阅下面的可运行示例。

var extent = [0, 0, 512, 512]; 
 
var projection = new ol.proj.Projection({ 
 
    code: 'static-image', 
 
    units: 'pixels', 
 
    extent: extent 
 
}); 
 

 
var map = new ol.Map({ 
 
    layers: [ 
 
    new ol.layer.Image({ 
 
     source: new ol.source.ImageStatic({ 
 
     url: 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg', 
 
     projection: projection, 
 
     imageExtent: extent 
 
     }) 
 
    }) 
 
    ], 
 
    target: 'map', 
 
    view: new ol.View({ 
 
    projection: projection, 
 
    center: ol.extent.getCenter(extent), 
 
    zoom: 0 
 
    }) 
 
});

<script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script> 
 
<link href="http://openlayers.org/en/v3.14.2/css/ol.css" rel="stylesheet"/> 
 
<div id="map" class="map"></div>

来源

2016-03-23 16:33:16

嘿，阿尔文，很高兴再次见到你。 –

感谢您的回答。你知道如何应用SVG本身的样式（'style'属性），还可以说'onmousehover'事件吗？例如'' – fuzz

当我在静态图像上放置一个标记时，它被误放了。任何想法为什么会发生？ – Renjith

如今，，为打开图层4一个例子：

var svgComment = '<svg width="160" height="160" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" viewPort="0 0 160 160" class="svgClass">' 
 
    + '<circle cx="30" cy="30" r="10" stroke="rgb(0, 191, 255)" stroke-width="1" fill="none" opacity="0.8">' 
 
    + '<animate attributeType="CSS" attributeName="stroke-width" from="1" to="30" dur="0.5s" begin="0s" repeatCount="indefinite" />' 
 
    + '<animate attributeType="CSS" attributeName="opacity" from="0.8" to="0.2" dur="0.5s" begin="0s" repeatCount="indefinite" />' 
 
    + '</circle>' 
 
    + '<circle cx="30" cy="30" r="10" fill="rgba(0,0,0,0.8)">' 
 
    + '</circle>' 
 
    + '</svg>'; 
 

 

 
//Test SVG 
 
//var img = document.createElement('img'); 
 
//img.src=src; 
 
//document.body.append(img); 
 

 
var commentStyle = new ol.style.Style({ 
 
    image: new ol.style.Icon({ 
 
     src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgComment) 
 
    }) 
 
    }); 
 

 
var vectorSource = new ol.source.Vector({ 
 
    features: [ 
 
     new ol.Feature({ 
 
     geometry: new ol.geom.Point([0, 0]) 
 
     }) 
 
    ] 
 
}); 
 

 
var vectorLayer = new ol.layer.Vector({ 
 
    name: 'Comments', 
 
    style: commentStyle, 
 
    source: vectorSource 
 
}); 
 

 
//display the map 
 
var rasterLayer = new ol.layer.Tile({ 
 
    source: new ol.source.TileJSON({ 
 
    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure', 
 
    crossOrigin: '' 
 
    }) 
 
}); 
 

 
var map = new ol.Map({ 
 
    layers: [rasterLayer, vectorLayer], 
 
    target: document.getElementById('map'), 
 
    view: new ol.View({ 
 
    center: [0, 0], 
 
    zoom: 3 
 
    }) 
 
});

<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> 
 
<div id="map" class="map"></div>

看原帖：

https://stackoverflow.com/a/48232790/2797243

来源

2018-01-12 21:26:49

我怎样才能上的OpenLayers-3

回答

相关问题