<template>
    <div >
        <div id="map"></div>
    </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import {Logo, QueryByBoundsParameters, QueryService, SuperMap} from '@supermap/iclient-mapboxgl';
import  $ from 'jquery'

export default {
    name: 'HelloWorld',
    data () {
        return {
        }
    },
    mounted(){ 
        var host = "http://support.supermap.com.cn:8090";
        var map, heatMapLayer,
            url = host + "/iserver/services/map-world/rest/maps/World";
        var map = new mapboxgl.Map({
            container: 'map',
            renderWorldCopies:false,
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": 'attribution',
                        "type": "raster",
                        "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
                        "tileSize": 256,
                    },
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 9
                }]
            },
            center: [0, 0],
            zoom: 4
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');

        heatMapLayer = new mapboxgl.supermap.HeatMapLayer(
            "heatMap",
            {
                "map": map,
                "id": "heatmap",
                "radius": 45,
    //            设置图层透明度：（参数方式）
    //            "opacity": 0.5,
                //featureWeight指定以哪个属性值为热力权重值创建热力图：
                "featureWeight": "value",
            }
        );

        map.on('load', ()=>{
            createHeatPoints();
        });

        function createHeatPoints() {
            clearHeatPoints();
            var heatPoints = [];
            var num = 200
            var radius = 50
            var unit = 'px'
            heatMapLayer.radius = radius;
            var features = [];
            for (var i = 0; i < num; i++) {
                features[i] =
                    {
                        "type": "feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                Math.random() * 300 - 180,
                                Math.random() * 100 - 80]
                        },
                        "properties": {
                            "value": Math.random() * 9,
                        }
                    };
            }
            var heatPoints = {
                "type": "FeatureCollection",
                "features": features
            };
            heatMapLayer.addFeatures(heatPoints);
    //        设置图层透明度：（函数方式）
    //        heatMapLayer.setOpacity(0.5);
            map.addLayer(heatMapLayer);
        }

        function clearHeatPoints() {
            if (map.getLayer("heatmap")) {
                map.removeLayer("heatmap");
            }
        }
    }
}
</script>

<style scoped>
#map {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: white
}
</style>