javascript - 如何绘制可与 OpenLayers 一起使用的多边形?

标签 javascript svg openlayers

我可以在 Inkscape 中使用多边形绘制自定义形状。我的目标是在美国 map 顶部的固定位置显示这些形状。 map 和多边形将显示在网页上,并且能够放大、缩小和平移。我想知道是否可以使用 OpenLayers 将这些多边形放置在这样的 map 上。如何?任何地方的例子?我对OpenLayers还不够熟悉,如果它能满足我的要求,我会进一步学习它。我需要以编程方式能够对服务器或客户端的每个形状进行颜色填充。我还想根据经/纬度坐标在 map 上放置标记。 OpenLayers 支持这一切吗?

这是我想要做的一个例子。橙色区域是在 Inkscape 中定义的,橙色可以通过编程设置为不同的颜色。这是一个显示在网页上的简单 svg 文件。

enter image description here

最佳答案

您应该能够将导出的 SVG 视为常规图像叠加层。 Here is the OpenLayers API for image overlayshere is another SO answer with a very basic image overlay example 。 OpenLayers 支持标记,但如果您将 SVG 作为平面图像嵌入,我不确定 OpenLayers 是否允许您开箱即用地设置 SVG 元素的样式...

顺便说一句,Polymaps是一个替代映射库,稍微更面向 SVG;它特别适合基于数据动态转换 SVG 图层、操作 SVG 元素的样式和类等。根据您的示例,here's their example用于非常简单地将图像(具有定义的右上角/左下角坐标)扔到 map 上。

关于javascript - 如何绘制可与 OpenLayers 一起使用的多边形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20112089/

相关文章:

html - SVG 仅在 Safari (v10) 中不呈现

javascript - 如何通过 OpenLayers 绘制一条动画线来说明两点之间的流动?

javascript - 寻找SVG的中心点坐标

javascript - 在函数中使用变量作为选择器

javascript - 当我在事件 "onbeforeunload"中进行异步 XMLHttpRequest 调用时,幕后会发生什么?

javascript - GAE - 区分具有相同 ip 的多个客户端

svg - 如果 mime-type 等于 text/xml,则显示 svg

gis - 从 OpenLayers 的新增功能中获取 LonLat

javascript - 如何使用 openlayers 在 ios 模拟器中绘制手绘多边形?

javascript - JSHint 返回奇怪的错误