vizLayer_cartoCSS_text.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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_cartoCSSText"></title>
  9. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  10. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  11. <style type="text/css">
  12. body {
  13. margin: 0;
  14. overflow: hidden;
  15. background: #fff;
  16. width: 100%;
  17. height: 100%
  18. }
  19. #map {
  20. position: absolute;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="map"></div>
  28. <script type="text" id="textData">
  29. #China___China{
  30. text-fill:#ff0000;
  31. text-face-name:"Serif";
  32. text-size:26;
  33. text-align:"center";
  34. text-vertical-alignment:"middle";
  35. }
  36. #World_Continent_txt___China{
  37. text-fill:#996699;
  38. text-face-name:"Sans-serif";
  39. text-size:25;
  40. text-align:"center";
  41. text-vertical-alignment:"middle";
  42. }
  43. #World_Ocean_txt___China{
  44. text-fill:#456789;
  45. text-face-name:"Monospace ";
  46. text-size:26;
  47. text-align:"center";
  48. text-vertical-alignment:"middle";
  49. }
  50. </script>
  51. <script>
  52. var map, layer, cartoCss, host = window.isLocal ? window.server : "https://iserver.supermap.io",
  53. url = host + "/iserver/services/map-china400/rest/maps/China";
  54. init();
  55. function init() {
  56. if (!document.createElement('canvas').getContext) {
  57. widgets.alert.showAlert(resources.msg_supportCanvas, false);
  58. return;
  59. }
  60. map = new SuperMap.Map("map", {
  61. controls: [
  62. new SuperMap.Control.ScaleLine(),
  63. new SuperMap.Control.Zoom(),
  64. new SuperMap.Control.MousePosition(),
  65. new SuperMap.Control.Navigation({
  66. dragPanOptions: {
  67. enableKinetic: true
  68. }
  69. })]
  70. });
  71. cartoCss = document.getElementById("textData").text;
  72. layer = new SuperMap.Layer.TiledVectorLayer("China", url, {
  73. cacheEnabled: true,
  74. returnAttributes: true
  75. }, {useLocalStorage: true, cartoCss: cartoCss});
  76. layer.events.on({"layerInitialized": addLayer});
  77. }
  78. function addLayer() {
  79. map.addLayers([layer]);
  80. var center = new SuperMap.LonLat(0, 3000000);
  81. map.setCenter(center, 2);
  82. }
  83. </script>
  84. </body>
  85. </html>