使用d3绘制某个地市的地图时，把scale成很大可是还是无法达到想要的效果。
//-------------------------------------------------------------
//获得地图的中心 获得center
function getCenters(features){
var longitudeMin = 100000;//最小经度值
var latitudeMin = 100000;//最小纬度值
var longitudeMax = 0;//最大经度值
var latitudeMax = 0;//最大纬度值
features.forEach(function(e){
var a = d3.geo.bounds(e);//[为某个对象计算经纬度 d3.geo.bounds - compute the latitude-longitude bounding box for a given feature]
if(a[0][0] < longitudeMin) {
longitudeMin = a[0][0];
}
if(a[0][1] < latitudeMin) {
latitudeMin = a[0][1];
}
if(a[1][0] > longitudeMax) {
longitudeMax = a[1][0];
}
if(a[1][1] > latitudeMax) {
latitudeMax = a[1][1];
}
});
var a = (longitudeMax + longitudeMin)/2;
var b = (latitudeMax + latitudeMin)/2;
return [a, b];
}
//设置地图的大小 获得 scale
function getZoomScale(features, width, height){
var longitudeMin = 100000;//最小经度值
var latitudeMin = 100000;//最小纬度值
var longitudeMax = 0;//最大经度值
var latitudeMax = 0;//最大纬度值
features.forEach(function(e){
var a = d3.geo.bounds(e);//[为某个对象计算经纬度 d3.geo.bounds - compute the latitude-longitude bounding box for a given feature]
if(a[0][0] < longitudeMin) {
longitudeMin = a[0][0];
}
if(a[0][1] < latitudeMin) {
latitudeMin = a[0][1];
}
if(a[1][0] > longitudeMax) {
longitudeMax = a[1][0];
}
if(a[1][1] > latitudeMax) {
latitudeMax = a[1][1];
}
});
var a = longitudeMax-longitudeMin;
var b = latitudeMax-latitudeMin;
/*if(a > b) { //
return width/a;
} else {
return height/b;
}*/
return Math.min(width/a, height/b);
}
实例运用：
<%@ 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 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>
</head>
<body>
<script type="text/javascript">
var width = 1000;
var height = 1000;
var svg =d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
//-------------------------------------------------------------
//获得地图的中心
function getCenters(features){
var longitudeMin = 100000;
var latitudeMin = 100000;
var longitudeMax = 0;
var latitudeMax = 0;
features.forEach(function(e){
var a = d3.geo.bounds(e);
if(a[0][0] < longitudeMin) {
longitudeMin = a[0][0];
}
if(a[0][1] < latitudeMin) {
latitudeMin = a[0][1];
}
if(a[1][0] > longitudeMax) {
longitudeMax = a[1][0];
}
if(a[1][1] > latitudeMax) {
latitudeMax = a[1][1];
}
});
var a = (longitudeMax + longitudeMin)/2;
var b = (latitudeMax + latitudeMin)/2;
return [a, b];
}
//设置地图的大小
function getZoomScale(features, width, height){
var longitudeMin = 100000;
var latitudeMin = 100000;
var longitudeMax = 0;
var latitudeMax = 0;
features.forEach(function(e){
var a = d3.geo.bounds(e);
if(a[0][0] < longitudeMin) {
longitudeMin = a[0][0];
}
if(a[0][1] < latitudeMin) {
latitudeMin = a[0][1];
}
if(a[1][0] > longitudeMax) {
longitudeMax = a[1][0];
}
if(a[1][1] > latitudeMax) {
latitudeMax = a[1][1];
}
});
var a = longitudeMax-longitudeMin;
var b = latitudeMax-latitudeMin;
return Math.min(width/a, height/b);
}
//读取json文件
d3.json("data/jian.json",function(error,data)
{
if(error)
console.log(data);
var centers = getCenters(data.features);
var zoomScale = getZoomScale(data.features, width, height);
//alert("center:"+centers+",zoomscale:"+zoomScale);
//orthographic 正射
//先定义一个投影
var projection = d3.geo.mercator()
.center(
centers//
//[107,30]
)
.translate([width/4,height/5])
.scale(//50*15
zoomScale*18
);
//通过投影函数生成地理路径生成器
var path = d3.geo.path()
.projection(projection);
//缩放
function zoomed ()
{
d3.select(this).attr("transform",//"translate(110,40)scale("+d3.event.scale+")"
"translate("+d3.event.translate+")scale("+d3.event.scale+")"
);
}
var zoom = d3.behavior.zoom()
.scaleExtent([1,20])
.on("zoom",zoomed);
var drag = d3.behavior.drag()
.origin(function(d){return d;})
.on("drag",draged);
var jian = svg.append("g")
.attr(function(d)
{
d.dx=110;
d.dy=40;
})
.call(zoom)
//.call(drag)
;
//实现可拖拽
function draged(d)
{
d.dx+=d3.event.dx;
d.dy+=d3.event.dy;
d3.select(this)
.attr("transform","translate("+d.dx+","+d.dy+")");
}
var color = d3.scale.category20c();
//tooltip-div 提示框
var tooltip =d3.select("body").append("div")
.attr("class","tooltip")
.attr("opacity",0.0)
//.attr("position","absolute")
;
var city = jian.selectAll("path")
.data(data.features) //数据
.enter()
.append("path")
.attr("fill",function(d,i)
{
return color(i);
})
/* .each(function(d,i)
{
d3.select(this)
.append("text")
.text(function(d,i)
{
return d.properties.name;
});
}
) */
.attr("d",path)
/* .append("title")
.text(function(d,i)
{
return d.properties.name;
}) */
.on("mouseover",function(d,i)
{
d3.select(this).attr("fill","#ccc");
/* if(d.properties.name=="泰和县")
{
d3.select(this)
.append("circle")
.attr("r",5);
} */
tooltip.html(d.properties.name)
.style("left",(d3.event.pageX)+"px")
.style("top",(d3.event.pageY+20)+"px")
.style("opacity",1.0)
;
})
.on("mouseout",function(d,i)
{
d3.select(this).attr(&
最低0.47元/天 解锁文章
4135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
