123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title data-i18n="resources.title_getGridCellInfos"></title>
- <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
- <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
- <style>
- .ol-popup {
- position: absolute;
- background-color: white;
- -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
- filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
- padding: 15px;
- border-radius: 10px;
- border: 1px solid #cccccc;
- bottom: 12px;
- left: -50px;
- min-width: 280px;
- }
- .ol-popup:after, .ol-popup:before {
- top: 100%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
- .ol-popup:after {
- border-top-color: white;
- border-width: 10px;
- left: 48px;
- margin-left: -10px;
- }
- .ol-popup:before {
- border-top-color: #cccccc;
- border-width: 11px;
- left: 48px;
- margin-left: -11px;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
- <div id="map" style="width: 100%;height:100%"></div>
- <div id="popup" class="ol-popup">
- <div id="popup-content"></div>
- </div>
- <script type="text/javascript">
- var container = document.getElementById('popup');
- var content = document.getElementById('popup-content');
- var overlay = new ol.Overlay(({
- element: container,
- autoPan: true,
- autoPanAnimation: {
- duration: 250
- }
- }));
- var map, baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/世界地图_Day",
- url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
- map = new ol.Map({
- target: 'map',
- controls: ol.control.defaults({attributionOptions: {collapsed: false}})
- .extend([new ol.supermap.control.Logo()]),
- view: new ol.View({
- center: [0, 0],
- zoom: 3,
- projection: 'EPSG:4326',
- multiWorld: true
- }),
- overlays: [overlay]
- });
- var layer = new ol.layer.Tile({
- source: new ol.source.TileSuperMapRest({
- url: baseUrl
- }),
- projection: 'EPSG:4326'
- });
- map.addLayer(layer);
- map.on("click", function (evt) {
- var x = evt.coordinate[0];
- var y = evt.coordinate[1];
- if (x < -180.0 || x > 180.0 || y < -90 || y > 90) {
- return;
- }
- var getGridCellInfosParam = new SuperMap.GetGridCellInfosParameters({
- dataSourceName: "World",
- datasetName: "WorldEarth",
- X: x,
- Y: y
- });
- new ol.supermap.GridCellInfosService(url).getGridCellInfos(getGridCellInfosParam, function (serviceResult) {
- if (!serviceResult.result) {
- return;
- }
- var result = serviceResult.result;
- var innerHTML = resources.text_gridQueryResult + "<br>" + "column: " + result.column + "<br>";
- innerHTML += "row: " + result.row + "<br>";
- innerHTML += "value: " + result.value + "<br>";
- content.innerHTML = innerHTML;
- overlay.setPosition([evt.coordinate[0], evt.coordinate[1]]);
- });
- });
- </script>
- </body>
- </html>
|