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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!--********************************************************************
* 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,maximum-scale=1,user-scalable=no' />
    <script type="text/javascript" include="jquery,papaparse,widgets" src="../js/include-web.js"></script>
    <title data-i18n="resources.title_mb_graphicLayerWGS84"></title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .mapboxgl-marker {
            width: 10px;
            height: 10px;
            background: red;
            margin-top: -5px;
            margin-left: -5px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <script type="text/javascript" include='mapbox-gl-enhance,deck' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <div id='map'></div>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map = new mapboxgl.Map({
            container: 'map', 
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
                        "rasterSource":"iserver",
                        "tileSize": 256
                    }
                },

                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            crs: mapboxgl.CRS.EPSG4326,
            center: [-73.91426, 40.7594],
            zoom: 10.64
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        widgets.loader.showLoader("data loading...");
        map.on('load', function () {
            $.get('../data/nyc-taxi.csv', function (csvstr) {
                widgets.loader.removeLoader();
                var result = Papa.parse(csvstr, {
                    skipEmptyLines: true,
                    header: true
                });
                addLayer(result.data);
            });


            function addLayer(points) {
                var graphics = [],
                    popup = new mapboxgl.Popup({
                        closeOnClick: false
                    }).addTo(map);
                for (var i = 0; i < points.length; i++) {

                    var lngLat = {
                        lng: parseFloat(points[i].lng),
                        lat: parseFloat(points[i].lat)
                    };
                    /**
                     * 可以单独给要素设置颜色和半径:
                     *  new mapboxgl.supermap.Graphic(lngLat,{
                     *      color:[255,0,0],
                     *      radius:40
                     *  });
                     */
                    graphics.push(new mapboxgl.supermap.Graphic(lngLat));
                }

                var graphicStyle = {
                    color: [255, 0, 0],
                    radius: 20
                };

                graphicLayer = new mapboxgl.supermap.GraphicLayer("graphic", {
                    graphics: graphics,
                    radius: graphicStyle.radius,
                    color: graphicStyle.color,
                    highlightColor: [255, 0, 0, 255],
                    onClick: function (e) {
                        if (!popup.isOpen()) {
                            popup.addTo(map);
                        }
                        popup.setLngLat(e.lngLat)
                            .setHTML("position:" + JSON.stringify(e.lngLat))
                    }
                });

                map.addLayer(graphicLayer);

            }
        });

    </script>

</body>

</html>