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>
|