我怎樣才能上的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

回答

相關問題