前端使用D3.js制作地图

vscode配置开发js前端 java前端开发有哪些技术 jsp前端开发是否使用

D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的html表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。

我用陕西地图做例子,并且每个市因为数据的不同显示的颜色深浅也不同。
html 代码

<head>
    <title>D3 值域渐变地图</title>
    <style type=”text/css”>
        .div1 {
            float: left;
        }
        .div2 {
            float: right;
        }
        .div3 {
            display: none;
        }
        .tooltip {
            font-family: simsun;
            font-size: 16px;
            width: 120;
            height: auto;
            position: absolute;
            text-align: center;
            border-style: solid;
            border-width: 1px;
            background-color: white;
            border-radius: 5px;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
            width: 50px;
        }
        .MyRect {
            fill: steelblue;
        }
        .MyText {
            fill: white;
            text-anchor: middle;
        }
    </style>
</head>
<body>
    <div class=”div1″></div>
    <!– D3js系列文件 –>
    <script src=”http://d3js.org/d3.v3.min.js” charset=”utf-8″></script>
    <script src=”http://d3js.org/topojson.v1.min.js” charset=”utf-8″></script>
    <script type=”text/javascript”>
        window.onload = function () {
            var width = 800;
            var height = 800;
            var projection;
            projection = d3.geo.mercator()
                .center([108, 36]) //中心点
                .scale(3500) //地图大小
                .translate([width / 2, height / 2 – 50]); //地图宽度和高度
            var svg = d3.select(“.div1”)
                .append(“svg”)
                .attr(“width”, width)
                .attr(“height”, height);
            //投影
            //投影后获得的路径
            var path = d3.geo.path()
                .projection(projection);
            var georoot = {
                “type”: “FeatureCollection”,
                “features”:
                    [
                        { “type”: “Feature”, “properties”: { “id”: “6108”, “name”: “榆林市”, “cp”: [109.8743, 38.205], “childNum”: 12 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[110.929, 38.7158], [110.885, 38.6224], [110.896, 38.5895], [110.918, 38.584], [110.907, 38.5236], [110.874, 38.5126], [110.874, 38.4521], [110.8521, 38.4412], [110.7861, 38.4467], [110.7422, 38.3698], [110.7092, 38.3588], [110.6543, 38.3093], [110.5884, 38.3038], [110.5774, 38.2928], [110.5664, 38.2214], [110.5225, 38.2104], [110.5115, 38.183], [110.5225, 38.1281], [110.5005, 38.0951], [110.5005, 38.0347], [110.5225, 37.9962], [110.5225, 37.9578], [110.5994, 37.9193], [110.6653, 37.7985], [110.7532, 37.7545], [110.7532, 37.738], [110.6982, 37.7161], [110.7971, 37.6611], [110.7642, 37.6337], [110.7971, 37.5623], [110.7751, 37.5348], [110.7422, 37.4524], [110.6433, 37.4304], [110.6323, 37.37], [110.6982, 37.348], [110.6763, 37.3096], [110.6873, 37.2821], [110.6543, 37.2766], [110.6323, 37.2327], [110.5334, 37.1393], [110.5334, 37.1063], [110.4565, 37.0459], [110.4236, 37.0349], [110.4456, 37.0074], [110.3796, 37.0184], [110.4236, 36.9745], [110.3577, 36.958], [110.3247, 36.9855], [110.3027, 36.9635], [110.2039, 37.0129], [110.116, 36.969], [110.094, 36.98], [110.072, 37.0074], [110.0281, 37.0349], [110.0171, 37.0953], [110.0281, 37.1393], [110.0061, 37.1503], [109.9841, 37.1338], [109.9731, 37.1558], [109.9841, 37.1777], [109.9622, 37.2107], [110.0171, 37.2052], [110.0281, 37.2382], [110.0061, 37.2766], [109.9841, 37.2821], [109.9512, 37.2656], [109.9072, 37.3151], [109.8853, 37.2711], [109.8413, 37.2766], [109.8193, 37.2546], [109.7864, 37.2656], [109.7864, 37.2766], [109.7644, 37.2711], [109.7864, 37.3151], [109.8083, 37.3041], [109.7754, 37.392], [109.7314, 37.403], [109.7424, 37.4194], [109.7095, 37.4359], [109.6765, 37.4359], [109.6655, 37.4194], [109.5996, 37.4249], [109.4897, 37.5018], [109.4458, 37.4579], [109.3799, 37.4304], [109.3469, 37.381], [109.325, 37.3755], [109.3469, 37.3535], [109.248, 37.326], [109.1821, 37.326], [109.1711, 37.3041], [109.1382, 37.3206], [109.1162, 37.3041], [109.0833, 37.3151], [109.0503, 37.2821], [109.0173, 37.3041], [109.0173, 37.2821], [108.9624, 37.2656], [108.9514, 37.2327], [108.9075, 37.2382], [108.8855, 37.2217], [108.8635, 37.2656], [108.8635, 37.2437], [108.8525, 37.2052], [108.8635, 37.1777], [108.8855, 37.1777], [108.8855, 37.1558], [108.8196, 37.1393], [108.7976, 37.1118], [108.7537, 37.1173], [108.7427, 37.0734], [108.8196, 37.0294], [108.7866, 36.9855], [108.7646, 36.9745], [108.6987, 37.002], [108.6877, 36.9965], [108.6548, 37.0404], [108.6108, 37.0294], [108.5889, 36.991], [108.5339, 36.991], [108.49, 37.0074], [108.49, 37.0294], [108.512, 37.0239], [108.5449, 37.0404], [108.5559, 37.0898], [108.5339, 37.1173], [108.5449, 37.1613], [108.512, 37.1997], [108.5229, 37.2272], [108.457, 37.2491], [108.49, 37.2821], [108.4351, 37.3151], [108.4351, 37.3865], [108.4131, 37.4084], [108.4021, 37.3755], [108.3691, 37.3865], [108.3582, 37.403], [108.3362, 37.3645], [108.2153, 37.326], [108.2813, 37.2546], [108.2703, 37.2327], [108.2483, 37.2327], [108.2593, 37.2162], [108.2153, 37.1777], [108.1714, 37.1667], [108.1714, 37.1997], [108.1494, 37.1887], [108.1274, 37.2052], [108.0945, 37.1283], [108.0286, 37.1283], [107.9517, 37.0789], [107.8857, 37.0953], [107.8638, 37.2107], [107.8198, 37.2217], [107.8308, 37.2382], [107.8088, 37.2437], [107.7429, 37.2052], [107.7539, 37.1832], [107.7209, 37.1667], [107.7429, 37.1558], [107.7319, 37.1393], [107.688, 37.1613], [107.699, 37.1063], [107.7209, 37.0789], [107.699, 37.0569], [107.666, 37.0624], [107.666, 37.0569], [107.688, 37.0239], [107.7429, 37.0184], [107.7539, 36.991], [107.699, 36.98], [107.7209, 36.9141], [107.7209, 36.8646], [107.677, 36.8317], [107.6331, 36.8207], [107.5781, 36.8372], [107.5452, 36.8262], [107.5342, 36.8701], [107.4792, 36.9141], [107.4463, 36.8921], [107.4353, 36.9086], [107.3584, 36.9031], [107.3474, 36.925], [107.3145, 36.9141], [107.2925, 36.9305], [107.2815, 37.0953], [107.2925, 37.0898], [107.2925, 37.1063], [107.2705, 37.1283], [107.3145, 37.1063], [107.3474, 37.1722], [107.2815, 37.2327], [107.2815, 37.2437], [107.3145, 37.2491], [107.3145, 37.2766], [107.2815, 37.3041], [107.2595, 37.348], [107.2925, 37.4908], [107.3474, 37.5293], [107.3694, 37.5677], [107.3694, 37.5787], [107.3474, 37.5732], [107.3035, 37.6117], [107.3584, 37.6227], [107.3804, 37.6666], [107.4023, 37.6611], [107.3804, 37.6941], [107.4683, 37.6941], [107.5012, 37.7765], [107.5781, 37.7875], [107.5781, 37.7985], [107.5891, 37.804], [107.6111, 37.782], [107.655, 37.8314], [107.644, 37.8754], [107.688, 37.8864], [107.7429, 37.8479], [107.9736, 37.793], [108.0286, 37.6996], [108.0286, 37.6501], [108.0725, 37.6501], [108.1384, 37.6172], [108.2373, 37.6611], [108.2922, 37.6556], [108.3362, 37.6337], [108.457, 37.6556], [108.479, 37.6721], [108.5339, 37.6886], [108.5669, 37.6831], [108.5779, 37.6501], [108.6987, 37.6556], [108.7207, 37.6886], [108.7976, 37.6886], [108.7866, 37.9303], [108.8306, 37.9688], [108.7866, 38.0457], [108.8416, 38.0402], [108.8525, 38.0072], [108.9294, 37.9303], [109.0063, 37.9688], [109.0283, 38.0072], [109.0723, 38.0347], [109.0723, 38.0731], [108.9514, 38.1665], [108.9404, 38.205], [108.9734, 38.2434], [108.9624, 38.2709], [108.9954, 38.3533], [109.0613, 38.3917], [109.0613, 38.4357], [109.1162, 38.4741], [109.1272, 38.4961], [109.1711, 38.5181], [109.27, 38.6224], [109.325, 38.6005], [109.3579, 38.6224], [109.325, 38.6664], [109.3359, 38.6993], [109.3909, 38.7103], [109.4458, 38.7817], [109.5117, 38.8312], [109.5447, 38.8147], [109.6216, 38.8477], [109.6545, 38.8916], [109.6545, 38.9191], [109.6765, 38.941], [109.6765, 38.9575], [109.7534, 39.0509], [109.7974, 39.0729], [109.8413, 39.1333], [109.8633, 39.1278], [109.9622, 39.1882], [109.8743, 39.2542], [109.9072, 39.2706], [109.9622, 39.2157], [110.0061, 39.2102], [110.2148, 39.2816], [110.1599, 39.386], [110.127, 39.397], [110.127, 39.4299], [110.1489, 39.4574], [110.1709, 39.4684], [110.1929, 39.4464], [110.2258, 39.4519], [110.2478, 39.4354], [110.2588, 39.408], [110.3906, 39.3091], [110.4236, 39.342], [110.4236, 39.353], [110.4456, 39.3915], [110.4895, 39.3585], [110.5334, 39.3805], [110.5994, 39.2761], [110.6323, 39.2651], [110.6982, 39.2706], [110.7422, 39.353], [110.874, 39.4958], [110.9619, 39.5233], [111.0278, 39.5673], [111.0498, 39.5563], [111.0938, 39.5563], [111.1377, 39.5837], [111.1597, 39.5673], [111.1487, 39.5343], [111.0498, 39.4299], [111.0608, 39.408], [111.0938, 39.4025], [111.0828, 39.3805], [111.1047, 39.3585], [111.1487, 39.3695], [111.1597, 39.3365], [111.1926, 39.3475], [111.1816, 39.3311], [111.1816, 39.3146], [111.2476, 39.3036], [111.2366, 39.2926], [111.2146, 39.2706], [111.2146, 39.2377], [111.1597, 39.1553], [111.1707, 39.1333], [111.1377, 39.0729], [111.0938, 39.0344], [111.0388, 39.0234], [110.9839, 38.985], [111.0059, 38.9355], [111.0168, 38.8916], [110.9949, 38.8696], [111.0059, 38.8422], [110.9509, 38.7762], [110.9619, 38.7488], [110.929, 38.7158]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6106”, “name”: “延安市”, “cp”: [109.1052, 36.4252], “childNum”: 13 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[110.4236, 36.9745], [110.4236, 36.9525], [110.4016, 36.8866], [110.3796, 36.8811], [110.4236, 36.8591], [110.4126, 36.8317], [110.4236, 36.8097], [110.4126, 36.7767], [110.3796, 36.7657], [110.4346, 36.7548], [110.4126, 36.7218], [110.4565, 36.7328], [110.4346, 36.7108], [110.4346, 36.6779], [110.4126, 36.6943], [110.3906, 36.6888], [110.5005, 36.5845], [110.4895, 36.5515], [110.5005, 36.535], [110.5005, 36.4911], [110.4785, 36.4581], [110.4895, 36.4252], [110.4565, 36.3318], [110.4675, 36.2933], [110.4785, 36.2549], [110.4565, 36.2274], [110.4456, 36.134], [110.4895, 36.0297], [110.4895, 35.9912], [110.5115, 35.9747], [110.5005, 35.9528], [110.5225, 35.9198], [110.5115, 35.8813], [110.5444, 35.8759], [110.5554, 35.8539], [110.4126, 35.8099], [110.3687, 35.7605], [110.3247, 35.744], [110.2917, 35.7166], [110.1819, 35.7166], [110.1379, 35.6836], [110.1379, 35.6671], [110.2258, 35.6342], [110.2588, 35.6012], [110.2478, 35.5847], [110.2808, 35.5627], [110.2698, 35.5408], [110.2368, 35.5243], [110.1819, 35.4694], [110.1379, 35.4529], [110.083, 35.4034], [110.061, 35.4309], [110.0171, 35.4089], [109.9951, 35.4364], [109.9841, 35.4089], [109.9072, 35.4089], [109.8743, 35.4364], [109.8523, 35.4254], [109.8083, 35.4419], [109.7534, 35.4364], [109.7095, 35.4089], [109.6216, 35.4419], [109.5447, 35.4419], [109.5227, 35.4199], [109.5007, 35.3595], [109.4897, 35.376], [109.4897, 35.3979], [109.4678, 35.4199], [109.4788, 35.4364], [109.4568, 35.4584], [109.4788, 35.4694], [109.4678, 35.4803], [109.4678, 35.5078], [109.4238, 35.4968], [109.4019, 35.5188], [109.2261, 35.5243], [109.2151, 35.5353], [109.2151, 35.5737], [109.1821, 35.5792], [109.1162, 35.5682], [109.0942, 35.5408], [109.0503, 35.5463], [108.9294, 35.3705], [108.8635, 35.343], [108.8525, 35.3485], [108.8306, 35.3815], [108.7976, 35.387], [108.7756, 35.4803], [108.6768, 35.5078], [108.6658, 35.5353], [108.6218, 35.5408], [108.6108, 35.5627], [108.5449, 35.6067], [108.5229, 35.6506], [108.5229, 35.8154], [108.501, 35.8759], [108.5779, 35.9473], [108.6438, 35.9418], [108.6877, 36.0242], [108.6877, 36.0791], [108.7097, 36.145], [108.6658, 36.2109], [108.6438, 36.2604], [108.6658, 36.2933], [108.6877, 36.2933], [108.7097, 36.3538], [108.7097, 36.3757], [108.6548, 36.3812], [108.6108, 36.4362], [108.5999, 36.4252], [108.5559, 36.4362], [108.49, 36.4911], [108.457, 36.4307], [108.4131, 36.4471], [108.3911, 36.5076], [108.3691, 36.5186], [108.3472, 36.5515], [108.3032, 36.568], [108.2922, 36.5515], [108.2593, 36.5625], [108.2593, 36.5515], [108.2043, 36.579], [108.2043, 36.6284], [108.1604, 36.5625], [108.1165, 36.5955], [108.1055, 36.5845], [108.0835, 36.6064], [108.0615, 36.5955], [108.0286, 36.6064], [108.0066, 36.6394], [108.0286, 36.6614], [108.0066, 36.6833], [107.9846, 36.6559], [107.9407, 36.6559], [107.9407, 36.6998], [107.9077, 36.7493], [107.8418, 36.7822], [107.7759, 36.7877], [107.7539, 36.8152], [107.699, 36.8097], [107.677, 36.8317], [107.7209, 36.8646], [107.7209, 36.9141], [107.699, 36.98], [107.7539, 36.991], [107.7429, 37.0184], [107.688, 37.0239], [107.666, 37.0569], [107.666, 37.0624], [107.699, 37.0569], [107.7209, 37.0789], [107.699, 37.1063], [107.688, 37.1613], [107.7319, 37.1393], [107.7429, 37.1558], [107.7209, 37.1667], [107.7539, 37.1832], [107.7429, 37.2052], [107.8088, 37.2437], [107.8308, 37.2382], [107.8198, 37.2217], [107.8638, 37.2107], [107.8857, 37.0953], [107.9517, 37.0789], [108.0286, 37.1283], [108.0945, 37.1283], [108.1274, 37.2052], [108.1494, 37.1887], [108.1714, 37.1997], [108.1714, 37.1667], [108.2153, 37.1777], [108.2593, 37.2162], [108.2483, 37.2327], [108.2703, 37.2327], [108.2813, 37.2546], [108.2153, 37.326], [108.3362, 37.3645], [108.3582, 37.403], [108.3691, 37.3865], [108.4021, 37.3755], [108.4131, 37.4084], [108.4351, 37.3865], [108.4351, 37.3151], [108.49, 37.2821], [108.457, 37.2491], [108.5229, 37.2272], [108.512, 37.1997], [108.5449, 37.1613], [108.5339, 37.1173], [108.5559, 37.0898], [108.5449, 37.0404], [108.512, 37.0239], [108.49, 37.0294], [108.49, 37.0074], [108.5339, 36.991], [108.5889, 36.991], [108.6108, 37.0294], [108.6548, 37.0404], [108.6877, 36.9965], [108.6987, 37.002], [108.7646, 36.9745], [108.7866, 36.9855], [108.8196, 37.0294], [108.7427, 37.0734], [108.7537, 37.1173], [108.7976, 37.1118], [108.8196, 37.1393], [108.8855, 37.1558], [108.8855, 37.1777], [108.8635, 37.1777], [108.8525, 37.2052], [108.8635, 37.2437], [108.8635, 37.2656], [108.8855, 37.2217], [108.9075, 37.2382], [108.9514, 37.2327], [108.9624, 37.2656], [109.0173, 37.2821], [109.0173, 37.3041], [109.0503, 37.2821], [109.0833, 37.3151], [109.1162, 37.3041], [109.1382, 37.3206], [109.1711, 37.3041], [109.1821, 37.326], [109.248, 37.326], [109.3469, 37.3535], [109.325, 37.3755], [109.3469, 37.381], [109.3799, 37.4304], [109.4458, 37.4579], [109.4897, 37.5018], [109.5996, 37.4249], [109.6655, 37.4194], [109.6765, 37.4359], [109.7095, 37.4359], [109.7424, 37.4194], [109.7314, 37.403], [109.7754, 37.392], [109.8083, 37.3041], [109.7864, 37.3151], [109.7644, 37.2711], [109.7864, 37.2766], [109.7864, 37.2656], [109.8193, 37.2546], [109.8413, 37.2766], [109.8853, 37.2711], [109.9072, 37.3151], [109.9512, 37.2656], [109.9841, 37.2821], [110.0061, 37.2766], [110.0281, 37.2382], [110.0171, 37.2052], [109.9622, 37.2107], [109.9841, 37.1777], [109.9731, 37.1558], [109.9841, 37.1338], [110.0061, 37.1503], [110.0281, 37.1393], [110.0171, 37.0953], [110.0281, 37.0349], [110.072, 37.0074], [110.094, 36.98], [110.116, 36.969], [110.2039, 37.0129], [110.3027, 36.9635], [110.3247, 36.9855], [110.3577, 36.958], [110.4236, 36.9745]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6107”, “name”: “汉中市”, “cp”: [106.886, 33.0139], “childNum”: 11 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[106.5784, 33.5852], [106.6003, 33.5797], [106.6223, 33.5962], [106.6223, 33.6182], [106.6553, 33.6401], [106.6443, 33.6566], [106.6992, 33.6731], [106.6772, 33.7006], [106.7981, 33.6731], [106.8091, 33.6896], [106.8091, 33.8159], [106.842, 33.8379], [106.864, 33.8763], [106.897, 33.8434], [106.9958, 33.7939], [107.0398, 33.7994], [107.0398, 33.8379], [107.0508, 33.8763], [107.0728, 33.8324], [107.1387, 33.7994], [107.1497, 33.8159], [107.1716, 33.7775], [107.2375, 33.772], [107.2705, 33.7885], [107.3035, 33.772], [107.2815, 33.7335], [107.2925, 33.7061], [107.3804, 33.6841], [107.4023, 33.6456], [107.4573, 33.6621], [107.4902, 33.6841], [107.5342, 33.6841], [107.5671, 33.7061], [107.5781, 33.7006], [107.6221, 33.7225], [107.666, 33.7006], [107.7209, 33.728], [107.8528, 33.6951], [107.9077, 33.7445], [107.9187, 33.7335], [107.9517, 33.739], [108.0505, 33.7115], [108.0505, 33.6292], [108.0725, 33.5907], [108.0615, 33.5083], [108.1384, 33.4753], [108.1494, 33.4534], [108.1384, 33.4149], [108.0505, 33.338], [108.0505, 33.2886], [108.0286, 33.2611], [108.0725, 33.2172], [108.1165, 33.2062], [108.0945, 33.1732], [108.1055, 33.1183], [108.0945, 33.0798], [108.1384, 33.0084], [108.1165, 32.9755], [108.1165, 32.9425], [108.1055, 32.915], [108.0835, 32.9095], [108.0725, 32.8821], [108.0945, 32.8711], [108.1165, 32.8217], [108.1494, 32.7997], [108.1384, 32.7777], [108.1934, 32.7612], [108.2483, 32.7063], [108.2593, 32.6459], [108.2593, 32.6019], [108.1824, 32.6129], [108.2483, 32.569], [108.2813, 32.4921], [108.1824, 32.4261], [108.1165, 32.4371], [108.1384, 32.3767], [108.1055, 32.3767], [108.1274, 32.3438], [108.1274, 32.3273], [108.1824, 32.2723], [108.1824, 32.2559], [108.1604, 32.2394], [108.1384, 32.2174], [108.0725, 32.2339], [108.0286, 32.2174], [108.0286, 32.179], [107.9956, 32.146], [107.9736, 32.146], [107.9077, 32.2064], [107.8638, 32.2009], [107.8418, 32.2229], [107.7539, 32.3328], [107.71, 32.3328], [107.688, 32.3767], [107.655, 32.4097], [107.6001, 32.4152], [107.5342, 32.3877], [107.4902, 32.4207], [107.4463, 32.4261], [107.4573, 32.4536], [107.4353, 32.4701], [107.4353, 32.5305], [107.4133, 32.5415], [107.3694, 32.5415], [107.3474, 32.514], [107.2925, 32.4866], [107.3035, 32.4701], [107.2815, 32.4646], [107.2705, 32.4042], [107.2375, 32.4152], [107.1826, 32.4756], [107.1277, 32.4866], [107.1057, 32.514], [107.0728, 32.5305], [107.1057, 32.5909], [107.0947, 32.6294], [107.0947, 32.6514], [107.0618, 32.6788], [107.0618, 32.7063], [107.0068, 32.7228], [106.9189, 32.7063], [106.897, 32.7228], [106.864, 32.7228], [106.7871, 32.7008], [106.7761, 32.7393], [106.7322, 32.7393], [106.6113, 32.6678], [106.5344, 32.6733], [106.4905, 32.6514], [106.4575, 32.6624], [106.4465, 32.6404], [106.4026, 32.6184], [106.3477, 32.6678], [106.2708, 32.6733], [106.2598, 32.6953], [106.1829, 32.6953], [106.106, 32.7228], [106.062, 32.7667], [106.095, 32.7942], [106.095, 32.8217], [106.051, 32.8766], [106.0071, 32.8326], [105.9631, 32.8491], [105.9302, 32.8271], [105.8972, 32.8381], [105.8423, 32.8217], [105.8313, 32.8271], [105.8203, 32.7722], [105.7764, 32.7502], [105.7764, 32.7667], [105.7104, 32.7557], [105.6775, 32.7283], [105.6006, 32.7008], [105.5896, 32.7283], [105.5566, 32.7283], [105.5676, 32.7667], [105.5566, 32.7887], [105.5237, 32.8052], [105.5237, 32.8436], [105.4907, 32.8766], [105.5017, 32.915], [105.5676, 32.9041], [105.5896, 32.8766], [105.6335, 32.8821], [105.6555, 32.9041], [105.7104, 32.915], [105.7324, 32.9041], [105.8203, 32.9535], [105.8643, 32.9425], [105.9192, 32.9919], [105.9302, 33.0359], [105.9192, 33.0634], [105.9302, 33.0743], [105.9192, 33.1018], [105.9412, 33.1183], [105.9192, 33.1293], [105.9302, 33.1512], [105.8972, 33.1458], [105.9302, 33.2007], [105.9631, 33.1348], [105.9741, 33.1567], [105.9631, 33.2117], [105.9412, 33.2117], [105.9192, 33.2446], [105.8533, 33.2336], [105.7983, 33.2611], [105.7874, 33.2831], [105.7544, 33.2886], [105.7434, 33.3105], [105.7544, 33.316], [105.7544, 33.3325], [105.7104, 33.3875], [105.8203, 33.382], [105.8423, 33.4918], [105.8972, 33.5577], [105.9192, 33.5522], [105.9521, 33.5852], [105.9521, 33.6127], [106.0291, 33.5962], [106.084, 33.6182], [106.1169, 33.6017], [106.106, 33.5742], [106.1499, 33.5852], [106.1389, 33.5797], [106.1499, 33.5577], [106.1938, 33.5468], [106.2817, 33.6072], [106.3477, 33.5907], [106.3806, 33.6182], [106.4355, 33.6237], [106.4465, 33.6127], [106.4575, 33.5468], [106.4685, 33.5303], [106.5015, 33.5358], [106.5125, 33.5028], [106.5564, 33.5303], [106.5564, 33.5687], [106.5784, 33.5852]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6109”, “name”: “安康市”, “cp”: [109.1162, 32.7722], “childNum”: 10 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[108.0505, 33.7115], [108.0835, 33.728], [108.1824, 33.7115], [108.3582, 33.7939], [108.4021, 33.7665], [108.49, 33.8049], [108.5779, 33.7665], [108.6108, 33.8269], [108.6548, 33.8434], [108.7097, 33.8269], [108.7537, 33.8379], [108.7646, 33.8049], [108.8416, 33.8159], [108.8306, 33.7775], [108.9075, 33.7775], [108.9404, 33.761], [108.9514, 33.728], [108.9294, 33.6786], [108.9075, 33.6731], [108.8855, 33.7006], [108.8306, 33.6456], [108.7976, 33.6566], [108.7976, 33.6401], [108.8196, 33.6292], [108.8196, 33.6182], [108.7537, 33.5358], [108.6438, 33.5413], [108.6438, 33.5083], [108.5889, 33.4589], [108.5999, 33.4094], [108.5779, 33.3765], [108.5779, 33.2996], [108.6438, 33.316], [108.6768, 33.3105], [108.7097, 33.2666], [108.7427, 33.2776], [108.7976, 33.2501], [108.8965, 33.1567], [108.9404, 33.1238], [108.9734, 33.1403], [108.9734, 33.1677], [109.0393, 33.1842], [109.0613, 33.2117], [109.1272, 33.1567], [109.2261, 33.1897], [109.259, 33.1677], [109.325, 33.1567], [109.3359, 33.1238], [109.3689, 33.1458], [109.4348, 33.1458], [109.6106, 33.1073], [109.6875, 33.1128], [109.7974, 33.0634], [109.7644, 32.9095], [109.7864, 32.8766], [109.8413, 32.8876], [109.8633, 32.9095], [109.9072, 32.9041], [109.9402, 32.8876], [110.0281, 32.8711], [110.094, 32.8381], [110.1379, 32.8107], [110.127, 32.7722], [110.1599, 32.7557], [110.1709, 32.7173], [110.1489, 32.6788], [110.1709, 32.6678], [110.2039, 32.6294], [110.1489, 32.5909], [110.127, 32.6129], [110.083, 32.6184], [110.094, 32.5854], [110.0281, 32.5415], [109.8962, 32.5909], [109.8193, 32.5745], [109.7534, 32.5854], [109.7314, 32.6019], [109.6216, 32.5909], [109.6436, 32.5415], [109.5886, 32.514], [109.5227, 32.4316], [109.5337, 32.3987], [109.5007, 32.3822], [109.5227, 32.3328], [109.4897, 32.2943], [109.5227, 32.2833], [109.5557, 32.2229], [109.6106, 32.2064], [109.5886, 32.157], [109.6216, 32.1075], [109.5886, 32.0306], [109.5886, 31.9977], [109.6216, 31.9702], [109.6326, 31.9427], [109.5886, 31.8933], [109.6106, 31.8823], [109.6436, 31.8109], [109.6106, 31.7999], [109.5886, 31.778], [109.5996, 31.7505], [109.5667, 31.7285], [109.4458, 31.723], [109.3799, 31.7065], [109.292, 31.7175], [109.281, 31.745], [109.259, 31.7615], [109.281, 31.778], [109.281, 31.7944], [109.1931, 31.8164], [109.1931, 31.8604], [109.0833, 31.9318], [108.9844, 31.9812], [108.8855, 31.9922], [108.8525, 32.0361], [108.7976, 32.0471], [108.7537, 32.0746], [108.7317, 32.1075], [108.6658, 32.1075], [108.5779, 32.1735], [108.512, 32.2009], [108.512, 32.2449], [108.468, 32.2723], [108.3472, 32.2559], [108.3252, 32.2339], [108.2483, 32.2723], [108.1824, 32.2229], [108.1604, 32.2394], [108.1824, 32.2559], [108.1824, 32.2723], [108.1274, 32.3273], [108.1274, 32.3438], [108.1055, 32.3767], [108.1384, 32.3767], [108.1165, 32.4371], [108.1824, 32.4261], [108.2813, 32.4921], [108.2483, 32.569], [108.1824, 32.6129], [108.2593, 32.6019], [108.2593, 32.6459], [108.2483, 32.7063], [108.1934, 32.7612], [108.1384, 32.7777], [108.1494, 32.7997], [108.1165, 32.8217], [108.0945, 32.8711], [108.0725, 32.8821], [108.0835, 32.9095], [108.1055, 32.915], [108.1165, 32.9425], [108.1165, 32.9755], [108.1384, 33.0084], [108.0945, 33.0798], [108.1055, 33.1183], [108.0945, 33.1732], [108.1165, 33.2062], [108.0725, 33.2172], [108.0286, 33.2611], [108.0505, 33.2886], [108.0505, 33.338], [108.1384, 33.4149], [108.1494, 33.4534], [108.1384, 33.4753], [108.0615, 33.5083], [108.0725, 33.5907], [108.0505, 33.6292], [108.0505, 33.7115]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6110”, “name”: “商洛市”, “cp”: [109.8083, 33.761], “childNum”: 7 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[108.8416, 33.8159], [108.8965, 33.8379], [108.9185, 33.8708], [109.0063, 33.8873], [109.0503, 33.9203], [109.1052, 33.9038], [109.1162, 33.8763], [109.1382, 33.8708], [109.2151, 33.8654], [109.259, 33.8818], [109.314, 33.8544], [109.3579, 33.8654], [109.4458, 33.8379], [109.5007, 33.8489], [109.5996, 33.9038], [109.5996, 33.9423], [109.5337, 33.9862], [109.5667, 34.0631], [109.6326, 34.0741], [109.6655, 34.1016], [109.7424, 34.0961], [109.7424, 34.1235], [109.7864, 34.162], [109.7864, 34.1455], [109.8193, 34.151], [109.7534, 34.1949], [109.7534, 34.2114], [109.7534, 34.2499], [109.7754, 34.2554], [109.7974, 34.2224], [109.7974, 34.2664], [109.8193, 34.2883], [109.8523, 34.2664], [109.8743, 34.2719], [109.8853, 34.2444], [109.9182, 34.2279], [109.9512, 34.2444], [109.9622, 34.2114], [109.9951, 34.2224], [110.0171, 34.2389], [110.0061, 34.2993], [110.0391, 34.3103], [110.0061, 34.3652], [110.0391, 34.3817], [110.061, 34.4147], [110.105, 34.4312], [110.1709, 34.4312], [110.2917, 34.3927], [110.4346, 34.4092], [110.4785, 34.4092], [110.5005, 34.3433], [110.5005, 34.3268], [110.4785, 34.3213], [110.4456, 34.2938], [110.4346, 34.2883], [110.4346, 34.2499], [110.5444, 34.2169], [110.5554, 34.1949], [110.6433, 34.162], [110.6323, 34.129], [110.5884, 34.0961], [110.5994, 34.0686], [110.5774, 34.0411], [110.5994, 34.0247], [110.6213, 34.0302], [110.6543, 33.9752], [110.6763, 33.9478], [110.5884, 33.8983], [110.5884, 33.8818], [110.6104, 33.8489], [110.6653, 33.8544], [110.7092, 33.8379], [110.7422, 33.7994], [110.7751, 33.7994], [110.8191, 33.7555], [110.8411, 33.6676], [111.0059, 33.5797], [111.0059, 33.5303], [111.0278, 33.4808], [111.0168, 33.4534], [110.9949, 33.4369], [111.0388, 33.3655], [111.0388, 33.3325], [111.0059, 33.3215], [110.9839, 33.2666], [110.9949, 33.2501], [110.9619, 33.2556], [110.918, 33.2062], [110.874, 33.2117], [110.8301, 33.2007], [110.8191, 33.1512], [110.7642, 33.1512], [110.7312, 33.1348], [110.7092, 33.0963], [110.6543, 33.1567], [110.6323, 33.1458], [110.5994, 33.1567], [110.5884, 33.2391], [110.5334, 33.2556], [110.5334, 33.2281], [110.5115, 33.2336], [110.4675, 33.1732], [110.3577, 33.1842], [110.3357, 33.1677], [110.2258, 33.1622], [110.1709, 33.2117], [110.072, 33.2062], [110.061, 33.1952], [110.0171, 33.2062], [109.9841, 33.2007], [109.8633, 33.2501], [109.7424, 33.2336], [109.7095, 33.2391], [109.6985, 33.2556], [109.6545, 33.2501], [109.6216, 33.2721], [109.6106, 33.2336], [109.5227, 33.2446], [109.5007, 33.2227], [109.5007, 33.2117], [109.4348, 33.1458], [109.3689, 33.1458], [109.3359, 33.1238], [109.325, 33.1567], [109.259, 33.1677], [109.2261, 33.1897], [109.1272, 33.1567], [109.0613, 33.2117], [109.0393, 33.1842], [108.9734, 33.1677], [108.9734, 33.1403], [108.9404, 33.1238], [108.8965, 33.1567], [108.7976, 33.2501], [108.7427, 33.2776], [108.7097, 33.2666], [108.6768, 33.3105], [108.6438, 33.316], [108.5779, 33.2996], [108.5779, 33.3765], [108.5999, 33.4094], [108.5889, 33.4589], [108.6438, 33.5083], [108.6438, 33.5413], [108.7537, 33.5358], [108.8196, 33.6182], [108.8196, 33.6292], [108.7976, 33.6401], [108.7976, 33.6566], [108.8306, 33.6456], [108.8855, 33.7006], [108.9075, 33.6731], [108.9294, 33.6786], [108.9514, 33.728], [108.9404, 33.761], [108.9075, 33.7775], [108.8306, 33.7775], [108.8416, 33.8159]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6103”, “name”: “宝鸡市”, “cp”: [107.1826, 34.3433], “childNum”: 10 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[107.8198, 34.975], [107.8198, 34.942], [107.8528, 34.8926], [107.8528, 34.8486], [107.9077, 34.8431], [107.9517, 34.8596], [107.9517, 34.8047], [108.0066, 34.7772], [108.0286, 34.6234], [107.9956, 34.6069], [107.9846, 34.574], [108.0066, 34.541], [107.9956, 34.4916], [108.0286, 34.4806], [108.0066, 34.4421], [108.0505, 34.3213], [107.9517, 34.3213], [107.9517, 34.2938], [107.9736, 34.2828], [108.0505, 34.2828], [108.0505, 34.2334], [108.0286, 34.2224], [108.0176, 34.1675], [108.0066, 34.151], [107.9956, 34.1016], [107.9407, 34.0356], [107.9517, 33.9862], [107.9187, 33.9862], [107.8967, 34.0027], [107.8418, 33.9752], [107.8088, 33.9972], [107.7649, 33.9478], [107.699, 33.9258], [107.688, 33.8599], [107.71, 33.8489], [107.677, 33.8104], [107.677, 33.7775], [107.6221, 33.7225], [107.5781, 33.7006], [107.5671, 33.7061], [107.5342, 33.6841], [107.4902, 33.6841], [107.4573, 33.6621], [107.4023, 33.6456], [107.3804, 33.6841], [107.2925, 33.7061], [107.2815, 33.7335], [107.3035, 33.772], [107.2705, 33.7885], [107.2375, 33.772], [107.1716, 33.7775], [107.1497, 33.8159], [107.1387, 33.7994], [107.0728, 33.8324], [107.0508, 33.8763], [107.0398, 33.8379], [107.0398, 33.7994], [106.9958, 33.7939], [106.897, 33.8434], [106.864, 33.8763], [106.842, 33.8379], [106.8091, 33.8159], [106.8091, 33.6896], [106.7981, 33.6731], [106.6772, 33.7006], [106.6992, 33.6731], [106.6443, 33.6566], [106.6553, 33.6401], [106.6223, 33.6182], [106.6223, 33.5962], [106.6003, 33.5797], [106.5784, 33.5852], [106.5784, 33.6292], [106.5564, 33.6731], [106.4795, 33.7115], [106.4795, 33.772], [106.4575, 33.8049], [106.4575, 33.8269], [106.4905, 33.8379], [106.5015, 33.8544], [106.4685, 33.8763], [106.4246, 33.8708], [106.4136, 33.9148], [106.4685, 33.9697], [106.4685, 34.0247], [106.5125, 34.0741], [106.5015, 34.1125], [106.5674, 34.1125], [106.5784, 34.14], [106.5564, 34.2279], [106.5234, 34.2554], [106.4905, 34.2499], [106.5125, 34.2828], [106.5234, 34.2938], [106.5784, 34.2773], [106.5894, 34.2499], [106.6223, 34.2609], [106.6443, 34.2444], [106.6772, 34.2554], [106.6992, 34.2828], [106.6992, 34.3213], [106.6882, 34.3323], [106.7102, 34.3707], [106.6443, 34.3927], [106.6223, 34.4476], [106.5894, 34.4586], [106.6003, 34.4641], [106.5564, 34.4861], [106.5344, 34.4806], [106.4905, 34.5245], [106.4575, 34.53], [106.3916, 34.5081], [106.3367, 34.519], [106.3367, 34.563], [106.3147, 34.585], [106.3806, 34.6289], [106.4026, 34.6289], [106.4246, 34.6564], [106.4465, 34.6344], [106.4685, 34.6454], [106.4465, 34.6729], [106.4575, 34.7113], [106.4905, 34.7223], [106.5015, 34.7498], [106.5454, 34.7498], [106.5344, 34.7772], [106.5674, 34.8047], [106.5674, 34.8322], [106.5125, 34.8926], [106.5234, 34.92], [106.4905, 34.9475], [106.4795, 34.9805], [106.5015, 35.0134], [106.4795, 35.0299], [106.5234, 35.0299], [106.5564, 35.0903], [106.6553, 35.0684], [106.6992, 35.0793], [106.7102, 35.1013], [106.8201, 35.0793], [106.908, 35.0903], [106.9629, 35.0629], [106.9958, 35.0684], [106.9849, 35.0629], [107.0068, 35.0354], [107.0508, 35.0409], [107.0508, 35.0244], [107.0837, 35.0189], [107.0947, 34.9695], [107.1716, 34.9365], [107.1936, 34.8816], [107.2705, 34.9036], [107.3035, 34.9365], [107.3364, 34.9365], [107.3584, 34.9146], [107.4023, 34.9365], [107.4573, 34.9146], [107.5232, 34.9146], [107.5671, 34.9695], [107.6001, 34.953], [107.6111, 34.9695], [107.6331, 34.964], [107.6331, 34.92], [107.677, 34.953], [107.8198, 34.975]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6105”, “name”: “渭南市”, “cp”: [109.7864, 35.0299], “childNum”: 11 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[108.9734, 34.8212], [108.9734, 34.8871], [109.0613, 34.8926], [109.0942, 34.92], [109.0833, 34.9585], [109.1382, 34.9915], [109.2151, 34.9915], [109.1931, 35.0299], [109.259, 35.0519], [109.281, 35.1013], [109.303, 35.0903], [109.3909, 35.0958], [109.4238, 35.0684], [109.4348, 35.0848], [109.4348, 35.1617], [109.3579, 35.1672], [109.314, 35.2057], [109.303, 35.2496], [109.281, 35.2551], [109.3689, 35.2881], [109.4019, 35.3265], [109.4897, 35.343], [109.5007, 35.3595], [109.5227, 35.4199], [109.5447, 35.4419], [109.6216, 35.4419], [109.7095, 35.4089], [109.7534, 35.4364], [109.8083, 35.4419], [109.8523, 35.4254], [109.8743, 35.4364], [109.9072, 35.4089], [109.9841, 35.4089], [109.9951, 35.4364], [110.0171, 35.4089], [110.061, 35.4309], [110.083, 35.4034], [110.1379, 35.4529], [110.1819, 35.4694], [110.2368, 35.5243], [110.2698, 35.5408], [110.2808, 35.5627], [110.2478, 35.5847], [110.2588, 35.6012], [110.2258, 35.6342], [110.1379, 35.6671], [110.1379, 35.6836], [110.1819, 35.7166], [110.2917, 35.7166], [110.3247, 35.744], [110.3687, 35.7605], [110.4126, 35.8099], [110.5554, 35.8539], [110.5664, 35.8099], [110.5774, 35.7001], [110.6104, 35.6506], [110.5994, 35.6012], [110.4126, 35.321], [110.3796, 35.2332], [110.3796, 35.1398], [110.2917, 34.9695], [110.2148, 34.9091], [110.2478, 34.8596], [110.2588, 34.8157], [110.2368, 34.6564], [110.2808, 34.6179], [110.3796, 34.5959], [110.3687, 34.563], [110.4016, 34.563], [110.3577, 34.519], [110.4016, 34.4312], [110.4346, 34.4092], [110.2917, 34.3927], [110.1709, 34.4312], [110.105, 34.4312], [110.061, 34.4147], [110.0391, 34.3817], [110.0061, 34.3652], [110.0391, 34.3103], [110.0061, 34.2993], [110.0171, 34.2389], [109.9951, 34.2224], [109.9622, 34.2114], [109.9512, 34.2444], [109.9182, 34.2279], [109.8853, 34.2444], [109.8743, 34.2719], [109.8523, 34.2664], [109.8193, 34.2883], [109.7974, 34.2664], [109.7974, 34.2224], [109.7754, 34.2554], [109.7534, 34.2499], [109.7534, 34.2114], [109.7205, 34.2389], [109.6326, 34.2389], [109.5776, 34.2609], [109.5227, 34.2554], [109.4568, 34.3048], [109.4568, 34.3927], [109.3909, 34.4751], [109.4128, 34.5026], [109.3909, 34.53], [109.4458, 34.552], [109.4128, 34.7388], [109.3579, 34.7333], [109.3469, 34.7003], [109.292, 34.6893], [109.1711, 34.6948], [109.1711, 34.7058], [109.0942, 34.7003], [109.0833, 34.7168], [109.0393, 34.6893], [109.0283, 34.7058], [109.0393, 34.7662], [108.9734, 34.8212]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6104”, “name”: “咸阳市”, “cp”: [108.4131, 34.8706], “childNum”: 14 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[108.6218, 35.5408], [108.6658, 35.5353], [108.6768, 35.5078], [108.7756, 35.4803], [108.7976, 35.387], [108.8306, 35.3815], [108.8525, 35.3485], [108.8635, 35.343], [108.8745, 35.3265], [108.7537, 35.2936], [108.7097, 35.2332], [108.6768, 35.2167], [108.6328, 35.1672], [108.6658, 35.1288], [108.6108, 35.1123], [108.6218, 35.1013], [108.6218, 35.0848], [108.5889, 35.0409], [108.6218, 35.0134], [108.6877, 34.8816], [108.7207, 34.8651], [108.7646, 34.8706], [108.8196, 34.8102], [108.8525, 34.8212], [108.8965, 34.8102], [108.9185, 34.8322], [108.9734, 34.8212], [109.0393, 34.7662], [109.0283, 34.7058], [109.0393, 34.6893], [109.0833, 34.7168], [109.0942, 34.7003], [109.1711, 34.7058], [109.1711, 34.6948], [109.1382, 34.6344], [109.1382, 34.5795], [109.0613, 34.5959], [108.9514, 34.5685], [108.9734, 34.541], [108.9734, 34.4916], [108.9514, 34.4202], [108.8086, 34.3652], [108.7976, 34.2938], [108.7646, 34.2938], [108.7427, 34.2773], [108.6987, 34.2719], [108.6877, 34.2389], [108.6548, 34.2609], [108.6218, 34.2609], [108.5669, 34.2279], [108.479, 34.2059], [108.3362, 34.1949], [108.2922, 34.2114], [108.2483, 34.2004], [108.1934, 34.2224], [108.1274, 34.2169], [108.0505, 34.2334], [108.0505, 34.2828], [107.9736, 34.2828], [107.9517, 34.2938], [107.9517, 34.3213], [108.0505, 34.3213], [108.0066, 34.4421], [108.0286, 34.4806], [107.9956, 34.4916], [108.0066, 34.541], [107.9846, 34.574], [107.9956, 34.6069], [108.0286, 34.6234], [108.0066, 34.7772], [107.9517, 34.8047], [107.9517, 34.8596], [107.9077, 34.8431], [107.8528, 34.8486], [107.8528, 34.8926], [107.8198, 34.942], [107.8198, 34.975], [107.8528, 34.9915], [107.8418, 35.0189], [107.7979, 35.0354], [107.7649, 35.0684], [107.7649, 35.0848], [107.7209, 35.1123], [107.71, 35.1837], [107.655, 35.2441], [107.666, 35.2551], [107.71, 35.2441], [107.7429, 35.2771], [107.7319, 35.2991], [107.7209, 35.3046], [107.7539, 35.3101], [107.8638, 35.2551], [107.9297, 35.2496], [107.9517, 35.2661], [107.9736, 35.2441], [108.0396, 35.2551], [108.1714, 35.3101], [108.2153, 35.2991], [108.2483, 35.2606], [108.3032, 35.2661], [108.3472, 35.3046], [108.3691, 35.2826], [108.446, 35.2771], [108.49, 35.2771], [108.5559, 35.3046], [108.5779, 35.2881], [108.6328, 35.4089], [108.6218, 35.4803], [108.5999, 35.4968], [108.6218, 35.5408]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6101”, “name”: “西安市”, “cp”: [109.1162, 34.2004], “childNum”: 5 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[107.6221, 33.7225], [107.677, 33.7775], [107.677, 33.8104], [107.71, 33.8489], [107.688, 33.8599], [107.699, 33.9258], [107.7649, 33.9478], [107.8088, 33.9972], [107.8418, 33.9752], [107.8967, 34.0027], [107.9187, 33.9862], [107.9517, 33.9862], [107.9407, 34.0356], [107.9956, 34.1016], [108.0066, 34.151], [108.0176, 34.1675], [108.0286, 34.2224], [108.0505, 34.2334], [108.1274, 34.2169], [108.1934, 34.2224], [108.2483, 34.2004], [108.2922, 34.2114], [108.3362, 34.1949], [108.479, 34.2059], [108.5669, 34.2279], [108.6218, 34.2609], [108.6548, 34.2609], [108.6877, 34.2389], [108.6987, 34.2719], [108.7427, 34.2773], [108.7646, 34.2938], [108.7976, 34.2938], [108.8086, 34.3652], [108.9514, 34.4202], [108.9734, 34.4916], [108.9734, 34.541], [108.9514, 34.5685], [109.0613, 34.5959], [109.1382, 34.5795], [109.1382, 34.6344], [109.1711, 34.6948], [109.292, 34.6893], [109.3469, 34.7003], [109.3579, 34.7333], [109.4128, 34.7388], [109.4458, 34.552], [109.3909, 34.53], [109.4128, 34.5026], [109.3909, 34.4751], [109.4568, 34.3927], [109.4568, 34.3048], [109.5227, 34.2554], [109.5776, 34.2609], [109.6326, 34.2389], [109.7205, 34.2389], [109.7534, 34.2114], [109.7534, 34.1949], [109.8193, 34.151], [109.7864, 34.1455], [109.7864, 34.162], [109.7424, 34.1235], [109.7424, 34.0961], [109.6655, 34.1016], [109.6326, 34.0741], [109.5667, 34.0631], [109.5337, 33.9862], [109.5996, 33.9423], [109.5996, 33.9038], [109.5007, 33.8489], [109.4458, 33.8379], [109.3579, 33.8654], [109.314, 33.8544], [109.259, 33.8818], [109.2151, 33.8654], [109.1382, 33.8708], [109.1162, 33.8763], [109.1052, 33.9038], [109.0503, 33.9203], [109.0063, 33.8873], [108.9185, 33.8708], [108.8965, 33.8379], [108.8416, 33.8159], [108.7646, 33.8049], [108.7537, 33.8379], [108.7097, 33.8269], [108.6548, 33.8434], [108.6108, 33.8269], [108.5779, 33.7665], [108.49, 33.8049], [108.4021, 33.7665], [108.3582, 33.7939], [108.1824, 33.7115], [108.0835, 33.728], [108.0505, 33.7115], [107.9517, 33.739], [107.9187, 33.7335], [107.9077, 33.7445], [107.8528, 33.6951], [107.7209, 33.728], [107.666, 33.7006], [107.6221, 33.7225]]] } },
                        { “type”: “Feature”, “properties”: { “id”: “6102”, “name”: “铜川市”, “cp”: [109.0393, 35.1947], “childNum”: 2 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[[108.8635, 35.343], [108.9294, 35.3705], [109.0503, 35.5463], [109.0942, 35.5408], [109.1162, 35.5682], [109.1821, 35.5792], [109.2151, 35.5737], [109.2151, 35.5353], [109.2261, 35.5243], [109.4019, 35.5188], [109.4238, 35.4968], [109.4678, 35.5078], [109.4678, 35.4803], [109.4788, 35.4694], [109.4568, 35.4584], [109.4788, 35.4364], [109.4678, 35.4199], [109.4897, 35.3979], [109.4897, 35.376], [109.5007, 35.3595], [109.4897, 35.343], [109.4019, 35.3265], [109.3689, 35.2881], [109.281, 35.2551], [109.303, 35.2496], [109.314, 35.2057], [109.3579, 35.1672], [109.4348, 35.1617], [109.4348, 35.0848], [109.4238, 35.0684], [109.3909, 35.0958], [109.303, 35.0903], [109.281, 35.1013], [109.259, 35.0519], [109.1931, 35.0299], [109.2151, 34.9915], [109.1382, 34.9915], [109.0833, 34.9585], [109.0942, 34.92], [109.0613, 34.8926], [108.9734, 34.8871], [108.9734, 34.8212], [108.9185, 34.8322], [108.8965, 34.8102], [108.8525, 34.8212], [108.8196, 34.8102], [108.7646, 34.8706], [108.7207, 34.8651], [108.6877, 34.8816], [108.6218, 35.0134], [108.5889, 35.0409], [108.6218, 35.0848], [108.6218, 35.1013], [108.6108, 35.1123], [108.6658, 35.1288], [108.6328, 35.1672], [108.6768, 35.2167], [108.7097, 35.2332], [108.7537, 35.2936], [108.8745, 35.3265], [108.8635, 35.343]]] } }
                    ]
            }
            //提示框 (注意设置提示框的绝对路径)
            var tooltip = d3.select(“body”)
                .append(“div”)
                .attr(“opacity”, 0.0)
                .attr(“class”, “tooltip”)
                ;
            //添加一个g标签
            var china = svg.append(“g”);
            //绘制个省份的path路径
            var provinces = china.selectAll(“path”)
                .data(georoot.features)
                .enter()
                .append(“path”)
                .style(“fill”, “#ccc”)
                .attr(“stroke”, “black”)
                .attr(“stroke-width”, “1px”)
                .attr(“d”, path);
            //在地图上显示各个身份的名称
            svg.selectAll(“text”)
                .data(georoot.features)
                .enter()
                .append(“text”)
                //设置各个文本(省份名称)显示的文字
                .attr(“transform”, function (d, i) {
                    if (d.properties.id == “20”) //河北
                    {
                        return “translate(” + (path.centroid(d)[0] – 20) + “,” + (path.centroid(d)[1] + 20) + “)”;
                    }
                    return “translate(” + (path.centroid(d)[0] – 10) + “,” + path.centroid(d)[1] + “)”;
                })
                /* .attr(“x”, function(d) {
                         return (path.centroid(d)[0]-10);
                 })
                 .attr(“y”, function(d) {
                     if(d.properties.id ==”20″) //河北
                     {
                         return (path.centroid(d)[1]+30);
                     }
                     return (path.centroid(d)[1]);
                 }) */
                //显示省名
                .text(function (d) {
                    return d.properties.name;
                })
                .attr(“font-size”, 12);
            var dataset = {
                “name”: “陕西”,
                “provinces”:
                    [
                        { “name”: “榆林市”, “value”: 141 },
                        { “name”: “延安市”, “value”: 222 },
                        { “name”: “汉中市”, “value”: 154 },
                        { “name”: “安康市”, “value”: 372 },
                        { “name”: “商洛市”, “value”: 277 },
                        { “name”: “宝鸡市”, “value”: 626 },
                        { “name”: “渭南市”, “value”: 449 },
                        { “name”: “咸阳市”, “value”: 383 },
                        { “name”: “西安市”, “value”: 549 },
                        { “name”: “铜川市”, “value”: 122 }
                    ]
            } //将数据保存在数组中,(数组索引号为各省的名称)
            var datas = [];
            var datam = [];
            for (var i = 0; i < dataset.provinces.length; i++) {
                var name = dataset.provinces[i].name;
                var value = dataset.provinces[i].value;
                datas[name] = value; //例如 datas[北京]=14149
                datam.push(value); //datam 数组用于求中间值
            }
            //取出数据中的最大值和最小值
            var maxdata = d3.max(dataset.provinces, function (d) {
                return d.value;
            });
            var mindata = 0;
            //定义一个线性比例尺
            var linear = d3.scale.linear()
                .domain([mindata, maxdata])
                .range([0, 1]);
            //定义颜色
            var b = d3.rgb(130, 140, 20);
            var a = d3.rgb(255, 255, 180);
            //设置颜色插值
            var color = d3.interpolate(a, b);
            //给个省份填充颜色
            provinces.style(“fill”, function (d, i) {
                var t = linear(datas[d.properties.name]);
                var col = color(t);
                return col.toString();
            })
                //提示框
                .on(“mouseover”, function (d, i) {
                    d3.select(this).attr(“fill”, “#ccc”);
                    tooltip.html(d.properties.name + “:” + datas[d.properties.name])
                        .style(“left”, (d3.event.pageX) + “px”)
                        .style(“top”, (d3.event.pageY + 20) + “px”)
                        .style(“opacity”, 1.0);
                })
                .on(“mousemove”, function (d, i) {
                    tooltip.html(d.properties.name + “:” + datas[d.properties.name])
                        .style(“left”, (d3.event.pageX) + “px”)
                        .style(“top”, (d3.event.pageY + 20) + “px”)
                        .style(“opacity”, 1.0);
                })
                .on(“mouseout”, function (d, i) {
                    d3.select(this).attr(“fill”, color(i));
                    tooltip.style(“opacity”, 0.0);
                });
            //显示渐变矩形条
            var defs = svg.append(“defs”);
            var linearGradient = defs.append(“linearGradient”)
                .attr(“id”, “linearColor”)
                //颜色渐变方向
                .attr(“x1”, “0%”)
                .attr(“y1”, “0%”)
                .attr(“x2”, “100%”)
                .attr(“y2”, “0%”);
            //设置矩形条开始颜色
            var stop1 = linearGradient.append(“stop”)
                .attr(“offset”, “0%”)
                .attr(“stop-color”, a.toString());
            //设置结束颜色
            var stop2 = linearGradient.append(“stop”)
                .attr(“offset”, “100%”)
                .attr(“stop-color”, b.toString());
            var colorRect = svg.append(“rect”)
                //x,y 矩形的左上角坐标
                .attr(“x”, 50)
                .attr(“y”, 50)
                //矩形的宽高
                .attr(“width”, 200)
                .attr(“height”, 20)
                //引用上面的id 设置颜色
                .style(“fill”, “url(#” + linearGradient.attr(“id”) + “)”);
            //设置文字
            //数据初值
            var startText = svg.append(“text”)
                .attr(“x”, 50)
                .attr(“y”, 45)
                .text(mindata);
            //数据中间值
            var middleText = svg.append(“text”)
                .attr(“x”, 125)
                .attr(“y”, 45)
                .text(
                    //d3.mean(datam)//平均值
                    d3.median(datam) //中间值
                );
            //数据末值
            var endText = svg.append(“text”)
                .attr(“x”, 250)
                .attr(“y”, 45)
                .text(maxdata);
        }
    </script>
</body>
</html>

java开发h5前端设计师 vuejs前端开发 前端开发与java对接

» 本文来自:前端开发者 » 《前端使用D3.js制作地图》
» 本文链接地址:https://www.rokub.com/5758.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!