热力图组件

效果图

示例

  <script type="text/javascript">
          var map, baseLayer, heatMaplayer;
          $(document).ready(function(){
              initMap();
          });
        function initMap(){
            baseLayer = new W.tileLayer('http://localhost:8080/tileProxy/getImage?x={x}&y={y}&z={z}&type=google');
            map = W.map("mapContainer", {
                zoom : 5,
                center : [35.53222622770337, 106.875],
                maxZoom : 11,
                layers: [baseLayer]
            });
            initHeatMap();
        }
        function initHeatMap(data){
            var _data = [];
            //在指定坐标范围内生成随机点坐标
            var minX = 90.7470703125;
            var maxX = 117.333984375;
            var minY = 28.8831596093235;
            var maxY = 40.81380923056958;
            var _x = maxX - minX;
            var _y = maxY - minY;
            for(var i = 0; i < 100; i++){
                var x = minX + Math.random() * _x;
                var y = minY + Math.random() * _y;    

                _data.push({
                    lat: y, 
                    lng: x, 
                    count: 1
                });
            }
            var testData = {
                max: 1,
                data: _data
            };
            var cfg = {
                //半径 单位像素
                "radius": 35,
                //最大透明度
                "maxOpacity": .6,
                //是否根据级别变化进行缩放
                "scaleRadius": false,
                lngField: 'lng',//经度字段名称
                latField: 'lat',//纬度字段名称
                valueFiled : 'count'//用于生成热图的值字段
            };
            heatMaplayer = new HeatmapOverlay(cfg);

            map.addLayer(heatMaplayer);
            heatMaplayer.setData(testData);
        }
</script>

构造方法

构造属性

方法