atmosphericinversion/test.html

132 lines
9.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>