fuyuhang
/
Project_yhfu
zrcadlo http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title data-i18n="resources.title_graphicLayerTaxi"></title>
    <script type="text/javascript" include="papaparse,widgets" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
    var url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/ChinaDark",
        map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: ol.proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
                zoom: 12,
                projection: 'EPSG:3857',
                multiWorld: true
            })
        });

    loadData();

    function loadData() {
        widgets.loader.showLoader();
        $.get('../data/nyc_taxi_18W.csv', function (nycData) {
            new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
                widgets.loader.removeLoader();
                var mapJSONObj = serviceResult.result;
                var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
                var layer = new ol.layer.Tile({
                    source: new ol.source.TileSuperMapRest(options)
                });
                map.addLayer(layer);

                var img = new Image();
                img.src = '../img/taxi.png';
                img.onload = function () {
                    var imageStyle = new ol.style.Icon(({
                        img: this,
                        size: [32, 32],
                        imgSize: [32, 32]
                    }));
                    var features = Papa.parse(nycData, {skipEmptyLines: true, header: true}).data;
                    var counts = features.length;    //矢量点的个数
                    var graphics = new Array(counts);


                    for (var i = 0; i < counts; ++i) {
                        var coordinates = [Number(features[i].X), Number(features[i].Y)];
                        if (coordinates[0] === coordinates[1]) {
                            continue;
                        }
                        coordinates = ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857');
                        graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
                        graphics[i].setStyle(imageStyle);
                    }
                    map.once('postrender', function () {
                        var graphicLayer = new ol.layer.Image({
                            source: new ol.source.Graphic({
                                graphics: graphics,
                                render: "canvas",
                                map: map
                            })
                        });
                        map.addLayer(graphicLayer);
                    })
                }
            });
        });
    }
</script>
</body>
</html>