03_themeDotDensity.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_themeDotDensity"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
  11. </head>
  12. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
  13. <div id="map" style="width: 100%;height:100%"></div>
  14. <script type="text/javascript">
  15. var map, themeLayer, options,
  16. url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-world/rest/maps/World";
  17. var mapService = new ol.supermap.MapService(url);
  18. mapService.getMapInfo(function (serviceResult) {
  19. var mapJSONObj = serviceResult.result;
  20. map = new ol.Map({
  21. target: 'map',
  22. controls: ol.control.defaults({attributionOptions: {collapsed: false}})
  23. .extend([new ol.supermap.control.Logo()]),
  24. view: new ol.View({
  25. center: [0, 0],
  26. zoom: 2,
  27. projection: "EPSG:4326",
  28. multiWorld: true
  29. })
  30. });
  31. options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
  32. var layer = new ol.layer.Tile({
  33. source: new ol.source.TileSuperMapRest(options)
  34. });
  35. map.addLayer(layer);
  36. createTheme();
  37. });
  38. function createTheme() {
  39. var themeDotDensity = new SuperMap.ThemeDotDensity({
  40. dotExpression: "Pop_1994",
  41. value: 5000000,
  42. style: new SuperMap.ServerStyle({
  43. markerSize: 3,
  44. markerSymbolID: 12
  45. })
  46. });
  47. var themeParameters = new SuperMap.ThemeParameters({
  48. themes: [themeDotDensity],
  49. datasetNames: ["Countries"],
  50. dataSourceNames: ["World"]
  51. });
  52. new ol.supermap.ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
  53. var result = serviceResult.result;
  54. if (result && result.newResourceID) {
  55. themeLayer = new ol.layer.Tile({
  56. source: new ol.source.TileSuperMapRest({
  57. url: url,
  58. noWrap: true,
  59. cacheEnabled: false,
  60. transparent: true,
  61. layersID: result.newResourceID,
  62. transparent: true
  63. })
  64. });
  65. map.addLayer(themeLayer);
  66. }
  67. })
  68. }
  69. </script>
  70. </body>
  71. </html>