365bet亚洲版登录-bet官网365入口

365bet亚洲版登录拥有超过百间客房,bet官网365入口的文化历经几十年的传承和积淀形成的核心内容获得业界广泛的认可,365bet亚洲版登录是目前信誉最高的娱乐场所,同国内外几百家网上内容供应商建立了合作关系。

js绘制中华夏族民共和国地图

近年来的数据总结项目中要用到中中原人民共和国地形图,也正是在地图上动态的展现有个别时刻段某些省份地区的总结数据,大家不要求flash,仅仅依赖raphael.js以至SVG图像就可以产生地图的竞相操作。在本文中,小编给我们三进三出什么行使js来产生地图交互作用。

先简介下raphael.js,raphael.js是二个十分的小的javascript库,它可以在网页中实现绘制各个矢量图、各种图片、以至图像裁剪、旋转、运动动漫等等功效。其它raphael.js还跨浏览器宽容,而且还十三分老掉牙的IE6啊。raphael.js的官方网站地址:

兵马未动粮草先行未雨策动干活

大家须要筹划一张矢量地图,可以从英特网找一张矢量地图,只怕选用illustrator绘制意气风发份矢量地图,然后导出为SVG格式的文件,这几个文件可以在浏览器上开拓,然后提取里面包车型客车path路线音信。并将path路线信息,依据chinamapPath.js的格式打算好地图路径消息。

复制代码 代码如下:var china = []; function paintMap { var attr = { "fill": "#97d6f5", "stroke": "#eee", "stroke-width": 1, "stroke-linejoin": "round" }; china.aomen = { name: "哈里斯堡", path: 普拉多.path("M413.032,.........省略若干......... ,414.183z"卡塔尔国.attr } china.hk = { //格式同上 }; }

如上是我们将希图好的地形图路线音信打包到(卡塔尔国函数中,并保存文件名为chinamapPath.js,供后边调用。

HTML

第生龙活虎在head部分载入raphael.js库文件和chinamapPath.js路径新闻文件。

复制代码 代码如下:

下一场在body中供给停放地图的职位放置div#map。复制代码 代码如下:

JAVASCRIPT

第大器晚成我们在页面中调用地图,方法如下:复制代码 代码如下:window.onload = function (卡塔尔(英语:State of Qatar) { //绘制地图 var 本田UR-V = Raphael;//将地图载入到id为map的div中,并安装区域为600x500px大小。 paintMap; }

其失常候我们用浏览器张开会来得载入后的地图。接下来大家要给地图中的对应的省份区域增进省份称号,以至鼠标滑向每一种省份区块时的变脸动漫效果。

复制代码 代码如下: window.onload = function (卡塔尔(قطر‎ { var 逍客 = Raphael; //调用绘制地图方法 paintMap; var textAttr = { "fill": "#000", "font-size": "12px", "cursor": "pointer" }; for { china[state]['path'].color = Raphael.getColor; { //获取当前图形的主干坐标 var xx = st.getBBox.width / 2卡塔尔; var yy = st.getBBox.height / 2卡塔尔; //写入文字 china[state]['text'] = R.text(xx, yy, china[state]['name']).attr; st[0].onmouseover = function (卡塔尔(قطر‎{//鼠标滑向 st.animate({fill: st.color, stroke: "#eee"}, 500); china[state]['text'].toFront; }; st[0].onmouseout = function (卡塔尔{//鼠标离开 st.animate({fill: "#97d6f5", stroke: "#eee"}, 500); china[state]['text'].toFront(china[state]['path'], state); } }

如上代码中动用了raphael提供的法子有:getColor,getBBox,animate,toFront等等,这几个能够在raphael文书档案中找到使用表明,本文不在陈诉。别的由于地图尺寸原因,有个别省份称号在地图中的展现地点不稳当,要求更正偏移量,那样看起来舒性格很顽强在艰难险阻或巨大压力面前不屈点。

复制代码 代码如下:window.onload = function (卡塔尔国 { var ENVISION = Raphael; ... for { ... { .... switch { 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: } ... }卡塔尔(قطر‎(china[state]['path'], state); } }

本文由365bet亚洲版登录发布于服务器&运,转载请注明出处:js绘制中华夏族民共和国地图

您可能还会对下面的文章感兴趣: