html的map热力图（二）——热区样式
来源：互联网 发布：dkms linux 编辑：程序博客网 时间：2024/06/07 02:59
自从前几天html热力图解决项目的紧急需求后，前端需求人员又提出了改进的地儿，鼠标滑过热点区域的时候，希望这个区域能够有显著变化，并且能够显示这个区域的title。几番度娘外加谷歌，最终决定用画布这种比较轻松的解决方案。废话不多说，直接上代码。
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><div><div style="display: block; background: url('area_hc.png') repeat scroll 0% 0% transparent; padding: 0px; width: 241px; height: 287px; position: relative;"><canvas id="diagonal" style="border:0px none;top:0px;left:0;position:absolute; padding: 0px; opacity: 1;" width="241px" height="287px"></canvas><img src="area_hc.png" usemap="#Map" style="border: 0px none;position:absolute;left:0;top:0;opacity:0;"><map name="Map" id="center_map"><area id="street_df" shape="poly" coords="73,2,76,5,79,6,81,10,84,13,86,20,84,26,82,28,82,33,83,37,82,44,81,51,81,58,84,66,88,72,90,79,94,84,95,88,100,89,105,88,111,88,117,94,119,98,123,102,128,107,130,112,129,116,129,118,127,118,122,118,121,116,119,114,118,115,117,117,115,118,112,118,108,118,106,116,106,116,103,117,104,121,106,125,102,126,99,126,98,126,95,129,95,136,97,139,101,139,105,139,107,141,108,141,114,139,117,137,119,136,123,141,125,146,132,149,136,146,131,150,124,154,123,158,120,161,113,166,115,172,115,177,115,184,117,189,118,196,118,198,108,199,101,201,96,201,93,200,88,196,82,190,81,186,80,185,75,183,72,183,69,176,65,172,62,170,61,166,59,162,54,158,46,156,38,154,33,150,31,141,32,135,31,130,29,123,30,119,32,115,35,111,35,108,35,104,32,98,29,94,25,93,20,91,13,88,11,83,5,77,3,74,3,70,5,66,10,62,9,54,8,45,10,41,13,39,16,39,21,39,26,39,34,39,39,39,41,39,43,39,48,34,51,25,54,19,59,16,63,13,63,10,70,8,72,5" href="street_df.png"><area id="street_xy" shape="poly" coords="136,145,141,146,145,146,150,148,155,148,163,146,173,147,179,149,184,151,188,159,189,162,191,169,191,173,190,179,189,181,186,185,185,189,182,191,180,193,176,193,174,189,170,190,167,190,165,192,163,194,160,197,156,197,148,197,140,197,131,197,123,197,117,196,118,192,118,186,117,181,117,175,119,167,119,165,120,163,123,161,132,155,129,153,133,149,126,155,124,158" href="street_xy.png"><area id="street_sy" shape="poly" coords="166,200,167,202,175,206,176,211,170,205,176,208,180,211,182,214,184,221,186,223,187,230,187,236,187,244,187,251,187,259,184,263,181,266,176,266,173,266,169,266,167,263,162,266,162,273,159,277,164,279,169,279,174,281,183,283,193,283,197,283,203,283,205,280,205,275,205,269,201,263,199,253,196,246,196,240,196,235,199,229,203,226,207,221,214,216,221,206,226,202,233,198,237,195,239,191,238,187,235,185,235,186,233,185,234,187,234,184,231,184,228,182,225,181,225,174,230,174,226,171,229,174,226,171,223,170,222,167,220,163,217,160,215,156,212,154,208,156,208,158,204,159,204,158,200,158,196,156,195,154,191,156,190,153,190,153,189,154,194,158,196,155,189,160,191,167,191,172,193,175,193,179,192,182,190,185,188,190,187,192,184,193,182,193,178,193,176,192,172,191,171,191,169,191,166,193,165,196,162,197,165,198,165,199" href="street_sy.png"><area id="street_hc" shape="poly" coords="97,203,100,204,104,203,106,202,111,201,117,201,123,199,129,198,140,198,151,198,156,199,161,200,164,203,168,206,171,211,174,216,178,220,181,227,181,233,182,239,184,244,184,251,184,256,181,258,178,259,171,259,169,260,165,261,160,266,155,273,151,274,147,273,143,272,137,271,129,271,123,270,116,268,110,266,104,264,101,263,97,260,93,257,92,253,90,250,90,245,92,242,95,237,95,232,99,224,101,216,100,211,99,207" href="street_hc.png"></map></div></div></body><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var street_df_coords = '73,2,76,5,79,6,81,10,84,13,86,20,84,26,82,28,82,33,83,37,82,44,81,51,81,58,84,66,88,72,90,79,94,84,95,88,100,89,105,88,111,88,117,94,119,98,123,102,128,107,130,112,129,116,129,118,127,118,122,118,121,116,119,114,118,115,117,117,115,118,112,118,108,118,106,116,106,116,103,117,104,121,106,125,102,126,99,126,98,126,95,129,95,136,97,139,101,139,105,139,107,141,108,141,114,139,117,137,119,136,123,141,125,146,132,149,136,146,131,150,124,154,123,158,120,161,113,166,115,172,115,177,115,184,117,189,118,196,118,198,108,199,101,201,96,201,93,200,88,196,82,190,81,186,80,185,75,183,72,183,69,176,65,172,62,170,61,166,59,162,54,158,46,156,38,154,33,150,31,141,32,135,31,130,29,123,30,119,32,115,35,111,35,108,35,104,32,98,29,94,25,93,20,91,13,88,11,83,5,77,3,74,3,70,5,66,10,62,9,54,8,45,10,41,13,39,16,39,21,39,26,39,34,39,39,39,41,39,43,39,48,34,51,25,54,19,59,16,63,13,63,10,70,8,72,5';var street_xy_coords = '136,145,141,146,145,146,150,148,155,148,163,146,173,147,179,149,184,151,188,159,189,162,191,169,191,173,190,179,189,181,186,185,185,189,182,191,180,193,176,193,174,189,170,190,167,190,165,192,163,194,160,197,156,197,148,197,140,197,131,197,123,197,117,196,118,192,118,186,117,181,117,175,119,167,119,165,120,163,123,161,132,155,129,153,133,149,126,155,124,158';var street_sy_coords = '166,200,167,202,175,206,176,211,170,205,176,208,180,211,182,214,184,221,186,223,187,230,187,236,187,244,187,251,187,259,184,263,181,266,176,266,173,266,169,266,167,263,162,266,162,273,159,277,164,279,169,279,174,281,183,283,193,283,197,283,203,283,205,280,205,275,205,269,201,263,199,253,196,246,196,240,196,235,199,229,203,226,207,221,214,216,221,206,226,202,233,198,237,195,239,191,238,187,235,185,235,186,233,185,234,187,234,184,231,184,228,182,225,181,225,174,230,174,226,171,229,174,226,171,223,170,222,167,220,163,217,160,215,156,212,154,208,156,208,158,204,159,204,158,200,158,196,156,195,154,191,156,190,153,190,153,189,154,194,158,196,155,189,160,191,167,191,172,193,175,193,179,192,182,190,185,188,190,187,192,184,193,182,193,178,193,176,192,172,191,171,191,169,191,166,193,165,196,162,197,165,198,165,199';var street_hc_coords = '97,203,100,204,104,203,106,202,111,201,117,201,123,199,129,198,140,198,151,198,156,199,161,200,164,203,168,206,171,211,174,216,178,220,181,227,181,233,182,239,184,244,184,251,184,256,181,258,178,259,171,259,169,260,165,261,160,266,155,273,151,274,147,273,143,272,137,271,129,271,123,270,116,268,110,266,104,264,101,263,97,260,93,257,92,253,90,250,90,245,92,242,95,237,95,232,99,224,101,216,100,211,99,207';$(function(){$(window).resize(function(event) {var coords = new Array();coords.push(street_df_coords);coords.push(street_xy_coords);coords.push(street_sy_coords);coords.push(street_hc_coords);resizeMap(coords, '241', '287');changeStyle(); });changeStyle();});//热区图坐标计算，这里需要注意的是宽和高是原图片的宽和高function resizeMap(o_coords, imageWidth, imageHeigth) {var map = document.getElementById("center_map");var element = map.childNodes;for (var i = 0; i < element.length; i++) { var oldCoords = o_coords[i]; var newcoords = residePointPosition(oldCoords, imageWidth, imageHeigth); element[i].setAttribute("coords", newcoords); }var test = element;}//调整MAP中坐标 function residePointPosition(position, _imageWidth, _imageHeigth) { var imageWidth = _imageWidth;//213; var imageHeigth = _imageHeigth;//242; var cur_imageHeight = $('#center_img').height(); //var cur_imageWidth = $('#center_img').width(); var cur_imageWidth = Math.round(parseInt((_imageWidth * cur_imageHeight) / imageHeigth)); var each = position.split(","); //获取每个坐标点 for (var i = 0; i < each.length; i++) { each[i] = Math.round(parseInt(each[i]) * cur_imageWidth / imageWidth);//x坐标 i++; each[i] = Math.round(parseInt(each[i]) * cur_imageHeight / imageHeigth);//y坐标 } //生成新的坐标点 var newPosition = ""; for (var i = 0; i < each.length; i++) { newPosition += each[i]; if (i < each.length - 1) { newPosition += ","; } } return newPosition; }function changeStyle() {// 热区鼠标滑过变色以及显示titlevar canvers = document.getElementById("diagonal");var context = canvers.getContext("2d");context.globalAlpha = 0.5;$("#center_map area").each(function () {$(this).mouseover(function () {context.beginPath();var strs = new Array(); //定义一数组strs = $(this).attr("coords").split(",");var i1, i2;var x = 0;var y = 0;for (var i = 0; i < strs.length; i++) {if (i % 2 == 0) {i1 = strs[i];x = x + parseInt(i1);}if (i % 2 == 1) {i2 = strs[i];if (i == 1) {context.moveTo(i1, i2);}else {context.lineTo(i1, i2);}y = y + parseInt(i2);}}context.fillStyle = "#fff";// 这里计算不规则图形的中心点x = parseInt(x*2/strs.length) - 20;//由于title的名字长度关心，故将点横坐标向左偏移20，这样子，title显示的会更加协调y = parseInt(y*2/strs.length);// console.log(x + ',' + y);var _text = $(this).attr('id');context.fillText(_text, x, y);context.fill();context.closePath(); //闭合});$(this).mouseout(function () {context.clearRect(0, 0, 241, 287);});});}</script></html>主要是参考canvas的属性，在图片区域加一层画布。http://www.w3school.com.cn/tags/tag_canvas.asp
源码上传至码云：https://git.oschina.net/wolfpire/map-example.git
0 0
- html的map热力图（二）——热区样式
- html的map热力图（一）
- 热力图样式
- 热力图
- SuperMap超图的热力图
- Heatmap 热力图（1）
- （GIS可视化）热力图
- 热力图制作（一）人口数据的网格化
- ArcGIS desktop——“热力图”实现方法比较
- 基于Canvas的热力图绘制方法
- 百度热力图分析网站的技巧
- 地图热力图的学习资源
- Openlayers中热力图的实现
- Echart在Openlayers的应用-热力图
- openlayer3热力图的实现 Heatmap
- Openlayer结合heatmap热力图的实现
- HTML图片热区map area的用法
- HTML图片热区map area的用法
- [leetcode-485]Max Consecutive Ones
- [CloudReader]Android - 仿网易云音乐歌单详情页
- java设计模式——单例设计模式
- 关于SlidingMenu的一些改进写法，仿QQ5.0侧拉缩进
- Codeforces 8VC Venture Cup 2017 - Elimination Round D.PolandBall and Polygon
- html的map热力图（二）——热区样式
- PID调节参数的作用
- python 3-4 如何进行反向迭代以及如何实现反向迭代 __reversed__ yield
- Jquery中一款DataTimePicker日期选择器
- C++中的long long和__int64类型
- 单元测试
- 分页效果
- 紫书习题 7-1 UVa 208 （爆搜加剪枝）
- 修改实体类后页面对应字段总是显示Undefined。
