D3 Geographies

最新推荐文章于 2024-04-19 09:32:49 发布

Claroja

最新推荐文章于 2024-04-19 09:32:49 发布

阅读量616

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/claroja/article/details/106832127

版权

js 专栏收录该内容

114 篇文章 1 订阅

订阅专栏

地理路径生成器

var projection = d3.geo.mercator()
                    .center([0,0])
                    .scale(100)
                    .translate([width/2,height/2])
                    .rotate()
var path = d3.geo.path()
                .projection(projection);

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.js"></script>
    <style>
        .country{
            stroke: black;
            stroke-width: 0.5px;
        }
    </style>

</head>
<body>
    <script>
        width = 800
        height =500
        var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)
        var projection = d3.geoEquirectangular()
                            .center([0,0])//中心点位置即地图[经度0,维度0]对应的svg画板的坐标默认(0,0)
                            .scale(100)//地图缩放
                            .translate([width/2,height/2])//平移,一般将[0,0]点平移到中心
                            .rotate([198,0,0])//旋转地图,来指定中心位置
        var path = d3.geoPath()
                        .projection(projection);
        var color = d3.scaleOrdinal(d3.schemeTableau10)
        d3.json("./map/world/world.json").then(function(root){
            var groups = svg.append('g')
            groups.selectAll("path")
                    .data(root.features)
                    .enter()
                    .append("path")
                    .attr("class","country")
                    .style("fill",(d,i)=>color(i))
                    .attr("d",path)
        })
    </script>
</body>
</html>

例子2

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.js"></script>
    <style>
        .country{
            stroke: black;
            stroke-width: 0.5px;
        }
    </style>

</head>
<body>
    <script>
        width = 800
        height =500
        var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)
        var projection = d3.geoEquirectangular()
                            .center([0,0])
                            .scale(100)
                            .translate([width/2,height/2])
                            .rotate([198,0,0])
        var path = d3.geoPath()
                        .projection(projection);
        var color = d3.scaleOrdinal(d3.schemeTableau10)
        d3.json("./map/world/world.json").then(function(data){
            var groups = svg.append('g')
            groups.selectAll("path")
                    .data(data.features)
                    .enter()
                    .append("path")
                    .attr("class","country")
                    .style("fill",(d,i)=>color(i))
                    .attr("d",path)
                    .each(function(d,i){
                        var centroid = path.centroid(d)
                        svg.append("text")
                            .attr("class","centroid")
                            .attr("x",centroid[0])
                            .attr("y",centroid[1])
                            .text(d['properties']['chinese'])
                            .attr('font-size',2)
                    })
        })
    </script>
</body>
</html>

方法	描述
d3.geoPath	创建地理path生成器
path.projection	指定映射方法

Paths
d3.geoPath - create a new geographic path generator.
path - project and render the specified feature.
path.area - compute the projected planar area of a given feature.
path.bounds - compute the projected planar bounding box of a given feature.
path.centroid - compute the projected planar centroid of a given feature.
path.measure - compute the projected planar length of a given feature.
path.projection - set the geographic projection.
path.context - set the render context.
path.pointRadius - set the radius to display point features.

Projections
projection - project the specified point from the sphere to the plane.
projection.invert - unproject the specified point from the plane to the sphere.
projection.stream - wrap the specified stream to project geometry.
projection.clipAngle - set the radius of the clip circle.
projection.clipExtent - set the viewport clip extent, in pixels.
projection.angle - set the post-projection rotation.
projection.reflectX - reflect the x-dimension.
projection.reflectY - reflect the y-dimension.
projection.scale - set the scale factor.
projection.translate - set the translation offset.
projection.fitExtent - set the scale and translate to fit a GeoJSON object.
projection.fitSize - set the scale and translate to fit a GeoJSON object.
projection.fitWidth - set the scale and translate to fit a GeoJSON object.
projection.fitHeight - set the scale and translate to fit a GeoJSON object.
projection.center - set the center point.
projection.rotate - set the three-axis spherical rotation angles.
projection.precision - set the precision threshold for adaptive sampling.
projection.preclip - set the spherical clipping stream transform.
projection.postclip - set the planar clipping stream transform.
d3.geoClipAntimeridian - cuts spherical geometries that cross the antimeridian.
d3.geoClipCircle - clips spherical geometries to a small circle.
d3.geoClipRectangle - clips planar geometries to a rectangular viewport.
d3.geoAlbers - the Albers equal-area conic projection.
d3.geoAlbersUsa - a composite Albers projection for the United States.
d3.geoAzimuthalEqualArea - the azimuthal equal-area projection.
d3.geoAzimuthalEquidistant - the azimuthal equidistant projection.
d3.geoConicConformal - the conic conformal projection.
d3.geoConicEqualArea - the conic equal-area (Albers) projection.
d3.geoConicEquidistant - the conic equidistant projection.
conic.parallels - set the two standard parallels.
d3.geoEqualEarth - the Equal Earth projection.
d3.geoEquirectangular - the equirectangular (plate carreé) projection.
d3.geoGnomonic - the gnomonic projection.
d3.geoMercator - the spherical Mercator projection.
d3.geoOrthographic - the azimuthal orthographic projection.
d3.geoStereographic - the azimuthal stereographic projection.
d3.geoTransverseMercator - the transverse spherical Mercator projection.
project - project the specified point from the sphere to the plane.
project.invert - unproject the specified point from the plane to the sphere.
d3.geoProjection - create a custom projection.
d3.geoProjectionMutator - create a custom configurable projection.
d3.geoAzimuthalEqualAreaRaw - the raw azimuthal equal-area projection.
d3.geoAzimuthalEquidistantRaw - the raw azimuthal equidistant projection.
d3.geoConicConformalRaw - the raw conic conformal projection.
d3.geoConicEqualAreaRaw - the raw conic equal-area (Albers) projection.
d3.geoConicEquidistantRaw - the raw conic equidistant projection.
d3.geoEquirectangularRaw - the raw equirectangular (plate carreé) projection.
d3.geoGnomonicRaw - the raw gnomonic projection.
d3.geoMercatorRaw - the raw Mercator projection.
d3.geoOrthographicRaw - the raw azimuthal orthographic projection.
d3.geoStereographicRaw - the raw azimuthal stereographic projection.
d3.geoTransverseMercatorRaw - the raw transverse spherical Mercator projection.

https://github.com/d3/d3/blob/master/API.md#geographies-d3-geo

Claroja

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3 Geographies

地理路径生成器var projection = d3.geo.mercator() .center([0,0]) .scale(100) .translate([width/2,height/2]) .rotate()var path = d3.geo.path() .projection(projection);
复制链接

扫一扫