时间戳

首页 > 解决方案 > 用于 SVG 图像的 OpenLayers

javascript - 用于 SVG 图像的 OpenLayers

问题描述

对于我的网页，我想要一个可以使用类似于 Google-Maps 的拖动事件和滚动事件进行导航的图像。我没有自己实现它，而是尝试使用 OpenLayers 来实现它，我想使用这个图像而不是地图。我已经阅读了 stackoverflow 中的其他示例，但我仍在努力理解如何将图像作为第一层传递。目前我尝试执行以下操作：

testOL(content: string) {
// content is the svg as string
this.map = new Map({
  target: 'imageArea',
  layers: [
    new Image({
      source: new ImageStatic({
        src: content,
      })
    })
  ] ,view : new View({
    center: [0,0],
    zoom: 1
  }) 
})
}

目标只是一个没有任何内容的 div。

我已经尝试通过将 url 传递给 svg 作为图像源来尝试它，并且我已经尝试在地图中添加投影和视图，但这一切都不起作用。如果有人可以帮助我解决这个问题，我会很高兴

标签： javascriptangulartypescriptopenlayers

解决方案

src不是正确的选项名称，它应该是url，并且它的值应该是一个数据 url。 ImageStatic还需要imageExtent在投影坐标中指定。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
</head>
<body>
<div id="imageArea" class="map"></div> 
<script>

const content =
'<?xml version="1.0" encoding="UTF-8" standalone="no"?>' +
'<svg' +
'   xmlns:dc="http://purl.org/dc/elements/1.1/"' +
'   xmlns:cc="http://creativecommons.org/ns#"' +
'   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"' +
'   xmlns:svg="http://www.w3.org/2000/svg"' +
'   xmlns="http://www.w3.org/2000/svg"' +
'   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"' +
'   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"' +
'   width="20"' +
'   height="20"' +
'   version="1.1"' +
'   id="svg6"' +
'   sodipodi:docname="dot.svg"' +
'   inkscape:version="0.92.3 (2405546, 2018-03-11)">' +
'  <metadata' +
'     id="metadata12">' +
'    <rdf:RDF>' +
'      <cc:Work' +
'         rdf:about="">' +
'        <dc:format>image/svg+xml</dc:format>' +
'        <dc:type' +
'           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />' +
'        <dc:title></dc:title>' +
'      </cc:Work>' +
'    </rdf:RDF>' +
'  </metadata>' +
'  <defs' +
'     id="defs10" />' +
'  <sodipodi:namedview' +
'     pagecolor="#ffffff"' +
'     bordercolor="#666666"' +
'     borderopacity="1"' +
'     objecttolerance="10"' +
'     gridtolerance="10"' +
'     guidetolerance="10"' +
'     inkscape:pageopacity="0"' +
'     inkscape:pageshadow="2"' +
'     inkscape:window-width="1533"' +
'     inkscape:window-height="845"' +
'     id="namedview8"' +
'     showgrid="false"' +
'     inkscape:zoom="11.8"' +
'     inkscape:cx="-35.042373"' +
'     inkscape:cy="11.5"' +
'     inkscape:window-x="67"' +
'     inkscape:window-y="102"' +
'     inkscape:window-maximized="1"' +
'     inkscape:current-layer="g4"' +
'     fit-margin-top="0"' +
'     fit-margin-left="0"' +
'     fit-margin-right="0"' +
'     fit-margin-bottom="0" />' +

'  <g' +
'     id="g4"' +
'     transform="translate(1.5,-1.5)">' +
'    <circle' +
'       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"' +
'       id="path822"' +
'       cx="8.5"' +
'       cy="11.5"' +
'       r="8.5"' +
'       inkscape:export-xdpi="400"' +
'       inkscape:export-ydpi="400" />' +
'  </g>' +
'</svg>'

const map = new ol.Map({
  target: 'imageArea',
  layers: [
    new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'data:image/svg+xml,' + encodeURIComponent(content),
        imageExtent: [0, 0, 5e6, 5e6],
      })
    })
  ] ,view : new ol.View({
    center: [0, 0],
    zoom: 1,
  }) 
});

   </script>
</body>
</html>

推荐阅读