个人中心
gpt4 book ai didi

javascript - 在谷歌地图覆盖中使用 d3 绘制路径

转载 作者：行者123 更新时间：2023-11-29 10:49:36 24 4
gpt4 key购买 nike

我将 d3.js 与谷歌地图结合使用，试图可视化无线覆盖范围，但没有成功。基本思想是 map 上的每个点都代表一个接入点，我会使用这些点的 voronoi 图作为覆盖率的粗略近似值等。

所以基于这个demo ，我有以下内容:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
    <link rel="stylesheet" href="http://mbostock.github.com/d3/ex/colorbrewer.css">
    <style type="text/css">

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.stations {
  position: absolute;
}

.stations, .stations svg {
  position: absolute;
}

.stations border {
  position: absolute;
 stroke: black;
 stroke-width: 2px;
}

.stations svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

// create map
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(37.76487, -122.41948),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});


var data = [
{ name: 'pt1', lng: -122.28, lat: 38.2 },
{ name: 'pt2', lng: -122.05, lat: 38.0 },
{ name: 'pt3', lng: -122.12, lat: 37.67 },
{ name: 'pt4', lng: -121.82, lat: 37.7 },
{ name: 'pt5', lng: -121.95, lat: 38.38 },
{ name: 'pt6', lng: -121.78, lat: 36.93 },
{ name: 'pt7', lng: -122.25, lat: 37.52 },
{ name: 'pt8', lng: -122.82, lat: 38.5 },
{ name: 'pt9', lng: -121.92, lat: 37.37 },
{ name: 'pt10', lng: -122.37, lat: 37.62 },
{ name: 'pt11', lng: -121.23, lat: 37.9 },
]


// Load the station data. When the data comes back, create an overlay.
var overlay = new google.maps.OverlayView();

// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
  var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("height", "100%")
        .attr("width", "100%")
        .attr("class", "stations")

  // Draw each marker as a separate SVG element.
  // We could use a single SVG, but what size would it have?
  overlay.draw = function() {
    var projection = this.getProjection(),
        padding = 10;

    var marker = layer.selectAll("svg")
        .data( data )
        .each(transform) // update existing markers
      .enter().append("svg:svg")
        .each(transform)
        .attr("class", "marker")

    marker.append("svg:circle")
        .attr("r", 4.5)
        .attr("cx", padding )
        .attr("cy", padding );

    // add a label.
    marker.append("svg:text")
        .attr("x", padding + 7)
        .attr("y", padding)
        .attr("dy", ".31em")
        .text( function(d) { 
          return d.name; }
        );

    var v = d3.geom.voronoi( translate(data) );
    // console.log( v )

    var edges = layer.selectAll("path")
        .data( v )
      .enter().append("svg:svg")
        .attr( "class", "border" )
        .append("svg:path")
        .attr( "d", function(d){
          var e = transform_path(d)
          var p = 'M' + e.join('L') + 'Z'
          console.log( 'PATH: ' + p)
          return p
        })

    function translate(data) {
      var d = []
      for( var i=0; i<data.length; i++){
        var c = [ data[i].lat, data[i].lng ]
        d.push( c )
      }
      return d
    }

    function _projection( lat, lng ) {
      e = new google.maps.LatLng( lat, lng );
      e = projection.fromLatLngToDivPixel(e);
      return [ e.x - padding, e.y - padding]
      // return [ e.x, e.y ]
    }

    function transform(d) {
      e = _projection( d.lat, d.lng )
      console.log("marker " + d.lat +', ' + d.lng + " -> left: " + e[0] +", top: " + e[1] )
      return d3.select(this)
          .style("left", e[0] + "px")
          .style("top", e[1] + "px");
    }

    function transform_path(data) {
      var d = []
      console.log(data)
      for( var i=0; i<data.length; i++) {
        var c = _projection( data[i][0], data[i][2] )
        console.log( ' path point: ' + JSON.stringify(data[i]) + ' -> left: ' + c[0] + ", top: " + c[1])
        d.push( c )
      }
      // console.log(d)
      return d
    }

  };
};

// Bind our overlay to the map…
overlay.setMap(map);

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

但是，我无法显示任何路径元素。任何人都可以帮忙吗？我在 jsfiddle 上有上面的代码.干杯!

最佳答案

在这里您可以看到显示的路径。您的问题与 D3 无关，而是与糟糕的 CSS 样式有关:宽度设置为 0px，圆的样式被赋予路径等。

http://jsfiddle.net/uF9PV/7/

我还注意到设计缺陷:你的点不应该通过绝对定位用 CSS 定位，而应该通过 SVG 定位(让 D3 为你做这件事)。我的建议是将叠加层和谷歌地图清楚地分开。棘手的部分是确保它们一起移动(缩放和左右上下)

good luck

关于javascript - 在谷歌地图覆盖中使用 d3 绘制路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13098244/

24 4 0
文章推荐： mysql - 列出表中不包含其他表中特定值的行
文章推荐： mysql - 转移WordPress站点后出现问题
文章推荐： mysql - Percona murmur_hash、fnv_64 和 fnv1a_64 函数
文章推荐： javascript - 另一个变量中的 JS 变量
行者123
个人简介

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

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