使用D3.js绘制地图并打点

本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点。最后根据点生成voronoi图及其三角网。

下载地图geoJson文件

去网上下载要绘制地图的geoJson文件。

使用d3.json()加载地图文件,这里为了方便加载我把geoJson文件放在了js文件里。

绘制地图


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="test-svg">
        </div>
    </body>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script>
        window.onload = function() {

            var width = 1900,
                height = 800;

            var svg = d3.select("#test-svg")
                .append('svg')
                .attr('width', width + 'px')
                .attr('height', height + 'px');

            /*
             * 创建一个地理投影
             * .center 设置投影中心位置
             * .scale 设置缩放系数
             * 
             */
            var projection = d3.geoMercator()
                .center([463, 36])
                .scale(850)
                .translate([width / 2, height / 2]);

            //  创建路径生成器path
            var path = d3.geoPath().projection(projection);

            //  获取GeoJSON数据:这里我放在了js中方便加载
            var features = china.features;

            // 设置颜色值
            var ss2 = d3.schemeSet2;
            var sp2 = d3.schemePastel2;

            /*
             * 渲染地图
             * 
             * mouseover 鼠标移入变色
             * 
             */
            svg.append('g')
                .attr('class', 'map')
                .selectAll('.china')
                .data(features)
                .enter()
                .append('path')
                .attr('class', 'china')
                .attr("fill", function(d, i) {
                    return ss2[i % 3]
                })
                .attr('d', path)
                .on("mouseover", function(d, i) {
                    d3.select(this)
                      .attr("fill", sp2[i % 3]);
                })
                .on("mouseout", function(d, i) {
                    d3.select(this)
                      .attr("fill", ss2[i % 3]);
                });

        }
    </script>

</html>
  • 绘制效果

地图打点

a) 首先去取一些点

http://geojson.io 在网站上找到我国疆土,标注几个城市,在右边获取到经纬度。

b) 把点坐标放到我们的json中


var points = china.points.features;

            var _points = [];

            for(var i = 0; i < points.length; i++) {
                
                // 获取经纬度
                var lngLat = points[i].geometry.coordinates;
               
               // 转为映射在地图上的坐标
                var coo = projection(lngLat);

                _points.push(coo);

                svg.append("circle")
                    .attr("class", "point")
                    .attr("cx", coo[0])
                    .attr("cy", coo[1])
                    .attr("fill", "#ff9")
                    .attr("r", 4);

            }

添加Voronoi图

Voronoi图 又称沃罗诺伊图、泰森多边形,绘制的过程是将点都连起来构成许多三角形,然后利用中垂线找到三角形外心,再将所有外心连接即可。在几何、晶体学、建筑学、地理学、气象学、信息系统等许多领域有广泛的应用。


// 创建voronoi图
            var voronoi = d3.voronoi().extent([
                [0, 0],
                [width, height]
            ]);
            
            var polygons = voronoi(_points);
            
            function polygon(d) {
                return "M" + d.join("L") + "Z";
            }
            
            svg.append('g')
                .attr('class', 'map')
                .selectAll('.country')
                .data(voronoi.polygons(_points))
                .enter()
                .append('path')
                .attr("fill", "none")
                .attr("stroke", "#ff9")
                .attr('class', 'voronoi')
                .attr('d', polygon);

绘制Voronoi图的三角网


// 获取三角网坐标
            var links = voronoi.links(_points);
            
            for(var i = 0; i < links.length; i++) {
                svg.append('g')
                    .append('line')
                    .attr("stroke", "#ff9")
                    .attr('stroke-dasharray', 10)
                    .attr('class', 'line')
                    .attr('x1', links[i].source[0])
                    .attr('y1', links[i].source[1])
                    .attr('x2', links[i].target[0])
                    .attr('y2', links[i].target[1]);
            }

猜你喜欢

转载自www.cnblogs.com/chenjy1225/p/10924293.html
0条评论
添加一条新回复