D3js-地图中标注地点

最新推荐文章于 2024-09-22 16:56:34 发布

weixin_33735077

最新推荐文章于 2024-09-22 16:56:34 发布

阅读量592

点赞数

原文链接：http://www.cnblogs.com/lovelyx/p/4867073.html

版权

效果图：

所要用到的资源文件：

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 谢谢馒头华华！

转载于:https://www.cnblogs.com/lovelyx/p/4867073.html