gpt4 book ai didi

javascript - 如何在 Google map 上叠加 SVG 图表?

转载 作者:可可西里 更新时间:2023-11-01 01:18:35 25 4
gpt4 key购买 nike

我想在 Google map 上添加覆盖图。该图像是我生成的 SVG 文件(带有 SVGFig 的 Python)。

我正在使用以下代码:

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(48.8, 2.4), 12);

    // ground overlay
    var boundaries = new GLatLngBounds(new GLatLng(48.283188032632829, 1.9675270369830129), new GLatLng(49.187215000000002, 2.7771877478303999));
    var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(oldmap);
}

令人惊讶的是,它适用于 Safari 4,但不适用于 Firefox(使用 Safari 3,背景不透明)。

有人知道如何叠加 SVG 吗?

PS1:我读了一些像this这样的作品或swa.ethz.ch/googlemaps的源代码,但似乎他们必须使用JavaScript代码来解析SVG并将所有元素一一添加(但我没有理解所有源代码......)。

PS2:SVG 由不同的填充路径和圆圈组成,具有透明度。如果没有覆盖我的 SVG 的解决方案,我可以使用 2 个替代解决方案:

  • 栅格化 SVG
  • 在 GPolygons 中转换路径和圆

但我不太喜欢第一种解决方案,因为位图质量差,而且使用抗锯齿生成位图需要时间。

对于第二种解决方案,必须将圆弧、椭圆和圆分解为小的多段线。要获得良好的结果,他们中的很多人都是必需的。但是我要画大约 3000 个圆弧和圆圈,所以...

最佳答案

这里有一些消息(我希望最好将它们放在答案中,而不是编辑我的问题或创建一个新问题。如果需要请随意移动它,或者告诉我,以便我可以纠正):

我的问题如下:

var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addOverlay(oldmap);

不适用于 Safari 3、Firefox 和 Opera(IE 无法绘制 SVG)。

事实上,这段代码产生了以下元素的插入(在 <div> 中)

<img src="test.svg" style=".....">

Safari 4 能够将 SVG 文件绘制为图像,但这不是其他浏览器的方法。因此,现在的想法是为 SVG 创建自定义叠加层,如前所述 here .

这就是我要 this question 的原因(很抱歉,HTML/javascript 不是我的强项)。

并且由于 Webkit 存在一个小错误,用于使用 <object> 渲染具有透明背景的 SVG。元素,我需要使用 <object><img>根据浏览器(我不喜欢这样,但是......目前,它仍然是快速而肮脏的实验)

所以我从这段代码开始(仍在进行中):

// create the object
function myOverlay(SVGurl, bounds)
{
this.url_ = SVGurl;
this.bounds_ = bounds;
}

// prototype
myOverlay.prototype = new GOverlay();

// initialize
myOverlay.prototype.initialize = function(map)
{
// create the div
var div = document.createElement("div");
div.style.position = "absolute";
div.setAttribute('id',"SVGdiv");
div.setAttribute('width',"900px");
div.setAttribute('height',"900px");

// add it with the same z-index as the map
this.map_ = map;
this.div_ = div;

//create new svg root element and set attributes
var svgRoot;
if (BrowserDetect.browser=='Safari')
{
// Bug in webkit: with <objec> element, Safari put a white background... :-(
svgRoot = document.createElement("img");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px");
svgRoot.setAttribute("src", "test.svg");
}
else //if (BrowserDetect.browser=='Firefox')
{
svgRoot = document.createElement("object");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px;");
svgRoot.setAttribute("data", "test.svg");
}


div.appendChild(svgRoot);
map.getPane(G_MAP_MAP_PANE).appendChild(div);

//this.redraw(true);
}

...

draw函数还没写。

我还有一个问题(我进步很慢,感谢我到处阅读/学习的东西,也感谢那些回答我问题的人)。

现在,问题如下:使用 <object>标记, map 不可拖动。遍布<object>元素,鼠标指针不是拖动 map 的“手形图标”,而是普通指针。

而且我没有找到如何纠正这个问题。我是否应该添加一个新的鼠标事件(我只是在单击或双击追加时看到鼠标事件,而不是拖动 map ...)?

或者是否有另一种方法来添加此层以保持可拖动性?

感谢您的评论和回答。

PS:我也试着把我的SVG中的元素一个一个地添加进来,但是……其实……我不知道如何把它们添加到DOM树中。在 this example ,使用 GXml.parse() 读取和解析 SVG , 并获得具有给定标签名称的所有元素 ( xml.documentElement.getElementsByTagName ) 并添加到 SVG 节点 ( svgNode.appendChild(node) )。但在我的例子中,我需要直接添加 SVG/XML 树(添加它的所有元素),并且有不同的标签( <defs><g><circle><path> 等)。它可能更简单,但我不知道该怎么做.. :(

关于javascript - 如何在 Google map 上叠加 SVG 图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1055367/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com