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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_mapvPolylineTime"></title>
    <script type="text/javascript" include="jquery" 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" include="mapv" src="../../dist/leaflet/include-leaflet.js"></script>

<script type="text/javascript">
    var map = L.map('map', {
        center: [30.41, 114.32],
        zoom: 11,
    });

    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";

    L.supermap.tiledMapLayer(url).addTo(map);
    loadData();

    //示例数据来源为百度MapV的加偏数据，iClient未做纠偏处理
    function loadData() {
        $.get('../data/wuhan-car', function (rs) {
            var data = [];
            var timeData = [];

            rs = rs.split("\n");
            var maxLength = 0;
            //leaflet只识别经纬度坐标，需要将数据中的米坐标转成经纬度坐标
            var projection = L.CRS.EPSG3857.projection;
            var ggPoints;
            for (var i = 0; i < rs.length; i++) {
                var item = rs[i].split(',');
                var coordinates = [];
                if (item.length > maxLength) {
                    maxLength = item.length;
                }
                if (item.length < 2) {
                    continue;
                }
                for (j = 0; j < item.length; j += 2) {
                    //需要将数据中的米坐标转成经纬度坐标
                    var latLng = projection.unproject(L.point([item[j], item[j + 1]]));
                    coordinates.push([latLng.lng, latLng.lat]);
                    timeData.push({
                        geometry: {
                            type: 'Point',
                            coordinates: [latLng.lng, latLng.lat]
                        },
                        count: 1,
                        time: j
                    });
                }
                ggPoints = coordinates;
                data.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: coordinates
                    }
                });

            }


            var dataSet1 = new mapv.DataSet(data);

            var options1 = {
                strokeStyle: 'rgba(53,57,255,0.5)',
                shadowColor: 'rgba(53,57,255,0.2)',
                shadowBlur: 3,
                lineWidth: 3.0,
                draw: 'simple'
            };
            //线图层
            var dataAttr = resources.text_dataSources + "<a target='_blank' href='https://mapv.baidu.com/examples/baidu-map-polyline-time.html'> MapV</a> ";
            L.supermap.mapVLayer(dataSet1, options1, {attributionPrefix: dataAttr, attribution: ""}).addTo(map);

            var dataSet2 = new mapv.DataSet(timeData);
            var options2 = {
                fillStyle: 'rgba(255, 250, 250, 0.2)',
                globalCompositeOperation: "lighter",
                size: 1.5,
                animation: {
                    stepsRange: {
                        start: 0,
                        end: 100
                    },
                    trails: 3,
                    duration: 5,
                },
                draw: 'simple'
            };
            //动态轨迹图层
            L.supermap.mapVLayer(dataSet2, options2).addTo(map);
            setTimeout(function () {
                map.openPopup(resources.text_iClient, map.getCenter());
            }, 1000)
        });
    }

</script>

</body>
</html>