天地图 + 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 绘制中国行政区划相关推荐

matlab m_map绘制中国行政区划 political region
Question: 我想画三个省的行政边界,然后在这个范围内做等值线,我现在需要怎么呢? Answer: 把m_proj中的范围设置为关注区域,先绘行政区划,hold on,然后再m_contourf ...
Echarts Chinajs绘制中国地图全国geojson
Echarts绘制中国地图地图geojson下载 https://gitee.com/wr_st/chinageojson <style scoped> .chart_map {widt ...
天地图专题五：在天地图上绘制电子区域并保存数据
版权声明:本文为博主原创文章,转载请注明出处. 上一文章讲了如何在天地图上显示坐标轨迹. 本文介绍如何在天地图上绘制电子区域(电子范围或电子栅栏),并且,我们要将我们绘制的电子区域的坐标数据保存到数组 ...
Ant Design Charts绘制中国地图并动态添加标记点
绘制中国地图并动态添加标记点,在这里使用的是antd charts绘制,需要求只显示中国地图,并且跟踪物流信息使用组件地址: 图表 - Plot | Ant Design Charts 这里的引入方 ...
CnOpenData中国行政区划shp数据
一.数据简介中国行政区划数据是重要的基础地理信息数据,目前不同来源的全国行政区划数据非常多,但能够开放获取的高质量行政区域数据少之又少.基于此,锐多宝的地理空间制作一套2013-2023年可开放 ...
matlab绘制中国南海地图（九段线小图）
matlab绘制中国南海地图(九段线小图) 网上关于怎么画南海九段线小图的文章不多,在此记录一下. 绘制南海图首先要下载中国地图的shp文件,参见上一篇文章. %------------------ ...
cesium绘制中国边界，设置边界样式
cesium绘制中国边界,设置边界样式,步骤如下: 步骤一: 从http://datav.aliyun.com/portal/school/atlas/area_selector网站下载geojson ...
android天地图画区域,天地图专题五：在天地图上绘制电子区域并保存数据
上一文章讲了如何在天地图上显示坐标轨迹. 本文介绍如何在天地图上绘制电子区域(电子范围或电子栅栏),并且,我们要将我们绘制的电子区域的坐标数据保存到数组里,以用于提交到后台,或根据数据来绘制电子区域. ...
使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
qcustomplot绘制热力图瀑布图_使用REmap绘制中国地图
上次我们介绍了使用ggplot2绘制中国热力地图,需要温习的同学可以点击以下链接使用ggplot2绘制中国地图 .在使用ggplot2绘制的时候,需要进行数据处理的步骤比较多,今天我们介绍一个新的 ...

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

天地图 + geojson 绘制中国行政区划相关推荐

最新文章

热门文章