现在位置：第十六章 中国地图
本章以中国地图为例，介绍地图的制作方法。
在数据可视化中，地图是很重要的一部分。很多情况会与地图有关联，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。
地图数据的获取
制作地图需要 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式，可以学习【】系列。
将 JSON 的格式应用于地理上的文件，叫做 GeoJSON 文件。本文就是用这种文件绘制地图。
那么如何获取中国地图的 GeoJSON 文件呢，真的有点麻烦，可以参照：进行制作。这不仅需要安装一些东西，还要研究一下制作方法，对想直接下载获取中国地图的 GeoJSON 文件的朋友可能感觉很不舒服，呵呵，其实我也是这样。
好吧，我辛苦一点，将制作好的中国地图放上来与大家分享。
中国地图的 GeoJSON 文件：
这个文件是用
上的数据，经过提取后制作而成，我还去掉了很多无用的信息，只保留的中国的各省份的名字和 id 号，在这里先感谢 Natural Earth 提供的数据。
本站还提供有其他国家、以及具体到中国县级的地理文件，希望为大家节省宝贵的时间，这个部分还是很麻烦的。对于只希望进行可视化的朋友来说，估计不想做这个工作。目前已经制作好的：
好了，开始绘制地图吧。
var projection = d3.geo.mercator()
.center([107, 31])
.scale(850)
.translate([width/2, height/2]);
由于 GeoJSON 文件中的地图数据，都是经度和纬度的信息。它们都是三维的，而要在网页上显示的是二维的，所以要设定一个投影函数来转换经度纬度。如上所示，使用 d3.geo.mercator() 的投影方式。各种投影的函数，可以参考：
第 2 行：center() 设定地图的中心位置，[107,31] 指的是经度和纬度。
第 3 行：scale() 设定放大的比例。
第 4 行：translate() 设定平移。
地理路径生成器
为了根据地图的地理数据生成 SVG 中 path 元素的路径值，需要用到 d3.geo.path()，我称它为地理路径生成器。
var path = d3.geo.path()
.projection(projection);
projection() 是设定生成器的投影函数，把上面定义的投影传入即可。以后，当使用此生成器计算路径时，会自己加入投影的影响。
向服务器请求文件并绘制地图
d3.json("china.json", function(error, root) {
if (error)
return console.error(error);
console.log(root.features);
svg.selectAll("path")
.data( root.features )
.append("path")
.attr("stroke","#000")
.attr("stroke-width",1)
.attr("fill", function(d,i){
return color(i);
.attr("d", path )
//使用地理路径生成器
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill",color(i));
再次声明：d3.json() 不能直接读取本地文件，因此你需要搭建一个服务器，例如 Apache。
接下来，就是给 svg 中添加 path 元素。本例中，每一个 path 表示一个省。要注意 attr(“d”,path) 这一行代码，它相当于：
.attr("d",funtion(d){
return path(d);
这种省略用法是很常用的，请务必掌握。
好了，看结果吧：
下载地址：
展示地址：
注意，由于需要读取地图的数据文件，显示可能会有延迟。拒绝访问 | www. | 百度云加速
请打开cookies.
此网站 (www.) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3b6a-ua98).
重新安装浏览器，或使用别的浏览器前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化。其实就是使用了第三方插件，比现在比较火的可视化插件d3.js echart.js。大致思路就是，把要用到的位置的geojson数据报错，然后本地调用这些数据，通过d3.js或者echart.js通过地图中的api把他显示到页面上，这样可以更直观更方便的进行预览，也就是现在比较火的数据可视化，也是未来前端发展的一个不错的方向。由于第一次做所以有些需要优化的地方自己可以根据需求优化。代码如下：
&!DOCTYPE html&&html&&!--&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&--&&head lang="en"&
&meta charset="UTF-8"&
&meta name="keywords" content="天地图"/&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&title&政务服务平台&/title&
&!--&link rel="stylesheet" href="https://cdn./libs/bootstrap/3.3.7/css/bootstrap.min.css"&--&
&link href="css/style.css" rel="stylesheet" type="text/css"&
&script type="text/javascript" src="/api?v=4.0"&&/script&
&!–[if lt IE 8]&
&script src=”http://ie7-/svn/version/2.0(beta)/IE11.js” type=”text/javascript”&&/script&
&![endif]–&&/head&&body onLoad="onLoad()"&&!--地图调用--&&div id="main"&&/div&&!--下拉菜单--&&div class="select"&
&!--头部--&
&div class="navbar"&
&div class="logo"&&/div&
&div class="text"&政务服务平台&/div&
&div class="navTab"&&img src="images/icon.png" width="100%"/&
&div class="menu"&菜单&/div&
&!--下部弹出的详情--&
&div class="footerbar"&
&!--下拉框左边--&
&div class="footerbar_left"&
&!--专题logo--&
&div class="top"&&img src="images/click_zhuanti.png" width="100%" height="100%"/&&/div&
&!--搜索logo--&
&!--下拉框右边--&
&div class="footerbar_right"&
&div class="top"&
&div class="cont"&
&div class="cont_text1"&专题&/div&
&div class="cont_text2"&清除所选&/div&
&div class="bottom"&
&!--水利工程开始list_1--&
&div class="tabs"&水利工程&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_1"&
&span&&input type="checkbox" class="checkbox" id="sz"&&/span&
&span&水闸&/span&
&span&&img src="images/shuizha_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="sb"&&/span&
&span&水坝&/span&
&span&&img src="images/shuiba_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="bz"&&/span&
&span&泵站&/span&
&span&&img src="images/bangzhan_logo.png" width="24" height="24"/&&/span&
&!--水利工程结束--&
&!--教育机构开始list_2--&
&div class="tabs"&教育机构&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_2"&
&span&&input type="checkbox" class="checkbox" id="sm"&&/span&
&span&小学&/span&
&span&&img src="images/xiaoxue_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="md"&&/span&
&span&中学&/span&
&span&&img src="images/zhongxue_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="dx"&&/span&
&span&大学&/span&
&span&&img src="images/daxue_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="yry"&&/span&
&span&幼儿园&/span&
&span&&img src="images/youeryuan_logo.png" width="24" height="24"/&&/span&
&!--教育机构结束--&
&!--旅游景点开始list_3--&
&div class="tabs"&旅游景点&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_3"&
&span&&input type="checkbox" class="checkbox" id="input_5"&&/span&
&span&5A级景点&/span&
&span&&img src="images/5a_logo.png"/&&/span&
&span&&input type="checkbox" class="checkbox" id="input_4"/&&/span&
&span&4A级景点&/span&
&span&&img src="images/4a_logo.png"/&&/span&
&span&&input type="checkbox" class="checkbox" id="input_3"/&&/span&
&span&3A级景点&/span&
&span&&img src="images/3a_logo.png"/&&/span&
&span&&input type="checkbox" class="checkbox" id="input_2"/&&/span&
&span&2A级景点&/span&
&span&&img src="images/2a_logo.png"/&&/span&
&!--旅游景点结束--&
&!--消防设施开始list_4--&
&div class="tabs"&消防设施&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_4"&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&消防栓&/span&
&span&&img src="images/xiaofang.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&接合器&/span&
&span&&img src="images/jieheqi_logo.png" width="24" height="24"/&&/span&
&!--消防设施结束--&
&!--司法服务开始list_5--&
&div class="tabs"&司法服务&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_5"&
&span&&input type="checkbox" class="checkbox" id="sfs"&&/span&
&span&司法所&/span&
&span&&img src="images/JusticBureau_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="lssws"&&/span&
&span&律师事务所&/span&
&span&&img src="images/firm_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="yzzx"&&/span&
&span&援助中心&/span&
&span&&img src="images/legalCenter_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="jdjg"&&/span&
&span&鉴定机构&/span&
&span&&img src="images/jianding_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="gzc"&&/span&
&span&公证处&/span&
&span&&img src="images/nativeoffice_logo.png" width="24" height="24"/&&/span&
&!--司法服务结束--&
&!--公路设施开始list_6--&
&div class="tabs"&公路设施&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_6"&
&span&&input type="checkbox" class="checkbox" id=""&&/span&
&span&限高架&/span&
&span&&img src="images/gao.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id=""&&/span&
&span&百米桩&/span&
&span&&img src="images/bai.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id=""&&/span&
&span&里程碑&/span&
&span&&img src="images/licheng.png" width="24" height="24"/&&/span&
&!--公路设施结束--&
&!--地下管网开始list_7--&
&div class="tabs"&地下管网&span
class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_7"&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&热力&/span&
&span&&img src="images/reli_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&燃气&/span&
&span&&img src="images/ranqi_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&给水&/span&
&span&&img src="images/geishui_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&排水&/span&
&span&&img src="images/paishui_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&电信&/span&
&span&&img src="images/dianxin_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&电力&/span&
&span&&img src="images/dianli_logo.png" width="24" height="24"/&&/span&
&!--地下管网结束--&
&!--安全监督开始list_8--&
&div class="tabs"&安全监督&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_8"&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&危化企业&/span&
&span&&img src="images/weihuaqiye_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&摄像头&/span&
&span&&img src="images/shexiangtou.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox"&&/span&
&span&重点设施&/span&
&span&&img src="images/zhongdiansheshi_logo.png" width="24" height="24"/&&/span&
&!--安全监督结束--&
&!--高新企业开始list_9--&
&div class="tabs"&高新企业&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_9"&
&span&&input type="checkbox" class="checkbox" id="littleCompany"&&/span&
&span&小巨人企业&/span&
&span&&img src="images/littlestrong_logo.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="scienceCompany"&&/span&
&span&新技术企业&/span&
&span&&img src="images/science_logo.png" width="24" height="24"/&&/span&
&!--高新企业结束--&
&!--武清区域开始list_10--&
&div class="tabs"&武清信息&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_10"&
&span&&input type="checkbox" class="checkbox" id="wqqy"&&/span&
&span&武清区域图&/span&
&span&&img src="images/quyu.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="wqqyg"&&/span&
&span&武清区域国道&/span&
&span&&img src="images/guodao.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="wqqys"&&/span&
&span&武清区域省道&/span&
&span&&img src="images/shengdao.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="cheakbox" id="wqqyt"&&/span&
&span&武清区城镇&/span&
&span&&img src="images/red_logo.png" width="24" height="24"/&&/span&
&!--武清区域结束--&
&!--天津各区人口面积统计开始list_11--&
&div class="tabs"&人口面积&span class="jiantou_icon"&&img src="images/three_dian.png"/&&/span&&/div&
&ul class="cont" id="list_11"&
&span&&input type="checkbox" class="checkbox" id="persons"&&/span&
&span&人口&/span&
&span&&img src="images/renkou.png" width="24" height="24"/&&/span&
&span&&input type="checkbox" class="checkbox" id="areas"&&/span&
&span&面积&/span&
&span&&img src="images/mianji.png" width="24" height="24"/&&/span&
&!--天津各区人口面积统计结束--&
&div class="bottom_footer"&
&img src="images/footer_icon.png"/&
&!--底部--&&/div&&script type="text/javascript" src="js/jquery-1.3.2.js"&&/script&&script type="text/javascript" src="js/jquery.ztree.core.js" &&/script&&script type="text/javascript" src="js/jquery.ztree.excheck.js"&&/script&&script src="js/echarts.js"&&/script&&script type="text/javascript" src="js/d3.v3.js" &&/script&&script type="text/javascript" src="js/main.js" &&/script&&!--获取地图api--&&script&
var zoom = 8;
function onLoad(){
map = new T.Map('main',{
projectino:"EPSG:900913"
map.centerAndZoom(new T.LngLat(117..281725),zoom);
}&/script&&/body&&/html&js:
/** * Created by Administrator on . *///菜单下拉$(document).ready(function (e) {
$(function (e) {
$(".select .navbar .navTab").click(function(){
$(".select .footerbar").slideToggle();
$(".bottom_footer img").click(function(){
$(".select .footerbar").slideToggle();
});});$(function () {
$(".select .navbar .navTab img").mouseover(function () {
$(".select .navbar .navTab .menu").css("display","block");
$(".select .navbar .navTab img").mouseout(function () {
$(".select .navbar .navTab .menu").css("display","none");
$()});//二级导航下拉$(".bottom .tabs").click(function(){
$(this).toggleClass("changeColor").siblings(".bottom").removeClass("changeColor");
$(this).next(".cont").slideToggle(300).siblings(".cont").slideUp(500);});//清除所有$(".footerbar_right .top .cont .cont_text2").click(function(){
$("input").attr("checked",false);
map.clearOverLays();});/*复选框点击事件开始*/$(function(){
//水利工程开始点击事件开始
$("#list_1").find("li").each(function(i){
//水利工程点击时间结束
//教育机构点击事件开始
$("#list_2").find("li").each(function(i){
//教育机构点击事件结束
//旅游景点点击事件开始
$("#list_3").find("li").each(function (i) {
if (i == 0) {
$("#input_5").click(function () {
if (this.checked) {
tourismFive();
var str = /5a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
else if (i == 1) {
$("#input_4").click(function () {
if (this.checked) {
tourismFour();
var str = /4a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
else if (i == 2) {
$("#input_3").click(function () {
if(this.checked) {
tourismThree();
var str = /3a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
console.log(this.checked)
else if (i == 3) {
$("#input_2").click(function () {
if(this.checked) {
tourismTwo();
var str = /2a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
//旅游景点点击事件结束
//消防设施点击事件开始
$("#list_4").find("li").each(function(i){
//消防设施点击事件结束
//司法服务点击事件开始
$("#list_5").find("li").each(function(i){
if (i == 0) {
$("#sfs").click(function () {
if (this.checked) {
Judical();
var str = /JusticBureau.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
else if (i == 1) {
//律师事务所
$("#lssws").click(function () {
if (this.checked) {
var str = /firm.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
else if (i == 2) {
//援助中心
$("#yzzx").click(function () {
if(this.checked) {
LegalAidCenter();
var str = /legalCenter.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
else if (i == 3) {
//鉴定机构
$("#jdjg").click(function () {
if(this.checked) {
Jianding();
var str = /jianding.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
else if (i == 4) {
$("#gzc").click(function () {
if(this.checked) {
NotarialOffice();
var str = /nativeoffice.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
//司法服务点击事件结束
//公路设施开始
$("#list_6").find("li").each(function(i){})
//公路设施结束
//高新企业开始
$("#list_9").find("li").each(function (i) {
if(i == 0){
//小巨人企业
$("#littleCompany").click(function () {
if(this.checked){
//CompanyLittleGiant();
var str = /littlestrong.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
else if(i == 1){
//高新技术企业
$("#scienceCompany").click(function(){
if(this.checked){
CompanyScience();
var str = /science.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
//高新企业结束
//武清信息开始
$("#list_10").find("li").each(function (i) {
if(i == 0){
//武清区域图
$("#wqqy").click(function () {
if(this.checked){
drawMap();
map.clearOverLays();
else if(i == 1){
//武清国道
$("#wqqyg").click(function(){
if(this.checked){
drawNationalRoad();
map.clearOverLays();
else if(i == 2){
//武清省道
$("#wqqys").click(function(){
if(this.checked){
drawProvincialRoad();
map.clearOverLays();
else if(i == 3){
//武清城镇
$("#wqqyt").click(function(){
if(this.checked){
StreetTownship();
var str = /red.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i&imgSrc.i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
//武清信息结束
//天津区域面积图开始
$("#list_11").find("li").each(function (i) {
if(i == 0){
//天津面积图
$("#areas").click(function () {
if(this.checked){
map.clearOverLays();
else if(i == 1){
//天津人口图
$("#persons").click(function(){
if(this.checked){
personNum();
map.clearOverLays();
})});/*复选框点击事件结束*///定义武清容器宽高var width = 0;height = 0;//定义svgvar svg = d3.select('#main').append('svg')
.attr('class', 'overlay')
.attr('width', width)
.attr('height', height);//定义地图、路线、标记所在的g标签//画区域var g_area = svg.append('g')
.attr('transform','translate(0,0)');//画国道var g_NationalLine = svg.append('g')
.attr('transform','translate(0,0)');//画省道var g_ProvincialLine = svg.append('g')
.attr('transform','translate(0,0)');//画城镇var g_StreetTownship = svg.append('g')
.attr('transform','translate(0,0)');//设置颜色var color = d3.scale.category20();//设置中心点var projection = d3.geo.mercator()
.center([117..407702])
.scale(20000)
.translate([width/2,height/2]);//设置投影函数var path = d3.geo.path().projection(projection);//武清区函数function drawMap(){
d3.json("data/Wuqing_area.json",function(error, root) {
return console.error(error);
var features = root.
for(var i = 0; i&features.i++) {
var feature = features[i]
var data = feature.geometry.
if (data.length & 0) {
for (var j = 0; j & data. j++) {
points = [];
for (var k = 0; k & data[j]. k++) {
var data0 = data[j][k];
//console.log(data0);
points.push(new T.LngLat(data0[0], data0[1]));
//创建面对象
var polygon = new T.Polygon(points,{
color: "#5E5C5C", weight: 2, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0
//向地图上添加面
map.addOverLay(polygon);
//console.log(points)
}})}//画国道function drawNationalRoad(){
d3.json("data/Wuqing_NationalRoad.json", function (error,root) {
return console.error(error);
var features = root.
for(var i = 0; i&features.i++){
var feature = features[i]
var data = feature.geometry.
points = [];
if(data.length&0){
for(var j =0;j&data.j++){
if(data[j].length&2){
for(var k =0 ;k&data[j].k++){
var data1 = data[j][k];
points.push(new T.LngLat(data1[0],data[1]));
//console.log(data1);
var data2 = data[j];
//console.log(data2);
points.push(new T.LngLat(data2[0],data2[1]));
//console.log(points)
//创建线对象
var line = new T.Polyline(points,{color:"#E0901D",opacity:1,weight:4});
//向地图上添加线
map.addOverLay(line);
})}//省道function drawProvincialRoad(){
d3.json("data/Wuqing_ProvincialRoad.json",function(error,root){
return console.error(error);
var features = root.
for(var i = 0; i&features.i++) {
var feature = features[i]
var data = feature.geometry.
points = [];
if (data.length & 0) {
for (var j = 0; j & data. j++) {
if (data[j].length & 2) {
for (var k = 0; k & data[j]. k++) {
//console.log(data[j][k])
var data1 = data[j][k];
points.push(new T.LngLat(data1[0], data1[1]));
//console.log(data[j]);
var data2 = data[j];
points.push(new T.LngLat(data2[0], data2[1]));
//创建线对象
var line = new T.Polyline(points,{color:"#6E41D0",opacity:1,weight:3});
//向地图上添加线
map.addOverLay(line);
//console.log(points)
})}//城镇function StreetTownship(){
d3.json("data/Wuqing_StreetTownship.json",function(error,root){
return console.error(error);
var features = root.
for(var i=0;i&features.i++){
var icon = new T.Icon({
iconUrl: "./images/red.png",
icsonSize: new T.Point(20, 20),
iconAnchor: new T.Point(0,0)
//console.log(features[i].geometry.coordinates[i]);
var coor = features[i].geometry.coordinates[0][0];
for(var j =0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor);
})}//景区//画2A景点function tourismTwo(){
d3.json("data/Tourism_2A.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/2a.png",
iconSize: new T.Point(36, 36),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//画3A景点function tourismThree(){
d3.json("data/Tourism_3A.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/3a.png",
iconSize: new T.Point(36, 36),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//画4A景点function tourismFour(){
d3.json("data/Tourism_4A.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/4a.png",
iconSize: new T.Point(36, 36),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
})}//画5A景点function tourismFive(){
d3.json("data/Tourism_5A.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/5a.png",
iconSize: new T.Point(36,36),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
//司法服务//画司法局function JusticBureau(){
d3.json("data/Low_JusticBureau.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/judical.png",
iconSize: new T.Point(20,20),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//画律师事务所function Firm(){
d3.json("data/Low_Firm.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/firm.png",
iconSize: new T.Point(20,20),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//画法律援助中心function LegalAidCenter(){
d3.json("data/LegalAidCenter.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/legalCenter.png",
iconSize: new T.Point(20,20),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//公证处function NotarialOffice(){
d3.json("data/Law_NotarialOffice.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/nativeoffice.png",
iconSize: new T.Point(20,20),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//鉴定机构function Jianding(){
d3.json("data/Law_Jianding.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/jianding.png",
iconSize: new T.Point(20,20),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//司法所function Judical(){
d3.json("data/Law_JudicalOffice_.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/JusticBureau.png",
iconSize: new T.Point(20,20 ),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}/*高新企业*///高新技术企业function CompanyScience(){
d3.json("data/Company_Science.json",function(error,root) {
if (error)
return console.error(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/science.png",
iconSize: new T.Point(20,20),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
//console.log(coor)
})}//小巨头企业function CompanyLittleGiant(){
d3.json("data/Company_LittleGiant.json",function(error,root) {
if (error)
return console.error(error);
//console.log(error);
//console.log(root.features);
var features = root.
for (var i = 0; i & features. i++) {
var feature = features[i];
var coor = feature.geometry.
var icon = new T.Icon({
iconUrl: "./images/littlestrong.png",
iconSize: new T.Point(20,20),
iconAnchor: new T.Point(0,0)
for(j = 0;j&coor.j++){
var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
map.addOverLay(marker);
console.log(coor);
})}//天津各区人口function personNum(){
var tag = Window("",{"minWidth":"650"});
//console.log(tag.autoPan);
tag.setLngLat(new T.LngLat(117.43));
//tag.maxWidth=400;
tag.setContent("&div id='mainss' style='width:650height:300border:1'&&/div&");
map.addOverLay(tag);
var myChart = echarts.init(document.getElementById('mainss'));
// 指定图表的配置项和数据
var option = {
tooltip: {
show: true
data:['人口/万']
name:'区域名称',
type : 'category',
data:["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区",
"东丽区","西青区","津南区","北辰区","武清区","宝坻区","静海区"],
axisLabel: {
//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
rotate: 30,
//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
interval :0
type : 'value',
name:'人口/万'
series : [
itemStyle: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
return colorList[params.dataIndex]
//以下为是否显示，显示位置和显示格式的设置了
show: true,
position: 'top',
formatter: '{c}'
"name":"地区面积",
"type":"bar",
"data":[47,68,74,79,62,56,48,17,35,32,33,38,32,84,65,52]
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);}//天津各区面积function area(){
var tag = Window("",{"minWidth":"650"});
//console.log(tag.autoPan);
tag.setLngLat(new T.LngLat(117.43));
//tag.maxWidth=400;
tag.setContent("&div id='mains' style='width:650height:300border:1'&&/div&");
map.addOverLay(tag);
var myChart = echarts.init(document.getElementById('mains'));
// 指定图表的配置项和数据
var option = {
tooltip: {
show: true
data:['面积/平方千米']
name:'区域名称',
type : 'category',
data:["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区",
"东丽区","西青区","津南区","北辰区","武清区","宝坻区","静海区"],
axisLabel: {
//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
rotate: 30,
//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
interval :0
type : 'value',
name:'面积/平方千米'
series : [
itemStyle: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
return colorList[params.dataIndex]
//以下为是否显示，显示位置和显示格式的设置了
show: true,
position: 'top',
formatter: '{c}'
"name":"地区面积",
"type":"bar",
"data":[10,39,37,39,27,21,688,350,940,460,545,401,478,76]
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);}在这个程序员苦逼的年代里，我们需要抱团取暖
阅读(...) 评论()}