zoukankan      html  css  js  c++  java
  • D3.JS V4 绘制中国地图

     
    代码:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
        .states :hover {
            fill: red;
            stroke- 2px;
        }
    
        .state-borders {
            fill: none;
            stroke: #fff;
            stroke- 0.5px;
            stroke-linejoin: round;
            stroke-linecap: round;
            pointer-events: none;
        }
    
    </style>
    <svg width="1200" height="800" style="border:1px gainsboro solid"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <script src="jquery-1.12.1.min.js"></script>
    
    <script>
    
    
    
    
        var svg = d3.select("svg"),
                width = svg.attr("width"),
                height = svg.attr("height");
    
        var projection = d3.geoMercator()
                .center([107, 31])
                .scale(950)
                .translate([width/2, height/2+height/6])
        var path = d3.geoPath()
                .projection(projection);
    
    
    
        d3.json("china.json", function(error, us) {
            if (error) throw error;
    
            svg.append("g")
                    .attr("class", "states")
                    .selectAll("path")
    //                .data(topojson.feature(us, us.objects.states).features)
                    .data(us.features)
                    .enter().append("path")
                    .attr('stroke','white')
                    .attr('fill','lightgray')
                    .attr("d", path)
                    .append('title')
                    .text(function(d){
                        a=d
                        return d.properties.name
                    });
    
            svg.append("path")
                    .attr("class", "state-borders")
                    .attr("d", path(topojson.mesh(us, us, function(a, b) { return a !== b; })));
    
            a={"value":[{"BusStopCode":"01012","RoadName":"Victoria St","Description":"Hotel Grand Pacific","Latitude":29.160752671000068,"Longitude":113.56942793100006 }]}
            svg.selectAll("circle")
                    .data(a.value).enter().append("circle")
                    .attr('stroke','red')
                    .attr('fill','green')
                    .attr("d", path)
                    .attr("r", 2)
                    .attr("transform", function(d) {
                        return "translate(" + projection([
                                    d.Longitude,
                                    d.Latitude
                                ]) + ")";
                    })
                    .append('title')
                    .text(function(d){
                        a=d
                        return d.BusStopCode
                    });
        });
    
    
    
    
    
    </script>
    

      

     
     
    http://blog.csdn.net/lzhlzz/article/details/41347929 中下载的地理信息的中国JSON文件绘制得到的图如下:
         
     
    与正常的中国地图相比,可以发现西藏那一块缺了存在争议的某一部分,关于这个,我们,当然是要加上去的。。。
    新的china.json数据连接在这http://files.cnblogs.com/files/combfish/china.zip,得到的图如下:
     

     
     

     

  • 相关阅读:
    go引入包一直是红色,没有引入的解决办法
    php 把抛出错误记录到日志中
    亚马逊查询接口
    git 合并指定文件到另一个分支
    content-type
    Echarts(饼图Pie)
    DIN 模型速记
    DeepFM 要点速记
    youtube DNN 模型要点速记
    java设计模式之迭代器
  • 原文地址:https://www.cnblogs.com/combfish/p/6867330.html
Copyright © 2011-2022 走看看