JavaScript实现中国地图自动展示数据库 (js中国地图自动展示数据库)
JavaScript 实现中国地图自动展示数据库
JavaScript 作为一种广泛应用于 Web 开发的脚本语言，有着极高的可扩展性和强大的数据处理能力。在本文中，我们将利用 JavaScript 实现一个能够自动展示数据库中数据的中国地图。
1.数据准备
在实现中国地图自动展示数据库之前，我们需要准备好数据。具体来说，我们需要获取中国地图的矢量图数据，以及需要展示的数据库数据。在这里，我们可以利用开源地图库 GeoON 数据，这些数据通常包含一个区域的经纬度信息以及其他自定义属性。同时，我们可以使用类似 MySQL 等数据库，存储我们需要展示的数据。
2.创建地图
得到准备好的数据之后，我们就可以开始创建地图了。在这里，我们可以使用 D3.js，一款用于数据可视化的 JavaScript 库。D3.js 包含了许多用于绘制各种图表和地图的 API，可以自由定制化地图和数据的展示效果。
我们需要在 HTML 中创建一个容器用于承载地图。然后在 JavaScript 中，我们可以定义一个函数用于绘制中国地图：
“`javascript
function drawChinaMap() {
d3.json(“china.geojson”, function(data) {
var svg = d3.select(“#map-contner”).append(“svg”)
.attr(“width”, 800)
.attr(“height”, 600);
// 后续代码
});
}
“`
这里我们使用了 D3.js 的 `d3.json()` 函数读取 `china.geojson` 文件，并在 SVG 容器中创建一个 “ 元素，设置它的宽度为 800，高度为 600。
3.绘制地图
接下来，我们需要在地图上绘制中国地图的边界。D3.js 提供了 `d3.geoPath()` 函数可以将 GeoON 数据转换成 SVG 路径。我们可以使用这个函数来绘制每个省份和行政区的边界。
“`javascript
var projection = d3.geoMercator()
.center([104, 37.5])
.scale(750)
.translate([400, 300]);
var path = d3.geoPath()
.projection(projection);
svg.selectAll(“path”)
.data(data.features)
.enter()
.append(“path”)
.attr(“d”, path)
.style(“fill”, “#ccc”)
.style(“stroke”, “#fff”)
.style(“stroke-width”, 0.5);
“`
在这里，我们首先定义了一个投影对象 `projection`，它可以将经纬度坐标转换为 SVG 坐标。然后创建了一个 `path` 对象用于绘制 SVG 路径。
接下来，我们使用 `svg.selectAll(“path”)` 选择所有的路径元素，绑定数据并添加路径元素。其中 `data.features` 是我们准备好的 GeoON 数据，表示每个省份和行政区的边界。我们在 `.attr(“d”, path)` 中将路径数据传入 `path` 对象中进行转换，最终渲染出了地图的边界。其他几个 `.style()` 属性则是用于设置边界的样式。
4.展示数据
接下来，我们需要将我们在数据库中准备好的数据展示在地图上。这里我以某些省份的 GDP 数据为例。
我们需要读取数据库中的数据：
“`javascript
d3.json(“data.json”, function(data) {
// 后续代码
});
“`
然后，使用以下代码可以将中国地图上的某些省份染成不同的颜色：
“`javascript
svg.selectAll(“path”)
.data(data.features)
.attr(“fill”, function(d) {
if (d.properties.name == “北京市”) {
return “red”;
} else if (d.properties.name == “广东省”) {
return “blue”;
} else if (d.properties.name == “江苏省”) {
return “green”;
} else {
return “#ccc”;
}
});
“`
在这里，我们使用了 `if…else…` 语句判断每个省份是否应该染成不同的颜色。其中，`d.properties.name` 表示省份或行政区的名称，可以用来关联数据库中的数据。
5.自动展示
我们需要自动展示地图。根据数据库中的数据，我们可以自动展示某些省份的数据，或者进行轮播展示。这可以使用 JavaScript 的 `setTimeout` 函数来实现：
“`javascript
function autoShow() {
setTimeout(function() {
// 将需要展示的省份染成不同的颜色
autoShow();
}, 3000);
}
“`
在这里，我们使用了一个 `setTimeout()` 函数，将时间间隔设置为 3000 ms（即 3 秒），在每次 timeout 完成后，我们可以将需要展示的省份染成不同的颜色，并再次调用 `autoShow()` 函数以继续展示下一个省份。
6.
相关问题拓展阅读：
ECharts3怎么加载china.js地图？
echarts3加载map的方式和2不一样了，你必须得先注册地图才行，
“`js$.getON(‘./china.json’, function (data) { echarts.registerMap(‘china’
, data); var chart = echarts.init(document.getElementById(‘map’)); chart.setOp
tion({ series: }); });“`
类似这样,你需要下载中国的地理矢量数据geojson
echarts3与echarts2区别：
1、js文件：
首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详
细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不
方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需
的功能构架类库，使用时只要导入一个echarts.min.js文件就可以；
2、文件导入：
在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现
问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句 view plain copy
接下去只要调用接口就可以了；
3、离线地图：
echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在
模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没
什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县
与区县之间基本上不存在衔接问题；另外，在echarts3中可以根据需要自主构建地图，
这个服务给实际使用提供了很大的便利；
4、工具栏：
在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3
里面的toolbox更丑了；
5、地图漫游工具：
在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着
还是挺不错的，虽然并没有什么用；
6、坐标系:
echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例
如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组；echarts3中另
一个重要的数据结构抽象是独立出了“坐标系”概念；事实上在 ECharts2 中已经有
grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的；echarts3中，
支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理
坐标系（geo）；
7、Option变动：
1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。
2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。
根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐。
参考资料
echarts3与echarts2区别
.CSDN
看了echarts的demo以及网上大家使用echarts的经验。我使用的是大家都推荐的模块化单文件引入。
1、首先要去echarts和zrender官网上下载需要的文件；
2、然后将下载下来的文件放在你项目的目录下；
3、在项目中引用相关文件。
4、引用相关的文件后可能还会出现很多的小问题，主要去看看js文件目录是否正确。
5、扩展地图插件的时候或者有别的需求需要引入config文件时，要注意一定要将引用的代码放在function(ec){}中，这样就不会报”echarts/config” is not exists!错了
Raphael绘制中国地图实现点击哪儿在哪儿显示柱状图
1.首先导入各种js包：
2. 添加页面部分代码
3. 绘制地图部分代码：
$(function() {
Raphael.getColor.reset(); //色谱重置回数敬红色
//创建一个画布对象用来绘制。你必须之一步就这么做，该实例将来调用的所有绘图方法都被绑定到这个画布。
var R = Raphael(“china_map”, 600, 500);
//调用绘制地图方法
paintMap(R);
var current = null;
//用于对鼠标点击次数的计数；薯举慎
var result = 0;
//判断两次点击的区域名字的标志量；
var nameFlag = “”;
var x=0;
var y=0;
var textAttr = {
“fill”: “#000”,
“font-size”: “13px”,
“cursor”: “pointer” //光标的CSS类型,指针类型；
};
for (var state in china) {//state代表每个省，即就是用每个或区域来遍历整个地图区域；
//Raphael.getColor(0.9):每次调用返回色谱中的下一个颜色(返回颜色的十六进制表示)
china.color = Raphael.getColor(0.9);//分省区域着色
china.transform(“t30,0”);//地图的每个省的路径横向平移坐标（30px,0px）
(function (st, state) {
//获取每个区域的中心坐标（getBBox()：返回指定元素的边界框，x：左上角X; y表示左上角y）
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);
//***修改部分地图文字偏移坐标
switch (china) {
case “江苏”:
xx += 5;
yy -= 10;
break;
case “河北”:
xx -= 10;
yy += 20;
break;
case “天津”:
xx += 10;
yy += 10;
break;
case “上海”:
xx += 10;
break;
case “广东”:
yy -= 10;
break;
case “澳门”:
yy += 10;
break;
case “香港”:
xx += 20;
yy += 5;
break;
case “甘肃”:
xx -= 40;
yy -= 30;
break;
case “陕西”:
xx += 5;
yy += 10;
break;
case “内蒙古”:
xx -= 15;
yy += 65;
break;
default:
}
//***写入地名,并加点击事件,部分区域太小，增加对文字的点击事件
//R.text(xx, yy, china)给地图区域的中心位置添加省的名字
china = R.text(xx, yy, china).attr(textAttr).click(function () {
if(result=1 && (nameFlag == china)){//第N此点击，判断是不是同一个点击区域
clickMap();
}else{
clickMap();
controlChinaMap();
china = R.text(xx, yy, nameFlag).attr(textAttr).click(function (){
clickMap();
});
}
});
//图形的点击事件(st表示一个SVGPathElement对象)
$(st).click(function (e) {
if(result=1 && (nameFlag == china)){//第N此点击，判断是不是同一个点击区域
clickMap();
}else{
clickMap();
R.barchart(x,y-150,50,200,,{type:”round”});
controlChinaMap();
}
});
st.onmouseover = function () {
st.animate({fill: st.color, stroke: “#eee”}, 500);//为地图区域创建动画，鼠标滑过区域颜色加深，持续时间500毫秒
china.toFront();//元素上移
R.safari();//处理渲染错误
};
st.onmouseout = function () {
st.animate({fill: “#97d6f5”, stroke: “#eee”}, 500);
china.toFront();
R.safari();
};
function clickMap() {
if (current == state) //判断两次点击是否点击的是同一个区域
return;
//重置上次点击的图形
current && china.animate({ transform: “t30,0”, fill: china ? china.color : “#b0d0ec”, stroke: “#ddd” }, 2023, “elastic”);
current = state; //将当前值赋给变量
//对本次点击
china.animate({ transform: “t30,0 s1.03 1.03”, fill: china.color, stroke: “#000” }, 1200, “elastic”);
st.toFront(); //向上
R.safari();
china.toFront(); //***向上
if (china === undefined) return;
}
function controlChinaMap(){
//type默认是square，还有sharp、soft
R.barchart(xx,yy-150,50,200,,{type:”round”});
//在你的图上面加一个注释
//R.blob(xx,yy-130, “25%”, 50);
}
})(china, state);
}
求echarts里面的china.js求一个百度云盘地址
echart在好御液github上是开源的，china.js也同样能下载到；
github地址：
网拆肆页链接
；
china.js百度网盘eTDqYaQ
密码：9kf9
js中国地图自动展示数据库的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js中国地图自动展示数据库,JavaScript实现中国地图自动展示数据库,ECharts3怎么加载china.js地图？,Raphael绘制中国地图实现点击哪儿在哪儿显示柱状图,求echarts里面的china.js求一个百度云盘地址的信息别忘了在本站进行查找喔。
