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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_mask"></title>

        <style type="text/css">
            .editPane {
                position: absolute;
                top: 50px;
                right: 50px;
                text-align: center;
                background: #fff;
                z-index: 1000;
            }
        </style>
    </head>
    <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
        <div class="panel panel-primary editPane" id="editPane" style="z-index: 99999">
            <div class="panel-heading">
                <h5 class="panel-title text-center" data-i18n="resources.btn_operate"></h5>
            </div>
            <div class="panel-body" id="params">
                <p></p>
                <div align="right" class="button-group">
                    <input
                        type="button"
                        id="btn1"
                        class="btn btn-primary"
                        data-i18n="[value]resources.text_input_value_addMask"
                        onclick="addMask()"
                    />
                    <input
                        type="button"
                        id="btn2"
                        class="btn btn-primary"
                        data-i18n="[value]resources.text_input_value_removeMask"
                        onclick="removeMask()"
                    />
                </div>
            </div>
        </div>
        <div id="map" style="width: 100%; height: 100%"></div>
        <script type="text/javascript" include="bootstrap,widgets" src="../js/include-web.js"></script>
        <script type="text/javascript" include="ol-mapbox-style" src="../../dist/ol/include-ol.js"></script>
        <script type="text/javascript">
            var map,
                sichuanFeature,
                vectorLayer,
                baseUrl =
                    (window.isLocal ? window.server : 'https://iserver.supermap.io') +
                    '/iserver/services/map-china400/rest/maps/China',
                url =
                    (window.isLocal ? window.server : 'https://iserver.supermap.io') +
                    '/iserver/services/map-Population/rest/maps/PopulationDistribution';
            map = new ol.Map({
                target: 'map',
                controls: ol.control
                    .defaults({ attributionOptions: { collapsed: false } })
                    .extend([new ol.supermap.control.Logo()]),
                view: new ol.View({
                    center: [11523496.18, 3735091.51],
                    zoom: 4,
                    multiWorld: true
                })
            });
            var layer = new ol.layer.Tile({
                source: new ol.source.TileSuperMapRest({
                    url: baseUrl,
                    wrapX: true
                })
            });
            map.addLayer(layer);
            var vectorLayer = new ol.layer.Tile({
                source: new ol.source.TileSuperMapRest({
                    url: url,
                    wrapX: true
                })
            });
            map.addLayer(vectorLayer);
            function addMask() {
                if (!sichuanFeature) {
                    widgets.loader.showLoader(resources.text_add_sicahun_plygon);
                    var param = new SuperMap.QueryBySQLParameters({
                        queryParams: {
                            name: 'China_Province_pl@China',
                            attributeFilter: 'SMID =14'
                        }
                    });
                    new ol.supermap.QueryService(baseUrl).queryBySQL(param, function (serviceResult) {
                        widgets.loader.removeLoader();
                        sichuanFeature = new ol.format.GeoJSON().readFeatures(
                            serviceResult.result.recordsets[0].features
                        )[0];
                        ol.supermap.Util.setMask(vectorLayer, sichuanFeature);
                    });
                    return;
                } else {
                    ol.supermap.Util.setMask(vectorLayer, sichuanFeature);
                }
            }
            function removeMask() {
                ol.supermap.Util.unsetMask(vectorLayer);
            }
        </script>
    </body>
</html>