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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsCluster_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 server-url="https://iportal.supermap.io/iportal" map-id="1329428269">
                <sm-cluster-layer :data="culsterLayerData" :radius="100"></sm-cluster-layer>
            </sm-web-map>
        </div>
        <script>
            $.get("../data/chinaEarthquake.csv", function(response) {
                var dataObj = Papa.parse(response, {
                    skipEmptyLines: true,
                    header: true
                });

                var data = dataObj.data;
                var geojson = {
                    type: "FeatureCollection",
                    features: []
                };

                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var date = new Date(item.date);
                    var year = date.getFullYear();

                    //2w+地震数据
                    if (year > 2000 && year < 2015) {
                        var feature = {
                            type: "feature",
                            geometry: {
                                type: "Point",
                                coordinates: []
                            },
                            properties: {
                                value: parseFloat(item.level)
                            }
                        };
                        feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];
                        geojson.features.push(feature);
                    }
                }

                new Vue({
                    el: "#main",
                    data() {
                        return {
                            culsterLayerData: geojson
                        };
                    }
                });
            });
        </script>
    </body>
</html>