Back

d3 - geo, 在地图上画线:经纬度线

发布时间: 2021-05-09 07:59:00

如下:

        let svg = d3.select(selector).append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(0,0)")

        // 设置投影: mercator 墨卡托投影
        let projection = d3.geoMercator()
            .center([104, 32])  // 地图中心位置
            .scale(500)    // 缩小500 倍?
            .translate([width / 2, height / 2])

        // 这个很重要,定义了 GEO 尺度下的path. 
        let path = d3.geoPath().projection(projection)

          let graticule = d3.geoGraticule10()

          let g = d3.select('svg g')
          g.append('path')
            .attr('d', path(graticule))
            .attr('stroke', '#eeeeee')
            .attr('fill', 'none')

Back