绘制地图时出现过小, 设置scale还是无效 的解决方法

使用d3绘制某个地市的地图时,,把scale成很大可是还是无法达到想要的效果。

//————————————————————-//获得地图的中心 获得centerfunction 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];}//设置地图的大小 获得 scalefunction 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*15zoomScale*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("fill",color(i));tooltip.style("opacity",0.0);})//—————/* .selectAll("text").data(data.features).enter().append("text").text(function(d){return d.properties.name;}).attr("transform",function(d){//alert(d.geometry.coordinates[0][0][0][0]);//alert(d.geometry.coordinates[0][0][0]);var coor=projection(d.geometry.coordinates[0][0][0]);//alert();return "translate("+coor+")";//y=y+20;//return "translate("+x+","+y+")";})//.attr("text-anchor","middle").style("font-size",16).style("fill","#ccc").attr("opacity",1.0) *///——————————–;var x=0;var y=0;var count=0;//var coor;var xArray=[];var yArray=[];jian.selectAll("text").data(data.features).enter().append("text").text(function(d,i){//x=d3.mean(d.geometry.coordinates[0][0][0][0]);//alert(x);return d.properties.name;})/* .attr("x",function(d,i){return d.geometry.coordinates[0][0];}).attr("y",function(d,i){return d3.mean(d.geometry.coordinates[0][0]);}) */.attr("transform",function(d,i){/* xArray[i]=d.geometry.coordinates[0][0][0][0];yArray[i]=d.geometry.coordinates[0][0][0][1];alert(xArray);return "translate("+d3.mean(xArray)+","+(d3.mean(yArray))+")"; */var coor=projection(d.geometry.coordinates[0][0][0]);if( d.properties.name =="遂川县")return "translate("+coor[0]+","+(coor[1]-40)+")";if( d.properties.name =="吉州区")return "translate("+(coor[0]-40)+","+(coor[1]+20)+")";return "translate("+(coor[0]-10)+","+(coor[1]+40)+")";})//.attr("text-anchor","middle").style("font-size",16).style("fill","black");});</script></body></html>效果图:

jian.json文件内容:(编码为 UTF-8)

放下一种执着,收获一种自在。放下既是一种理性抉择,也是一种豁达美。

绘制地图时出现过小, 设置scale还是无效 的解决方法

相关文章:

你感兴趣的文章:

标签云: