您的位置：首页 > Web前端 > JavaScript

D3js-地图中标注地点

2015-06-17 15:56 597 查看
效果图：



所要用到的资源文件：

1.topojson.js 下载地址：http://www.oschina.net/p/topojson

2.china.topojson 、southchinasea.svg 以及 places.json 下载地址：http://download.csdn.net/detail/u013147600/8815899

其中places.json 是虚假数据

3. d3.min.js 下载地址：http://d3js.org/ ----(d3.zip)

源码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>d3-中国地图标注</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

<style>
/* .province {
stroke: black;
stroke-width: 1px;
} */

/* 	.southsea {
stroke: black;
stroke-width: 1px;
fill: yellow;
} */

/* .location circle{
fill: blue;
} */
</style>

<style type="text/css">
.tooltip{
font-family:simsun;
font-size:16px;
width:120;
height:auto;
position:absolute;
text-align:center;
border-style:solid;
border-width:1px;
background-color:white;
border-radius:5px;
}

</style>
<script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script>

<script type="text/javascript" src="js/d3/topojson.js"></script>
</head>

<body>
<script type="text/javascript">

var width =800;
var height = 800;

//添加一个svg
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);

//定义一个投影函数
var projection = d3.geo.mercator()
.center([110,40]) //设置绘制地图的中心 --根据实定情况定
.scale(600) //可以调整所绘地图的大小 --根据实定情况定
.translate([width/2,height/3]); //偏移量

//通过投影函数定义地理路径生成器
var path = d3.geo.path()
.projection(projection);

//标题
svg.append("text")
.text("XX公司部门分布")
.attr("x",(width/3))
.attr("y",50)
.attr("font-size","18px")
.attr("font-weight","bold")
.attr("text-anchor","middle")
.attr("fill","black")
;
//例如以北京经纬度作为投影
//var peking=[116.3,39.9];
//var proPeking =projection(peking);

//读取中国地图的topojson文件
d3.json("data/china.topojson",function(error,topodata)
{
//判断是否出错，在控制台输出错误信息
if(error)
return console.error(error);

//将topojson转换为geojson
var geodata = topojson.feature(topodata,topodata.objects.china);

/* //实现图表的缩放
var zoom = d3.behavior.zoom()
.scaleExtent([1,5])
.on("zoom",zoomed);

function zoomed()
{
d3.select(this)
.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")");
} */

//包含中国各省路径的分组元素
var china =svg.append("g")
//.call(zoom) //调用图表缩放函数
;

//颜色
var color = d3.scale.category20c();

//添加中国各省的路径元素
var provinces =china.selectAll("path")
.data(geodata.features)
.enter()
.append("path")
.attr("class","province")
.style("fill",function(d,i)
{
return color(i);
})
.attr("stroke","black")
.attr("stroke-width","1px")
.attr("d",path);

//读取要标注的省份信息
d3.json("data/places.json",function(error,placedata)
{
//插入分组元素
var location = svg.selectAll("location")
.data(placedata.location)
.enter()
.append("g")
//.attr("class","location")
.attr("transform",function(d){
//计算标注点的位置
var coor = projection([d.log, d.lat]); //经纬度的投影
return "translate("+ coor[0] + "," + coor[1] +")";

});

//画圆作为标注
location.append("circle")
.attr("r",5) //半径
.style("fill",function(d,i)
{
if(d.name=="福州总部")
return "red";

return"yellow";

})
;

//添加文字
location.append("text")
.text(function(d)
{
return d.name;
}
)
//.attr("fill","red")
.attr("fill",function(d,i)
{

if(d.name=="福州总部")
return "red";

return"black";
})

.attr("text-anchor","middle")
.attr("font-family","sans-setif")
.attr("font-size","14px")
.attr("font-weight","bold")
;
});

});

//插入南海诸岛的svg图片
d3.xml("data/southchinasea.svg",function(error,xmlDoc)
{
svg.html(function(d)
{
return d3.select(this).html()+xmlDoc.getElementsByTagName("g")[0].outerHTML;
//在当前元素的html里添加 svg文件里面的 第一个g标签及其内容
});

//return	document.body.appendChild(xmlDoc.documentElement);

var gSouthSea = d3.select("#southsea");

gSouthSea.attr("transform","translate(550,450)scale(0.5)")
.attr("class","southsea")
.attr("stroke","black")
.attr("stroke-width"," 1px")
.attr("fill","yellow");

//------------------------添加提示框的div
var tooltip = d3.select("body").append("div")
.attr("class","tooltip") //用于css设置类样式
.attr("opacity",0.0);
//响应事件
//-鼠标移入事件
gSouthSea.on("mouseover",function(d)
{
//设置tooltip文字
tooltip.html("中国南海诸岛")
//设置tooltip的位置(left,top 相对于页面的距离)
.style("left",(d3.event.pageX)+"px")
.style("top",(d3.event.pageY+20)+"px")
.style("opacity",1.0);
})
//--鼠标移出事件
.on("mouseout",function(d)
{
tooltip.style("opacity",0.0);
});

});

</script>

</body>
</html>


outerHTML、innerHTML以及innerText三者的区别：

outerHTML可以用来更改或获取元素内所有的html和文本内容，包含引用该方法元素自身的标签．

innerHTML是用来获取元素内的html内容和文本．

innerText只获取元素内的文本内容，html标签将被忽略．

参考网站：http://www.ourd3js.com/wordpress/?p=1201#comment-30319 谢谢馒头华华！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航