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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <title data-i18n="resources.title_graphicLayerClovers"></title>
    <script type="text/javascript" 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,
        crs: L.CRS.EPSG4326,
        center: {lon: 0, lat: 0},
        maxZoom: 18,
        zoom: 6
    });


    var url = host + "/iserver/services/map-world/rest/maps/World";
    L.supermap.tiledMapLayer(url).addTo(map);

    addGraphicLayer();

    function addGraphicLayer() {
        var count = 180000;
        var graphics = [];
        var e = 45;
        var clovers = [];
        var radius = [10, 14, 18];
        var styles = [{angle: 60, count: 3}, {angle: 45, count: 4}, {angle: 30, count: 6}];
        //三叶草样式的种类
        var symbolCount = radius.length * styles.length;
        var randCount = 9;
        //创建三叶草样式
        for (var i = 0; i < radius.length; i++) {
            for (var j = 0; j < styles.length; j++) {
                clovers.push(L.supermap.cloverStyle({
                    radius: radius[i],
                    angle: styles[j].angle,
                    count: styles[j].count,
                    color: "rgba(0,166,0,1)",
                    fillColor: "rgba(0,200,0,0.6)",
                    fillOpacity: 1,
                    fill: true
                }));
            }
        }

        //设置每个点的经纬度和传入三叶草样式
        for (var i = 0; i < count; ++i) {
            var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
            graphics[i] = L.supermap.graphic({
                latLng: L.latLng(coordinates[0], coordinates[1]),
                style: clovers[Math.floor(Math.random() * randCount)].getStyle()
            });
            var pointVector = graphics[i];
            pointVector.style = {
                image: clovers[i % symbolCount]
            };
            graphics.push(pointVector)
        }

        //将三叶草要素风格画在地图上
        L.supermap.graphicLayer(graphics, {render: "canvas"}).addTo(map);
    }
</script>
</body>
</html>