HTML5 Canvas元素绘制地图，如何实现显示鼠标所移动地方名称？

本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下

鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份

$('#eventCanvas').mousemove(function(ev){ 

 var mouseX, mouseY 

 if(ev.layerX || ev.layerX==0){ 

  mouseX = ev.layerX 

  mouseY = ev.layerY 

 }else if(ev.offsetX || ev.offsetX==0){ 

  mouseX = ev.offsetX 

  mouseY = ev.offsetY 

 } 

 if(draging){ 

  if(opts.dragAll){ <span style="font-family: Arial, Helvetica, sans-serif">//拖动整个地图，存在问题，地图画的太慢</span> 

   mapContext.clearRect(0, 0, 1100, 630) 

   for(var i = 0i < allZoneData.lengthi++){ 

    for(var j = 0j < allData[allZoneData[i].name].lengthj++){ //allData是第一次读取数据时放到内存里的变量，它包含了所有数据 

     pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY) 

    } 

   } 

   }else{ 

    moveMapContext.clearRect(0, 0, 1100, 630) 

    pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY) 

   }  

  } 

})

鼠标抬起事件：设置dragging为false，clear移动层。

$('#eventCanvas').mouseup(function(e){ 

 if(opts.dragAll){  

 }else{ 

  moveMapContext.clearRect(0, 0, 1100, 630) 

 } 

 draging = false 

})

小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。

以上就是本文的全部内容，希望对大家的学习有所帮助。

中国地图高清版大图如下：

中国地图可分为政治地图、地形图、自然地理图、人文地理图、卫星影像图等类型，国家测绘地理信息局对中国地图的绘制范围、国界和重要岛屿有严格规定。

中国位于亚洲东部，太平洋的西岸。领土辽阔广大，总面积约960万平方千米，仅次于俄罗斯，加拿大，居世界第3位。

省级行政单位总共34个，包括23个省、5个自治区、4个直辖市和2个特别行政区。

扩展资料:

中国地图必须遵守下列规定：

1.准确反映中国领土范围。

（1）图幅范围：东边绘出黑龙江与乌苏里江交汇处，西边绘出喷赤河南北流向的河段，北边绘出黑龙江最北江段，南边绘出曾母暗沙（汉朝以前的历史地图除外）；

（2）中国全图必须表示南海诸岛、钓鱼岛、赤尾屿等重要岛屿，并用相应的符号绘出南海诸岛归属范围线。比例尺等于或小于1：1亿的，南海诸岛归属范围线可由9段线改为7段线，即从左起删去第2段和第7段线，可不表示钓鱼岛、赤尾屿岛点。

2.正确表示中国国界线与地貌、地物、经纬线、色带等要素之间的关系，正确标注国界线附近的地理名称。

（1）用实线表示中国疆域范围，陆地界线与海岸线粗细有区别，用相应的简化符号绘出南海诸岛范围线，并表示南海诸岛以及钓鱼岛、赤尾屿等重要岛屿岛礁；

（2）用轮廓线或色块表示中国疆域范围，南海诸岛范围线可不表示，但必须表示南海诸岛、钓鱼岛、赤尾屿等重要岛屿岛礁；

（3）比例尺等于或小于1：1亿的，可不表示南海诸岛范围线以及钓鱼岛、赤尾屿等岛屿岛礁。

扩展资料：百度百科-中国地图

现在做数据分析基本上离不开数据可视化，在大量的数据中，有很大一部分数据都与地理信息相关，因此，在数据可视化中，可视化地图是非常重要的一部分。无论是新闻报道，还是商业分析报告，都能看到运用地图来分析展示相关数据。数据可视化地图可以最直观的表达出数据之间的空间关系，因此在很多数据分析场景中被广泛应用。 现在有非常多的工具都可以制作数据可视化地图，比如大家最常用的Excel。用Excel做数据可视化地图要用到Power Map插件，将数据导入Excel中，选中省份和人口数两个字段后，再点击上方的三维地图，就进入了地图可视化编辑界面。 然后，再将省份字段拖入位置选项，并选择省/市/自治区层级，将人口数字段拖入高度（值）选项，最后在类别选项中选择省份字段，切换为区域地图，一张各省市的常住人口可视化地图就完成了。 Excel实现地图可视化的 *** 作相对来说较为简单，但是功能也比较少，类型只有柱形图、气泡图、热度图以及区域地图等，目前大数据领域常见的流向地图等并不在可选范围内，可用的主题也是微软经典的几款，显得有一些“视觉疲劳”。 除了Excel外，现在用的比较多的就是BI软件了。BI软件作为数据分析工具，拥有强大的数据可视化功能， *** 作也非常简便。 亿信ABI作为亿信华辰自主研发的一款全能型数据分析产品，开发的地图应用实现了地图和数据展示的完美结合。内置五大洲及世界地图、中国地图，囊括中国34个省239个市区县的地图，地图类型包括FLASH、图片和HTML5格式，同时支持个性化定制地图。 同时也支持GIS地图的应用，使用天地图、ArcGIS、百度地图平台，并可拓展。支持通过点选、框选方式实现地图上数据查询、统计、钻取、预警、渲染、统计图联动、信息提示等。 如上图所示，该场景通过GIS+统计图，直观的呈现出湖北省内店铺分布及收入情况。GIS地图可缩放，并以颜色渲染呈现收入分布，点击地图店铺类型参数整表数据联动，点击地图区域可与右侧统计数据互动。 亿信ABI中GIS地图的另一大应用优势就在于，系统直接将GIS地图的各类相关属性进行封装，以组件化方式为用户提供服务，用户只需拖拽+界面化设置即可完成GIS+BI应用，不仅降低了用户的使用门槛，而且大大缩短了用户的实施周期。 亿信华辰十多年来已在GIS+BI领域获得专业的项目经验积累，亿信ABI中的GIS地图成功应用于通信、金融、电力、政府决策等多个行业。1、国家电网：电网线路GIS监控电网线路监控借助GIS地图，可任意定位查看某市全市220kV及以上某一变电站运行指标情况，监控缺陷及隐患，统计故障，发现薄弱环节。通过GIS地图电网层线路分布图，可选择任意一条线路查看各线路具体情况，包括运检指标及各类预警信息等。2、武汉移动：GIS应用监控数据全貌武汉移动经过多年信息化的建设，已形成区域化的业务管理体系，并积累了大量的业务数据。为清晰呈现各项指标在全市范围内不同区域的整体情况，建设实时集中监控平台，集中展现企业各环节经营数据。 通过在GIS地图上对各区域模块进行颜色渲染，清晰展示企业业务区域的分布情况，同时通过多TAB页的展示方式，以专题化页面对各业务场景进行专项分析。3、交银租赁： 飞机船舶资产实时监控飞机船舶资产运行数据采集及监控系统通过对飞机船舶等外部数据的定时抓取，并进行数据的清洗、整合，以GIS地图和BI报表的方式实现飞机船舶的位置监控及航行情况统计分析，实现交银租赁楼层大屏的飞机船舶GIS地图的轮播展示，使公司高管及相关部门可以实时了解公司租赁物的位置信息。

---