炫码科技-高德地图 LOCA 数据可视化 API 2.0——杭州房屋交易量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杭州房屋交易量</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .demo-title {
          position: absolute;
          top: 25px;
          left: 25px;
          z-index: 1;
        }

        h1 {
          font-size: 18px;
          margin: 0;
          color: rgb(180, 180, 190);
        }

        h3 {
          font-size: 12px;
          font-weight: normal;
          margin-top: 5px;
          color: rgb(150,150,150);
        }
    </style>
</head>

<body>
    <div class="demo-title">
        <h1>热力图--杭州2020年房屋出售套数热力</h1>
        <h3>通过热力暂时房产出售分布情况，颜色和高度体现出售量</h3>
    </div>
    <div id="map"></div>
    <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>

    <script>
      	var map = new AMap.Map('map', {
            zoom: 11.7,
            center: [120.19660949707033, 30.234747338474293],
            pitch: 45,
            showLabel: false,
            viewMode: '3D',
            mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
        });

        var loca = new Loca.Container({
            map,
        });

        var geo = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/hz_house_order.json',
        });

        var heatmap = new Loca.HeatMapLayer({
            // loca,
            zIndex: 10,
            opacity: 1,
            visible: true,
            zooms: [2, 22],
        });

        heatmap.setSource(geo, {
            radius: 20,
            unit: 'px',
            height: 90,
            // radius: 10,
            // unit: 'px',
            // height: 10,
            gradient: {
                0.1: 'rgba(50,48,118,1)',
                0.2: 'rgba(127,60,255,1)',
                0.4: 'rgba(166,53,219,1)',
                0.6: 'rgba(254,64,95,1)',
                0.8: 'rgba(255,98,4,1)',
                1: 'rgba(236,220,79,1)',
            },
            value: function (index, feature) {
                return feature.properties.count;
            },
            min: 0,
            max: 10,  //4.6
            heightBezier: [0, .53, .37, .98],
        });
        loca.add(heatmap);
      
      
        // 贴地点，在zoom18可见
        var pointColors = ['#F4A49E', '#EE7B91', '#E85285', '#BE408C', '#942D93', '#6A1B9A', '#56167D', '#42105F'].reverse();
        var scatter = new Loca.ScatterLayer({
            loca: loca,
            zIndex: 9,
            zooms: [14, 22],
            opacity: 1,
        });
        scatter.setSource(geo);
        scatter.setStyle({
            unit: 'meter',
            size: [80, 80],
            color: function (index, feat) {
                const count = parseInt(feat.properties.count * 10);
                return pointColors[count % pointColors.length];
            },
        });

        // 淡入淡出
        map.on('viewchange', function () {
            var z = map.getZoom();
            var outZ = 18;
            // 14 - 16 级别淡出
            heatmap.setOpacity(1 - (z - 14) / (outZ - 14));

            // 圆点
            scatter.setOpacity((z - 14) / (14.3 - 14));
        });

        // 创建纯文本标记
        var text = new AMap.Text({
            text: '纯文本标记',
            anchor: 'center', // 设置文本标记锚点
            draggable: true,
            cursor: 'pointer',
            angle: 0,
            visible: false,
            offset: [0, -25],
            style: {
                'padding': '.45rem 0.15rem',
                'margin-bottom': '1rem',
                'border-radius': '.25rem',
                'background-color': 'rgba(0,0,0,0.5)',
                'width': '15rem',
                'border-width': 0,
                'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
                'text-align': 'center',
                'font-size': '15px',
                'color': '#fff',
            },
        });
        text.setMap(map);
        map.on('mousemove', function (e) {
            var selectPoint = scatter.queryFeature(e.pixel.toArray());
            // console.log(selectPoint);
            if (selectPoint) {
                text.show();
                var count = selectPoint.properties.count;
                text.setText('Housing sales volume：' + parseInt(count * 10) + ' sets');
                text.setPosition(e.lnglat);
            } else {
                text.hide();
            }
        });
    </script>
</body>

</html>
点此打开炫码科技-高德地图 LOCA 数据可视化 API 2.0——杭州房屋交易量杭州房屋交易量地图
0 0 投票数
文章评分