个人中心
gpt4 book ai didi

javascript - D3 和​​ Leaflet - svg 圆圈不显示

转载 作者：行者123 更新时间：2023-11-28 15:12:27 25 4
gpt4 key购买 nike

我正在尝试在 map 背景上绘制 SVG 圆圈，但是当它们出现在元素中时(使用 Chrome 开发工具)它们没有显示在页面上。我在这里缺少什么，为什么它们被隐藏了？

我已经尝试更改 map 和圆的填充、不透明度，但我无法弄清楚为什么它没有呈现？

我的代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Leaflet and D3 map</title>
                <link rel="stylesheet" href="../leaflet.css" />
                <script type="text/javascript" src="../leaflet.js"></script>
        <script type="text/javascript" src="../d3.js"></script>
                <style type="text/css">

                    #map{
                        width: 700px;
                        height: 600px;
                    }

                </style>
    </head>
    <body>
            <div id="map"></div>


        <script type="text/javascript">

                        //
                        // LOAD THE MAP FROM MAPBOX & LEAFLET
                        //
                        var map = L.map("map").setView([50.0755,14.4378], 12);

                        mapLink = '<a href="http://www.mapbox.com">Mapbox</a>';
                        L.tileLayer (
                            "link to mapbox",{
                                attribution:"&copy; " + mapLink + " Contributors",
                                maxZoom:20,
                        }).addTo(map);

                        //
                        // Create the SVG layer on top of the map
                        //
                        L.svg().addTo(map);

                        // Create the standard variables selecting the SVG in the map element
                        var svg = d3.select("#map").append("svg");
                        var g = svg.append("g");

            //Load the coordinate for the circle
            var objects = [ {"circle":{"coordinates":[50.0755,14.4378]}}];

            //Loop through to create a LatLng element that can be projected onto Leaflet map
            for(var i = 0;i<objects.length;i++){
              objects[i].LatLng = new L.LatLng(objects[i].circle.coordinates[0], objects[i].circle.coordinates[1])
            };

            //Create the circle object and store it in features
            var feature = g.selectAll("circle")
            .data(objects)
            .enter()
            .append("circle")
            .style("fill", "red")
            .attr("r", 20);


            //Make the circle dynamic, by calling the update function whenever view is view is reset
            map.on("viewreset", update)

            //Call the update also on first load of the web page
            update();

            //Updates the position of the circle every time the map is updated
            function update(){
              feature.attr("transform",
              function(d){
                return "translate("+
                    map.latLngToLayerPoint(d.LatLng).x+","+
                    map.latLngToLayerPoint(d.LatLng).y+")";
              })

            };

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

最佳答案

如您所见，您的圈子已附加:

enter image description here

但是，它不可见不是因为不透明度或颜色，而是因为您没有设置 svg 的尺寸。使用 svg 的默认尺寸，您的圆圈超出其边界并因此隐藏(它位于 map 的中间，在 [350,300]，而 svg 的默认尺寸为 300x150 可能取决于浏览器 ).尝试:

 var svg = d3.select("#map")
    .append("svg")
    .attr("width",700) 
    .attr("height",600)

因为您的 map 宽 700 像素，高 600 像素。

关于javascript - D3 和​​ Leaflet - svg 圆圈不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48033895/

25 4 0
文章推荐： html - 使用导航栏、旋转木马和简介进行容器定位
文章推荐： javascript - collection_radio_buttons 自动提交？
文章推荐： html - 如何将内容集中在表单中
文章推荐： javascript - 对 2 个数组进行排序/过滤
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com