html的map热力图(一)

    因为团队对地图引擎的研究工作正在起步,包括地图制作,地图发布需要一定时间了解。但是前端需求依旧在不停迭代,刚好首页需要展示某个地市的地图及其分区,无奈之下只要用html的map来实现这个功能。ps:真是个苦力活,太不智能了。

<map> 标签

带有可点击区域的图像映射

    <div>                
            <img src="area_hc.png" width="241" height="287" usemap="#Map">
            <map id="Map" name="Map">
                <area shape="poly" data_ID="1" 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 shape="poly" data_ID="2" 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 shape="poly" data_ID="3" 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 shape="poly" data_ID="4"  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>

定义和用法

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

提示和注释:

注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

<area> 标签属性

属性 描述
coords 坐标值 定义可点击区域(对鼠标敏感的区域)的坐标。
href URL 定义此区域的目标 URL。
nohref nohref 从图像映射排除某个区域。
shape default、rect、circ、poly 定义区域的形状。依次是:规定全部区域、定义矩形区域、定义圆形、定义多边形区域
target _blank、_parent、_self、_top 规定在何处打开 href 属性指定的目标 URL。

shape和coords的配套使用

coords 属性规定区域的 x 和 y 坐标。 
coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。 
图像左上角的坐标是 “0,0”。

描述
x1,y1,x2,y2 如果 shape 属性设置为 “rect”,则该值规定矩形左上角和右下角的坐标。
x,y,radius 如果 shape 属性设置为 “circ”,则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn 如果 shape 属性设置为 “poly”,则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加最后一对坐标。

本文主要是使用 shape=”poly”属性,进行不规则形的热区切割。当然,对于所谓的点坐标应该如何切割呢,我们可以借用dreamweaver进行操作。可以参考一下文章进行操作: 
http://jingyan.baidu.com/article/c275f6bac0eb22e33d75671b.html

热点图自适应

    接下来就该来弄下热区图自适应问题。其实就是透过js脚本监听页面大小变化,同步更新coords中的坐标。
<!-- 引入百度cdn的jquery库 -->
<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');
    });
});
//热区图坐标计算,这里需要注意的是宽和高是原图片的宽和高
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;  
}
</script>

这下,用ie10,chrome测试了下,确定没问题后,算是大功告成,终于可以出去抽烟了。 
可以直接通过下面链接查看源码 
https://git.oschina.net/wolfpire/map-example.git

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在HTML中实现天地图热力图,可以使用天地图提供的JavaScript API结合第三方热力图库实现。以下是一个简单的实现步骤: 1. 在HTML中引入天地图的JavaScript API,并创建地图容器。 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>天地图热力图示例</title> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=yourkey"></script> <script src="https://cdn.bootcdn.net/ajax/libs/heatmap.js/2.0.2/heatmap.min.js"></script> </head> <body> <div id="map" style="width:100%;height:600px;"></div> </body> </html> ``` 其中,需要将`yourkey`替换为你申请的天地图开发者密钥。 2. 在JavaScript中初始化地图,并获取需要展示的数据。 ``` var map = new T.Map("map"); map.centerAndZoom(new T.LngLat(116.404, 39.915), 12); // 初始化地图中心点和缩放级别 // 获取需要展示的数据,这里假设数据已经存储在heatData数组中 var heatData = [...]; // 将数据转换为热力图需要的格式 var heatmapData = []; for (var i = 0; i < heatData.length; i++) { heatmapData.push({ lng: heatData[i].lng, lat: heatData[i].lat, count: heatData[i].count }); } ``` 3. 使用第三方热力图库创建热力图层,并将层添加到地图上。 ``` // 创建热力图层 var heatmap = new HeatmapOverlay(map, { "radius": 20, "maxOpacity": 0.8, "scaleRadius": true, "useLocalExtrema": true, latField: 'lat', lngField: 'lng', valueField: 'count' }); // 将数据添加到热力图层上 heatmap.setData({ max: 100, data: heatmapData }); // 将热力图层添加到地图map.addOverLay(heatmap); ``` 至此,天地图热力图就实现了。在实际开发中,还可以根据需求调整热力图的样式和参数,例如调整热力图的颜色、半径、透明度等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值