使用d3.js调用地图api 进行数据可视化
Posted 他像风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用d3.js调用地图api 进行数据可视化相关的知识，希望对你有一定的参考价值。
前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化。其实就是使用了第三方插件，比现在比较火的可视化插件d3.js echart.js。大致思路就是，把要用到的位置的geojson数据报错，然后本地调用这些数据，通过d3.js或者echart.js通过地图中的api把他显示到页面上，这样可以更直观更方便的进行预览，也就是现在比较火的数据可视化，也是未来前端发展的一个不错的方向。由于第一次做所以有些需要优化的地方自己可以根据需求优化。代码如下：
html:
<!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.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/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>
</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>
<!--下拉框右边-->
<div class="footerbar_right">
<div class="top">
<div class="cont">
<div class="cont_text1">专题</div>
<div class="cont_text2">清除所选</div>
</div>
</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">
<li>
<span><input type="checkbox" class="checkbox" id="sz"></span>
<span>水闸</span>
<span><img src="images/shuizha_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="sb"></span>
<span>水坝</span>
<span><img src="images/shuiba_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="bz"></span>
<span>泵站</span>
<span><img src="images/bangzhan_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--水利工程结束-->
<!--教育机构开始list_2-->
<div class="tabs">教育机构<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_2">
<li>
<span><input type="checkbox" class="checkbox" id="sm"></span>
<span>小学</span>
<span><img src="images/xiaoxue_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="md"></span>
<span>中学</span>
<span><img src="images/zhongxue_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="dx"></span>
<span>大学</span>
<span><img src="images/daxue_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="yry"></span>
<span>幼儿园</span>
<span><img src="images/youeryuan_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--教育机构结束-->
<!--旅游景点开始list_3-->
<div class="tabs">旅游景点<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_3">
<li>
<span><input type="checkbox" class="checkbox" id="input_5"></span>
<span>5A级景点</span>
<span><img src="images/5a_logo.png"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="input_4"/></span>
<span>4A级景点</span>
<span><img src="images/4a_logo.png"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="input_3"/></span>
<span>3A级景点</span>
<span><img src="images/3a_logo.png"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="input_2"/></span>
<span>2A级景点</span>
<span><img src="images/2a_logo.png"/></span>
</li>
</ul>
<!--旅游景点结束-->
<!--消防设施开始list_4-->
<div class="tabs">消防设施<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_4">
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>消防栓</span>
<span><img src="images/xiaofang.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>接合器</span>
<span><img src="images/jieheqi_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--消防设施结束-->
<!--司法服务开始list_5-->
<div class="tabs">司法服务<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_5">
<li>
<span><input type="checkbox" class="checkbox" id="sfs"></span>
<span>司法所</span>
<span><img src="images/JusticBureau_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="lssws"></span>
<span>律师事务所</span>
<span><img src="images/firm_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="yzzx"></span>
<span>援助中心</span>
<span><img src="images/legalCenter_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="jdjg"></span>
<span>鉴定机构</span>
<span><img src="images/jianding_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="gzc"></span>
<span>公证处</span>
<span><img src="images/nativeoffice_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--司法服务结束-->
<!--公路设施开始list_6-->
<div class="tabs">公路设施<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_6">
<li>
<span><input type="checkbox" class="checkbox" id=""></span>
<span>限高架</span>
<span><img src="images/gao.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id=""></span>
<span>百米桩</span>
<span><img src="images/bai.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id=""></span>
<span>里程碑</span>
<span><img src="images/licheng.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--公路设施结束-->
<!--地下管网开始list_7-->
<div class="tabs">地下管网<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_7">
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>热力</span>
<span><img src="images/reli_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>燃气</span>
<span><img src="images/ranqi_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>给水</span>
<span><img src="images/geishui_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>排水</span>
<span><img src="images/paishui_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>电信</span>
<span><img src="images/dianxin_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>电力</span>
<span><img src="images/dianli_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--地下管网结束-->
<!--安全监督开始list_8-->
<div class="tabs">安全监督<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_8">
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>危化企业</span>
<span><img src="images/weihuaqiye_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>摄像头</span>
<span><img src="images/shexiangtou.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox"></span>
<span>重点设施</span>
<span><img src="images/zhongdiansheshi_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--安全监督结束-->
<!--高新企业开始list_9-->
<div class="tabs">高新企业<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_9">
<li>
<span><input type="checkbox" class="checkbox" id="littleCompany"></span>
<span>小巨人企业</span>
<span><img src="images/littlestrong_logo.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="scienceCompany"></span>
<span>新技术企业</span>
<span><img src="images/science_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--高新企业结束-->
<!--武清区域开始list_10-->
<div class="tabs">武清信息<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_10">
<li>
<span><input type="checkbox" class="checkbox" id="wqqy"></span>
<span>武清区域图</span>
<span><img src="images/quyu.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="wqqyg"></span>
<span>武清区域国道</span>
<span><img src="images/guodao.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="wqqys"></span>
<span>武清区域省道</span>
<span><img src="images/shengdao.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="cheakbox" id="wqqyt"></span>
<span>武清区城镇</span>
<span><img src="images/red_logo.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--武清区域结束-->
<!--天津各区人口面积统计开始list_11-->
<div class="tabs">人口面积<span class="jiantou_icon"><img src="images/three_dian.png"/></span></div>
<ul class="cont" id="list_11">
<li>
<span><input type="checkbox" class="checkbox" id="persons"></span>
<span>人口</span>
<span><img src="images/renkou.png" width="24px;" height="24px;"/></span>
</li>
<li>
<span><input type="checkbox" class="checkbox" id="areas"></span>
<span>面积</span>
<span><img src="images/mianji.png" width="24px;" height="24px;"/></span>
</li>
</ul>
<!--天津各区人口面积统计结束-->
</div>
</div>
<div class="bottom_footer">
<img src="images/footer_icon.png"/>
</div>
</div>
<!--底部-->
</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 map,marker;
var zoom = 8;
function onLoad(){
map = new T.Map(‘main‘,{
projectino:"EPSG:900913"
});
map.centerAndZoom(new T.LngLat(117.477039, 39.281725),zoom);
}
</script>
</body>
</html>
js:
/**
* Created by Administrator on 2017/3/16.
*/
//菜单下拉
$(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();
}
else {
var str = /5a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
}
}
}
});
}
else if (i == 1) {
$("#input_4").click(function () {
if (this.checked) {
tourismFour();
}
else {
var str = /4a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
}
}
}
});
}
else if (i == 2) {
$("#input_3").click(function () {
if(this.checked) {
tourismThree();
}
else {
var str = /3a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;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();
}
else {
var str = /2a.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;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();
}
else {
var str = /JusticBureau.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
}
}
}
});
}
else if (i == 1) {
//律师事务所
$("#lssws").click(function () {
if (this.checked) {
Firm();
}
else {
var str = /firm.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
}
}
}
});
}
else if (i == 2) {
//援助中心
$("#yzzx").click(function () {
if(this.checked) {
LegalAidCenter();
}
else {
var str = /legalCenter.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
}
}
}
});
}
else if (i == 3) {
//鉴定机构
$("#jdjg").click(function () {
if(this.checked) {
Jianding();
}
else {
var str = /jianding.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
}
}
}
});
}
else if (i == 4) {
//公证处
$("#gzc").click(function () {
if(this.checked) {
NotarialOffice();
}
else {
var str = /nativeoffice.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;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();
}
else{
var str = /littlestrong.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;i++){
if(imgSrc[i].src.match(str)){
imgSrc[i].style.display="none";
}
}
}
})
}
else if(i == 1){
//高新技术企业
$("#scienceCompany").click(function(){
if(this.checked){
CompanyScience();
}
else{
var str = /science.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;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();
}
else{
map.clearOverLays();
}
})
}
else if(i == 1){
//武清国道
$("#wqqyg").click(function(){
if(this.checked){
drawNationalRoad();
}
else{
map.clearOverLays();
}
})
}
else if(i == 2){
//武清省道
$("#wqqys").click(function(){
if(this.checked){
drawProvincialRoad();
}
else{
map.clearOverLays();
}
})
}
else if(i == 3){
//武清城镇
$("#wqqyt").click(function(){
if(this.checked){
StreetTownship();
}
else{
var str = /red.png/;
var imgSrc=document.querySelectorAll("img");
for(var i=0;i<imgSrc.length;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){
area();
}
else{
map.clearOverLays();
}
})
}
else if(i == 1){
//天津人口图
$("#persons").click(function(){
if(this.checked){
personNum();
}
else{
map.clearOverLays();
}
});
}
})
});
/*复选框点击事件结束*/
//定义武清容器宽高
var width = 0;height = 0;
//定义svg
var 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.056345,39.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) {
if(error)
return console.error(error);
var features = root.features;
for(var i = 0; i<features.length;i++) {
var feature = features[i]
var data = feature.geometry.coordinates;
if (data.length > 0) {
for (var j = 0; j < data.length; j++) {
points = [];
for (var k = 0; k < data[j].length; 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) {
if(error)
return console.error(error);
var features = root.features;
for(var i = 0; i<features.length;i++){
var feature = features[i]
var data = feature.geometry.coordinates;
points = [];
if(data.length>0){
for(var j =0;j<data.length;j++){
if(data[j].length>2){
for(var k =0 ;k<data[j].length;k++){
var data1 = data[j][k];
points.push(new T.LngLat(data1[0],data[1]));
//console.log(data1);
}
}else {
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){
if(error)
return console.error(error);
var features = root.features;
for(var i = 0; i<features.length;i++) {
var feature = features[i]
var data = feature.geometry.coordinates;
points = [];
if (data.length > 0) {
for (var j = 0; j < data.length; j++) {
if (data[j].length > 2) {
for (var k = 0; k < data[j].length; k++) {
//console.log(data[j][k])
var data1 = data[j][k];
points.push(new T.LngLat(data1[0], data1[1]));
}
} else {
//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){
if(error)
return console.error(error);
var features = root.features;
for(var i=0;i<features.length;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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var coor = feature.geometry.coordinates;
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.length;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 = new T.InfoWindow("",{"minWidth":"650"});
//console.log(tag.autoPan);
tag.setLngLat(new T.LngLat(117.20253,39.13743));
//tag.maxWidth=400;
tag.setContent("<div id=‘mainss‘ style=‘width:650px;height:300px;border:1px solid red;‘></div>");
map.addOverLay(tag);
var myChart = echarts.init(document.getElementById(‘mainss‘));
// 指定图表的配置项和数据
var option = {
tooltip: {
show: true
},
legend: {
data:[‘人口/万‘]
},
xAxis : [
{
name:‘区域名称‘,
type : ‘category‘,
data:["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区",
"东丽区","西青区","津南区","北辰区","武清区","宝坻区","静海区"],
axisLabel: {
//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
rotate: 30,
//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
interval :0
}
}
],
yAxis : [
{
type : ‘value‘,
name:‘人口/万‘
}
],
series : [
{
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个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]
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
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 = new T.InfoWindow("",{"minWidth":"650"});
//console.log(tag.autoPan);
tag.setLngLat(new T.LngLat(117.20253,39.13743));
//tag.maxWidth=400;
tag.setContent("<div id=‘mains‘ style=‘width:650px;height:300px;border:1px solid red;‘></div>");
map.addOverLay(tag);
var myChart = echarts.init(document.getElementById(‘mains‘));
// 指定图表的配置项和数据
var option = {
tooltip: {
show: true
},
legend: {
data:[‘面积/平方千米‘]
},
xAxis : [
{
name:‘区域名称‘,
type : ‘category‘,
data:["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区",
"东丽区","西青区","津南区","北辰区","武清区","宝坻区","静海区"],
axisLabel: {
//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
rotate: 30,
//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
interval :0
}
}
],
yAxis : [
{
type : ‘value‘,
name:‘面积/平方千米‘
}
],
series : [
{
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个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]
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: true,
position: ‘top‘,
formatter: ‘{c}‘
}
}
},
"name":"地区面积",
"type":"bar",
"data":[10,39,37,39,27,21,688,350,940,460,545,401,478,1570,1523,1476]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
在这个程序员苦逼的年代里，我们需要抱团取暖
以上是关于使用d3.js调用地图api 进行数据可视化的主要内容，如果未能解决你的问题，请参考以下文章
实战篇38 # 如何使用数据驱动框架 D3.js 绘制常用数据图表？