D3js-地圖中標註地點
阿新 • • 發佈：2019-01-30
效果圖：
所要用到的資原始檔：
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)
原始碼：
outerHTML、innerHTML以及innerText三者的區別： outerHTML可以用來更改或獲取元素內所有的html和文字內容，包含引用該方法元素自身的標籤． innerHTML是用來獲取元素內的html內容和文字． innerText只獲取元素內的文字內容，html標籤將被忽略．<%@ 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>
參考網站：http://www.ourd3js.com/wordpress/?p=1201#comment-30319 謝謝饅頭華華！