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


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<html>
<head>
    <meta charset='utf-8'/>
    <title data-i18n="resources.title_changeStyle"></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #menu {
            position: absolute;
            z-index: 2;
            padding: 6px 0 6px 10px;
            margin-right: 20px;
            left: 60px;
            top: 10px;
            float: left;
            border-radius: 4px;
            -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: #fff;

        }

        label {
            margin: 0;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id='map'></div>
<div id='menu' class="mapboxgl-ctrl">
    <input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'>
    <label for='basic' data-i18n="resources.text_vectorDefaultStyle"></label>
    <input id='dark' type='radio' name='rtoggle' value='dark'>
    <label for='dark' data-i18n="resources.text_darkBlueStyle"></label>
    <input id='fiordcolor' type='radio' name='rtoggle' value='fiordcolor'>
    <label for='fiordcolor' data-i18n="resources.text_fiordStyle"></label>
    <input id='klokantech' type='radio' name='rtoggle' value='klokantech'>
    <label for='klokantech' data-i18n="resources.text_klokantechStyle"></label>
    <input id='osm' type='radio' name='rtoggle' value='OSM'>
    <label for='osm' data-i18n="resources.text_osmStyle"></label>
    <input id='positron' type='radio' name='rtoggle' value='positron'>
    <label for='positron' data-i18n="resources.text_positronStyle"></label>
</div>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" include='bootstrap-css' src="../js/include-web.js"></script>
<script type="text/javascript" exclude='iclient-mapboxgl' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script type="text/javascript">
    var currentLayerGroupId = "basic";
    var defaultStyle = mapStyles[currentLayerGroupId].style;
    var map = new mapboxgl.Map({
        container: 'map',
        style: defaultStyle,
        center: [116.4, 39.9],
        minZoom: 10,
        zoom: 11
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchStyle;
    }

    function switchStyle(layer) {
        var layerGroupId = layer.target.id;
        if (!layerGroupId || !(mapStyles[layerGroupId]) || layerGroupId === currentLayerGroupId) {
            return;
        }
        map.setStyle(mapStyles[layerGroupId].style, {diff: false});
        currentLayerGroupId = layerGroupId;
    }

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