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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <title data-i18n="resources.title_graphicLayer"></title>
    <script type="text/javascript" include="randomcolor,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;
    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);
    var colorCount = 10;
    var colors = getRandomColors(colorCount);
    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 circleStyles = [];

            //创建圆的样式
            for (var i = 0; i < colorCount; i++) {
                circleStyles.push(L.supermap.circleStyle({
                    color: colors[i],
                    opacity: 1,
                    radius: Math.floor(Math.random() * 3 + 1),
                    fill: true,
                    fillColor: colors[i],
                    fillOpacity: 1
                }));
            }

            //设置每个点的经纬度和传入圆的样式
            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: circleStyles[Math.floor(Math.random() * colorCount)].getStyle()
                });
            }

            //绘制图层
            L.supermap.graphicLayer(graphics, {
                render: "canvas",
                onClick: function (graphic) {
                    L.popup().setLatLng(graphic.getLatLng())
                        .setContent('<p>' + resources.text_latLng + '：<br>' + graphic.getLatLng().lng + ',<br>' + graphic.getLatLng().lat + '</p>')
                        .openOn(map);
                }
            }).addTo(map);
            widgets.loader.removeLoader();
        })
    }

    //生成随机颜色
    function getRandomColors(count) {
        return randomColor({
            luminosity: 'bright',
            hue: 'random',
            alpha: 0.5,
            format: 'rgba',
            count: count
        });
    }


</script>
</body>
</html>