03_themeGraduatedSymbol.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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.text_graduatedSymbol"></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-china400/rest/maps/China";
  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: [12406035, 4304933],
  26. zoom: 4,
  27. projection: "EPSG:3857",
  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 themeGraduatedSymbol = new SuperMap.ThemeGraduatedSymbol({
  40. expression: "SMAREA",
  41. baseValue: 3000000000000,
  42. graduatedMode: SuperMap.GraduatedMode.CONSTANT,
  43. style: new SuperMap.ThemeGraduatedSymbolStyle({
  44. positiveStyle: new SuperMap.ServerStyle({
  45. markerSize: 50,
  46. markerSymbolID: 0,
  47. lineColor: new SuperMap.ServerColor(255, 165, 0),
  48. fillBackColor: new SuperMap.ServerColor(255, 0, 0)
  49. })
  50. })
  51. });
  52. var themeParameters = new SuperMap.ThemeParameters({
  53. themes: [themeGraduatedSymbol],
  54. datasetNames: ["China_Province_pg"],
  55. dataSourceNames: ["China"]
  56. });
  57. new ol.supermap.ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
  58. var result = serviceResult.result;
  59. if (result && result.newResourceID) {
  60. themeLayer = new ol.layer.Tile({
  61. source: new ol.source.TileSuperMapRest({
  62. url: url,
  63. noWrap: true,
  64. cacheEnabled: false,
  65. transparent: true,
  66. layersID: result.newResourceID,
  67. transparent: true
  68. })
  69. });
  70. map.addLayer(themeLayer);
  71. }
  72. });
  73. }
  74. </script>
  75. </body>
  76. </html>