javascript html5画布如何实现可拖动省份的中国地图

　　介绍

这篇文章主要介绍了javascript html5画布如何实现可拖动省份的中国地图,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

<强> 1。数据获取
画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中。
新建省份数据数组

代码如下:

var allZoneData=https://www.yisu.com/zixun/[{“名称”:“辽宁省”,“是”:“是的”,“id”:“01”}, <跨风格="无衬线字体类型:Arial, Helvetica; ">{“名称”:“吉林省”,“是”:“是的”,“id”:“02”},……);

轮询该数组,根据省份名称请求百度API获取坐标数据,并将数据以ajax方式放松给php 

 var myGeo=new BMap.Geocoder ();
　　
　　(函数(){
　　我(var=0; & lt;allZoneData.length;我+ +){
　　getAllZone (allZoneData[我]. name, allZoneData[我].been allZoneData[我].id);
　　}
　　}) ();//名字为省份名,表示是否去过,id为唯一标识,圆形的为省份圈号(有可能一个省份有两部分封闭圆圈构成)
　　函数getAllZone(名称、被id) {
　　临时变量数据;
　　
　　var bdary=new BMap.Boundary ();
　　bdary。得到(名称、函数(rs) {
　　var计算=rs.boundaries.length;
　　(var j=0;j & lt;计数;j + +) {
　　var厚度=new BMap.Polygon (rs。边界[j], {strokeColor strokeWeight: 2:“# ff0000"});
　　data=ply.getPath ();
　　. ajax({美元
　　url:“addData.php"
　　类型:“POST",
　　数据:{& # 39;数据# 39;:数据& # 39;名字# 39;:姓名、& # 39;新闻# 39;:j & # 39;被# 39;:,& # 39;id # 39;: id},
　　成功:函数(txt) {
　　console.log (txt);
　　},
　　错误:函数(){
　　警报(& # 39;添加数据出错! & # 39;);
　　}
　　});
　　}
　　});
　　php}

得到数据后,解析数据并将数据存储到事先建好的数据库中

& lt; php ? 　　头(“内容类型:text/html;charset=utf-8"); 　　$ data=https://www.yisu.com/zixun/$ _REQUEST[“数据”); 　　$ name=$ _REQUEST['名称'); 　　美元cir=$ _REQUEST['新闻']; 　　$=$ _REQUEST['是']; 　　$ id=$ _REQUEST [“id”); 　　 　　反对美元=mysql_connect (“localhost”、“……”,“……”); 　　如果(! $ con) { 　　死亡(“不能连接:”。mysql_error ()); 　　} 　　mysql_select_db(“……”,反对美元); 　　mysql_set_charset (use utf8,反对美元); 　　 　　foreach(数据作为临时美元){ 　　$ sql=安迦氲牡胤?id、名称、液化天然气、lat,圆形,被)值(“。”$ id。”','”。美元的名字。“”、“”。美元的临时“液化天然气”。“”、“”。美元的临时“纬度”。“”、“”。法院,“”、“”。美元。“”)”; 　　如果(! mysql_query (sql,反对美元)){ 　　死亡(“错误:”。mysql_error ()); 　　} 　　} 　　 　　mysql_close (con); 　　回声“成功”; 　　?>

<强> 2。画地图(基础地图画在mapCanvas层)
轮询省份数组,并以ajax方式请求该省份边界坐标,然后绘图

 var drawMap=function(背景、数据、l、t){//背景为绘制所在的层,l和t为相对位置,数据为边界对象数组
　　如果(数据)。是==& # 39;是的# 39;){
　　上下文。fillStyle=癵reen";
　　其他}{
　　上下文。fillStyle=癵rey";
　　}
　　上下文。globalAlpha=0.8;
　　context.beginPath ();
　　裂=(data.coordinate [0]。液化天然气- temp_left) *大+ l;//temp_left和temp_top为地图偏移位置。
　　ctop=(temp_top - data.coordinate [0] . lat) * + t大;//为大放大倍数
　　
　　context.moveTo(崩裂,ctop);
　　
　　(var j=1; j & lt;data.coordinate.length; j + +) {
　　裂=(data.coordinate [j]。液化天然气- temp_left) *大+ l;
　　ctop=(temp_top - data.coordinate [j] . lat) * + t大;
　　context.lineTo(崩裂,ctop);
　　}
　　
　　context.closePath ();
　　context.stroke ();
　　context.fill ();
　　}

<强> 3。画移动连线(连线和移动的省份画在moveMapCanvas层)
当在地图上拖动省份时,出现若干条连接移动的省份和原省份的直线

javascript html5画布如何实现可拖动省份的中国地图