生活随笔
收集整理的這篇文章主要介紹了
天地图 + geojson 绘制中国行政区划
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我的效果：
天地圖官網例子+來源：（可將官網的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>
最終我自己的加載到天地圖的效果：
總結
以上是生活随笔為你收集整理的天地图 + geojson 绘制中国行政区划的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
