fuyuhang
/
Project_yhfu
镜像来自 http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
							<!--********************************************************************
* 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_mapVLayerHoneycomb"></title>
        <script type="text/javascript" src="../js/include-web.js"></script>
        <script type="text/javascript" include="mapv" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
        <div id="map"></div>
        <script type="text/javascript">
            var attribution =
                "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
                " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
                " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
                "<a href='https://mapv.baidu.com' target='_blank'>© 2018 百度 MapV</a>";
            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
            var tileURL =
                host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}';
            var map = new mapboxgl.Map({
                container: 'map',
                style: {
                    version: 8,
                    sources: {
                        'raster-tiles': {
                            attribution: attribution,
                            type: 'raster',
                            tiles: [tileURL],
                            tileSize: 256
                        }
                    },
                    layers: [
                        {
                            id: 'simple-tiles',
                            type: 'raster',
                            source: 'raster-tiles',
                            minzoom: 0,
                            maxzoom: 22
                        }
                    ]
                },
                center: [112, 37.94],
                zoom: 3
            });
            map.addControl(new mapboxgl.NavigationControl(), 'top-left');
            map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
            loadData();

            function loadData() {
                var randomCount = 1000;

                var data = [];

                var citys = [
                    '北京',
                    '天津',
                    '上海',
                    '重庆',
                    '石家庄',
                    '太原',
                    '呼和浩特',
                    '哈尔滨',
                    '长春',
                    '沈阳',
                    '济南',
                    '南京',
                    '合肥',
                    '杭州',
                    '南昌',
                    '福州',
                    '郑州',
                    '武汉',
                    '长沙',
                    '广州',
                    '南宁',
                    '西安',
                    '银川',
                    '兰州',
                    '西宁',
                    '乌鲁木齐',
                    '成都',
                    '贵阳',
                    '昆明',
                    '拉萨',
                    '海口'
                ];

                // 构造数据
                while (randomCount--) {
                    var cityCenter = mapv.utilCityCenter.getCenterByCityName(
                        citys[parseInt(Math.random() * citys.length)]
                    );
                    data.push({
                        geometry: {
                            type: 'Point',
                            coordinates: [
                                cityCenter.lng - 2 + Math.random() * 4,
                                cityCenter.lat - 2 + Math.random() * 4
                            ]
                        },
                        count: 30 * Math.random()
                    });
                }

                var dataSet = new mapv.DataSet(data);

                var options = {
                    fillStyle: 'rgba(55, 50, 250, 0.8)',
                    shadowColor: 'rgba(255, 250, 50, 1)',
                    shadowBlur: 20,
                    max: 100,
                    size: 50,
                    unit: 'px', // unit可选值['px', 'm']，默认值为'px'
                    label: {
                        show: true,
                        fillStyle: 'white'
                    },
                    globalAlpha: 0.5,
                    gradient: { 0.25: 'rgb(0,0,255)', 0.55: 'rgb(0,255,0)', 0.85: 'yellow', 1.0: 'rgb(255,0,0)' },
                    draw: 'honeycomb'
                };

                //创建MapV图层
                //mapboxgl.supermap.MapvLayer 构造函数的第一个 map 参数将在下个版本遗弃
                var mapVLayer = new mapboxgl.supermap.MapvLayer('', dataSet, options);
                map.addLayer(mapVLayer);
            }
        </script>
    </body>
</html>