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


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>GTC2017</title>
    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,user-scalable=no"/>
    <script type="text/javascript" include="mapv" src="https://iclient.supermap.io/web/libs/gtc2017/dist/mbgl-include.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/web/libs/gtc2017/index.js"></script>
</head>
<body>
<div class="loader loader-curtain"></div>
<div id='map'></div>
<script>
    var iServerUrl = "https://iserver.supermap.io/iserver/services/map-city/rest/maps/city/tileFeature.mvt?_cache=false&returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}";

    var buildingLayer, heightField = "floor", ratio = 15, layerId = "buildings",
        center = [106.540545, 29.531714];

    var map = new mapboxgl.Map({
        container: 'map',
        style: mapboxgl.supermap.map.getDefaultVectorTileStyle(iServerUrl),
        pitch: 60,
        bearing: 290,
        center: center,
        zoom: 12
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    //加载进度
    map.on('styledata', function (evt) {
        showLoader();
    });
    //关闭进度
    map.on('render', function (evt) {
        evt.target.areTilesLoaded() && removeLoader();
    });

    map.on('load', function () {
        /*绿色风格*/
        mapboxgl.supermap.map.setBackground(map, "hsl(47, 26%, 88%)");
        mapboxgl.supermap.map.setPaintProperty(map, '水系多边形@city', 'fill', {'fill-color': 'hsl(205, 56%, 73%)'});
        mapboxgl.supermap.map.setPaintProperty(map, '植被_多边形_R@city', 'fill', {'fill-color': 'hsl(82, 46%, 72%)', 'fill-opacity': 0.4});
        mapboxgl.supermap.map.setPaintProperty(map, ['R_一级道路@city', 'R_二级道路@city'], 'line', {'line-color': '#fff', 'line-width': 2});
        mapboxgl.supermap.map.setPaintProperty(map, ['R_三级道路@city', 'R_四级道路@city'], 'line', {'line-color': 'hsl(0, 0%, 97%)', 'line-width': 1});

        /*切换蓝色风格*/
        mapboxgl.supermap.map.setBackground(map, "#042133");
        mapboxgl.supermap.map.setPaintProperty(map, '水系多边形@city', 'fill', {'fill-color': '#021019'});
        mapboxgl.supermap.map.setPaintProperty(map, '植被_多边形_R@city', 'fill', {'fill-color': '#021019', 'fill-opacity': 0.4});
        mapboxgl.supermap.map.setPaintProperty(map, ['R_一级道路@city', 'R_二级道路@city'], 'line', {'line-color': '#021019', 'line-width': 2});
        mapboxgl.supermap.map.setPaintProperty(map, ['R_三级道路@city', 'R_四级道路@city'], 'line', {'line-color': '#021019', 'line-width': 1});

        /*加载三维专题图*/
        buildingLayer = new mapboxgl.supermap.RankTheme3DLayer(layerId, map, {
            // 设置分段
            heightField: heightField,
            heightStops: [[1, 15], [40, 600]],
            colorStops: [
                [0, 'rgba(33, 41, 52, 0.8)'], [10, 'rgba(69,117,180, 0.7)'], [15, 'rgba(116,173,209, 0.7)'], [20, 'rgba(171,217,233, 0.7)'],
                [25, 'rgba(254,224,144,0.7)'], [30, 'rgba(253,174,97,0.7)'], [35, 'rgba(244,109,67,0.8)'], [40, 'rgba(215,48,39,0.8)']
            ],
            // 显示图例
            showLegend: true,
            legendTheme: 'dark',
            legendRatio: ratio,
            legendTitle: "高度"
        });
        buildingLayer.setData(buildings).show();

        /*加载O-D图*/
        var trafficEndPointLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getPoints(trafficPoints), {
            fillStyle: 'rgba(143,242,249,0.8)', shadowColor: 'rgba(65,105,225,1)', shadowBlur: 10, size: 3, draw: 'simple'
        });
        var trafficTimePointLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getCurveDynamicPoints(center, trafficPoints), {
            fillStyle: 'rgba(143,242,249,0.8)', globalCompositeOperation: "lighter", size: 2,
            animation: {type: 'time', stepsRange: {start: 0, end: 50}, trails: 10, duration: 5},
            draw: 'simple'
        });
        var trafficLineLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getCurveLines(center, trafficPoints), {
            strokeStyle: 'rgba(32,228,243, 0.8)', shadowColor: 'rgba(65,105,225, 0.8)', shadowBlur: 10, lineWidth: 1, draw: 'simple'
        });
        var trafficCenterLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getPoint(center), {
            fillStyle: 'rgba(192,16,26, 0.8)', shadowColor: 'rgba(192,16,26,1)', shadowBlur: 20, size: 6, draw: 'simple'
        });

        map.setMaxZoom(13.4)
    });
</script>
</body>
</html>