首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

如何在Google地图上叠加SVG图表？

作者：wurtjq | 2023-08-24 08:28
如何解决《如何在Google地图上叠加SVG图表？》经验，为你挑选了2个好方法。

我想在Google地图上添加叠加图片.该图像是我生成的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:我喜欢读一些作品本或swa.ethz.ch/googlemaps的源代码,但似乎他们必须使用JavaScript代码来分析SVG并添加一个所有元素一个(但我没有理解所有来源...).

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

光栅化SVG

转换GPolygons中的路径和圆圈

但我真的不喜欢第一种解决方案,因为位图的质量很差,而且生成抗锯齿的时间也是如此.

对于第二种解决方案,弧,椭圆和圆必须分解成小的折线.为了取得好成绩,很多都是必要的.但是我有大约3000个圆弧和圆圈来绘制,所以......



1> ThibThib..：

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

我的问题如下:

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

没有在Safari 3,Firefox和Opera上运行(IE无法绘制SVG).

实际上,此代码生成

以下元素的插入(在a中)

Safari 4能够将SVG文件绘制为图像,但这不是其他浏览器的方法.所以,现在的想法是创建的SVG定制的叠加,如解释在这里.

这就是我问这个问题的原因(对不起,但HTML/javascript不是我最强的观点).

由于Webkit存在一个小错误,用于渲染具有透明背景和元素的SVG ,我需要使用或相应地使用浏览器(我不喜欢这个,但是...目前,它仍然是快速的 - - 实验)

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

// 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  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功能尚未编写.

我仍然有一个问题(我进展缓慢,感谢我在任何地方阅读/学习,也感谢回答我问题的人).

现在,问题如下:使用标记,地图不可拖动.在整个元素中,鼠标指针不是拖动地图的"手形图标",而只是普通指针.

我没有找到如何纠正这一点.我应该添加一个新的鼠标事件(我只是在点击或双击附加时看到鼠标事件,但不是用于拖动地图......)？

或者是否有另一种方法来添加此图层以保持拖动能力？

感谢您的意见和解答.

PS:我也尝试逐个添加SVG的元素,但实际上......我不知道如何在DOM树中添加它们.在此示例中,读取并解析SVG GXml.parse(),并获取具有给定标记名称的所有元素(xml.documentElement.getElementsByTagName)并将其添加到SVG节点(svgNode.appendChild(node)).但对我来说,我需要直接添加SVG/XML树(添加其所有元素),并有不同的标记(,,,,等).它可能更简单,但我不知道该怎么办.. :(



2> ThibThib..：

我在这个问题上度过了最后一个晚上,我终于找到了解决问题的方法.

这并不困难.

正如Chris B.所说,这个想法是用GDownloadUrl加载SVG文件,用GXml.parse()解析它,并在DOM树中添加我需要的每个SVG元素

为了简化,我认为所有SVG元素都放在一个名为"mainGroup"的大组中.我还假设某些元素可以在文件中.

这是基于Google地图自定义叠加层的库:

// create the object
function overlaySVG( svgUrl, bounds)
{
    this.svgUrl_ = svgUrl;
    this.bounds_ = bounds;
}


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


// initialize
overlaySVG.prototype.initialize = function( map)
{
    //create new div node 
    var svgDiv = document.createElement("div");
    svgDiv.setAttribute( "id", "svgDivison");
    //svgDiv.setAttribute( "style", "position:absolute");
    svgDiv.style.position = "absolute";
    svgDiv.style.top = 0;
    svgDiv.style.left = 0;
    svgDiv.style.height = 0;
    svgDiv.style.width = 0;
    map.getPane(G_MAP_MAP_PANE).appendChild(svgDiv);

    // create new svg element and set attributes
    var svgRoot = document.createElementNS( "http://www.w3.org/2000/svg", "svg");
    svgRoot.setAttribute( "id", "svgRoot");
    svgRoot.setAttribute( "width", "100%");
    svgRoot.setAttribute( "height","100%");
    svgDiv.appendChild( svgRoot);

    // load the SVG file
    GDownloadUrl( this.svgUrl_, function( data, responseCode)
    {
        var xml = GXml.parse(data);
        // specify the svg attributes
        svgRoot.setAttribute("viewBox", xml.documentElement.getAttribute("viewBox"));
        // append the defs
        var def = xml.documentElement.getElementsByTagName("defs");
        //for( var int=0; i


并且,您可以使用以下代码:



if (GBrowserIsCompatible())
{
    //load map
    map = new GMap2(document.getElementById("map"), G_NORMAL_MAP);
    // create overlay   
    var boundaries = new GLatLngBounds( new GLatLng(48.2831, 1.9675), new GLatLng(49.1872, 2.7774));
    map.addOverlay( new overlaySVG( "test.svg", boundaries ));
    //add control and set map center
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(48.8, 2.4), 12);
}   




因此,您可以完全按照使用该GGroundOverlay功能的方式使用它,除了您的SVG文件应该使用墨卡托投影创建(但如果您将其应用于小区域,例如一个城市或更小的区域,您将看不到差异).



这适用于Safari,Firefox和Opera.你可以在这里尝试我的小例子



告诉我你怎么看待它.

            

    


    


    

        
推荐阅读

        

            
        

    


    























    


    

        

            
            

                
                    devbox
                
            


            

                wurtjq            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章

        

            
        

    




    








    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有