fuyuhang
/
Project_yhfu
mirrorاز http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsHeatmap_Vue"></title>
        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
        <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
        <div id="main">
            <sm-web-map :map-options="mapOptions">
                <sm-heatmap-layer :data="data" :layer-style="heatMapStyle"></sm-heatmap-layer>
            </sm-web-map>
        </div>
        <script>
            var heatFeatures = [],
                heatMapSource,
                heatMapStyle;
            $.get("../data/chinaEarthquake.csv", function(csvstr) {
                var data = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
                for (var i = 0; i < data.length; i += 6) {
                    if (data[i].Y <= 85) {
                        heatFeatures.push({
                            geometry: {
                                coordinates: [parseFloat(data[i].X), parseFloat(data[i].Y)],
                                type: "Point"
                            },
                            properties: { value: data[i].level / 50, id: i },
                            type: "Feature"
                        });
                    }
                }
                heatMapStyle = new SuperMap.Components.commontypes.HeatMapStyle({
                    "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
                    "heatmap-color": [
                        "interpolate",
                        ["linear"],
                        ["heatmap-density"],
                        0,
                        "rgba(33,102,172,0)",
                        0.2,
                        "rgb(103,169,207)",
                        0.4,
                        "rgb(209,229,240)",
                        0.6,
                        "rgb(253,219,199)",
                        0.8,
                        "rgb(239,138,98)",
                        1,
                        "rgb(178,24,43)"
                    ],
                    "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 2, 9, 20],
                    "heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 7, 1, 9, 0]
                });
                new Vue({
                    el: "#main",
                    data() {
                        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
                        var attribution =
                            "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
                            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
                            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
                        return {
                            data: {
                                type: "FeatureCollection",
                                features: heatFeatures
                            },
                            heatMapStyle: heatMapStyle,
                            mapOptions: {
                                container: "map", // container id
                                style: {
                                    version: 8,
                                    sources: {
                                        "raster-tiles": {
                                            attribution: attribution,
                                            type: "raster",
                                            tiles: [
                                                host +
                                                    "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}"
                                            ],
                                            tileSize: 256
                                        }
                                    },
                                    layers: [
                                        {
                                            id: "simple-tiles",
                                            type: "raster",
                                            source: "raster-tiles",
                                            minzoom: 0,
                                            maxzoom: 22
                                        }
                                    ]
                                },
                                center: [120.143, 30.236],
                                zoom: 3
                            }
                        };
                    }
                });
            });
        </script>
    </body>
</html>