fuyuhang
/
Project_yhfu
огледало од http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title data-i18n="resources.title_earthquakeHeatMapLayer"></title>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" include="jquery,papaparse" src="../js/include-web.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var url = host + "/iserver/services/map-world/rest/maps/World";
        var map;
        map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({ attributionOptions: { collapsible: false } }),
            view: new ol.View({
                center: [0, 0],
                zoom: 2,
                projection: 'EPSG:4326',
                multiWorld: true
            })
        });
        var iserverWorldLayer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: url,
                wrapX: true
            }),
            projection: 'EPSG:4326'
        });
        map.addLayer(iserverWorldLayer);


        //加载热力图
        var radius = 15, heatFeatures = [], heatMapSource, heatMapLayer;
        $.get('../data/chinaEarthquake.csv', function (csvstr) {
            var data = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
            for (var i = 0; i < data.length; i++) {
                if (data[i].Y <= 85) {
                    heatFeatures.push(new ol.Feature({
                        geometry: new ol.geom.Point([data[i].X, data[i].Y]),
                        Properties: { "value": data[i].level / 50 }
                    }))
                }
            };
            heatMapSource = new ol.source.HeatMap("heatMap", {
                "map": map,
                "id": "heatmap",
                "radius": radius,
                //权重
                "featureWeight": "value",
            });
            heatMapSource.addFeatures(heatFeatures);
            heatMapLayer = new ol.layer.Image({
                source: heatMapSource
            });
            map.addLayer(heatMapLayer);
        });


    </script>
</body>

</html>