天地图 + geojson 绘制中国行政区划

星良辰寻

已于 2022-06-10 15:54:15 修改

阅读量7.6k

点赞数 5

分类专栏：天地图文章标签： javascript html5

于 2021-07-07 16:56:28 首次发布

本文链接：https://blog.csdn.net/josiecici/article/details/118551879

版权

天地图专栏收录该内容

4 篇文章 5 订阅

订阅专栏

我的效果：
天地图官网例子+来源：（可将官网的geojson换成全国或某省的就行了,就可以得到想要的省市县的行政区）
在这里插入图片描述
geojson线上地址来源：

源码：

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>天地图－地图API－范例-加载geojson数据</title>
	<link href="../../../../images/favicon.ico" type="image/x-icon" rel="Shortcut Icon"/>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0
        }

        #map-canvas {
            height: 100%;
            fill: #000000;
        }
    </style>
</head>
<body>
<div id="map-canvas"></div>
<script src=" http://api.tianditu.gov.cn/api?v=4.0&tk=自己在天地图申请的key" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
<script>
    var countries = [];
    var countriesOverlay = new T.D3Overlay(init,redraw);
    var countriesOverlay1 = new T.D3Overlay(init1,redraw1);

    var map = new T.Map("map-canvas");
    map.centerAndZoom(new T.LngLat(116.39769, 40.25945), 9)

    d3.json("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", function (data) {
        countries = data.features;
        map.addOverLay(countriesOverlay)
        countriesOverlay.bringToBack();
        map.addOverLay(countriesOverlay1)
        countriesOverlay.bringToBack();
    });

    function init(sel, transform) {
        var upd = sel.selectAll('path.geojson').data(countries);
        upd.enter()
                .append('path')
                .attr("class", "geojson")
                .attr('stroke', 'black')
                .attr('fill', function (d, i) {
                    return d3.hsl(Math.random() * 360, 0.9, 0.5)
                })
                .attr('fill-opacity', '0.5')

         
    }

    function redraw(sel, transform) {
        sel.selectAll('path.geojson').each(
                function (d, i) {
                    d3.select(this).attr('d', transform.pathFromGeojson)
                   // .on("mouseover",function(){
             // console.log('这是点击了',);
         // })
                }
        )

    }


    function init1(sel, transform) {
        var upd = sel.selectAll('path.geojson1').data(countries);
        upd.enter()
            .append('path')
            .attr("class", "geojson1")
            .attr('stroke', 'black')
            .attr('fill', function (d, i) {
                return d3.hsl(Math.random() * 360, 0.9, 0.5)
            })
            .attr('fill-opacity', '0.5')


    }

    function redraw1(sel, transform) {
        sel.selectAll('path.geojson1').each(
            function (d, i) {
                d3.select(this).attr('d', transform.pathFromGeojson)
            }
        )

    }

</script>

</body>
</html>

最终我自己的加载到天地图的效果：
在这里插入图片描述

星良辰寻

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
41
评论
天地图 + geojson 绘制中国行政区划

我的效果：（这里没放天地图key，所以地图出不来= =）天地图官网例子+来源：（可将官网的geojson换成全国或某省的就行了,就可以得到想要的省市县的行政区）geojson线上地址来源：
复制链接

扫一扫