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


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

<head>
    <title data-i18n="resources.title_graphicLayerTaxi"></title>
    <script type="text/javascript" include="papaparse,widgets" src="../js/include-web.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map, imagePath = '../img/taxi.png';
        map = L.map('map', {
            preferCanvas: true,
            center: [40.74650, -73.89109999999999],
            maxZoom: 18,
            zoom: 12
        });
        var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
        L.supermap.tiledMapLayer(url).addTo(map);
        addGraphicLayer();

        function addGraphicLayer() {
            //将数据可视化展示
            widgets.loader.showLoader();
            $.get('../data/nyc_taxi_18W.csv', function (nycData) {
                var features = Papa.parse(nycData, {
                    skipEmptyLines: true,
                    header: true
                }).data;
                var count = features.length;
                var graphics = [];
                var imageStyles = [];
                //创建图片的样式
                var img = new Image();
                img.src = imagePath;
                img.onload = function () {
                    imageStyles.push(L.supermap.imageStyle({
                        img: img,
                        anchor: [16, 16]
                    }));

                    //设置每个点的经纬度和图片的样式
                    for (var i = 0; i < count; ++i) {
                        var coordinates = [Number(features[i].X), Number(features[i].Y)];
                        if (coordinates[0] === coordinates[1]) {
                            continue;
                        }
                        graphics[i] = L.supermap.graphic({
                            latLng: L.latLng(coordinates[1], coordinates[0]),
                            style: imageStyles[0].getStyle()
                        });
                    }
                    //绘制图层
                    L.supermap.graphicLayer(graphics, {
                        render: 'canvas',
                        onClick: function (graphic, evt) {
                            L.popup().setLatLng(evt.latlng)
                                .setContent('<p>' + resources.text_latLng + '：<br>' + graphic.getLatLng()
                                    .lng + ',<br>' + graphic.getLatLng().lat + '</p>')
                                .openOn(map);
                        }
                    }).addTo(map);
                    widgets.loader.removeLoader();
                };
            })
        }
    </script>
</body>

</html>