html的map热力图（二）——热区样式

最新推荐文章于 2023-11-02 14:19:46 发布

wolfpirelee

最新推荐文章于 2023-11-02 14:19:46 发布

阅读量4.8k

点赞数 2

文章标签：热区样式热力图 map area

本文链接：https://blog.csdn.net/wolfpirelee/article/details/54575016

版权

自从前几天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() {
// 热区鼠标滑过变色以及显示title
var 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

wolfpirelee

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
html的map热力图（二）——热区样式

自从前几天html热力图解决项目的紧急需求后，前端需求人员又提出了改进的地儿，鼠标滑过热点区域的时候，希望这个区域能够有显著变化，并且能够显示这个区域的title。几番度娘外加谷歌，最终决定用画布这种比较轻松的解决方案。废话不多说，直接上代码。```无标题文档<area id="street_df" shape="poly" coords="
复制链接

扫一扫