vizLayer_cartoCSS_darkblueStyle.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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_darkblueStyle"></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="cartoCssStr">
  29. /*此处定义不同的颜色变量,在后面可以重复用这些颜色值*/
  30. @waterColor:rgb(2,16,25);
  31. @roadColora:rgb(18,117,142);
  32. @roadColorb:rgb(0,0,0);
  33. @railwayColora:rgb(0,0,0);
  34. @railwayColorb:rgb(0,0,0);
  35. @vegetationColor:rgb(2,16,25);
  36. @continentColor:rgb(8,48,75);
  37. @provinceLineColor:rgb(30,30,30);
  38. /*中国除外的其他国家的图层*/
  39. #World_Continent_pl___China{
  40. polygon-fill:@continentColor;
  41. line-width:1;
  42. line-color:@continentColor;
  43. }
  44. #China_Province_pl___China{
  45. polygon-fill:@continentColor;
  46. line-color:rgba(0,0,0,0);
  47. }
  48. #Arterial_Road_ln___China::one{
  49. line-color:@roadColora;
  50. line-width:2;}
  51. #Arterial_Road_ln___China::two{
  52. line-color:@roadColorb;
  53. line-width:1;}
  54. #Arterial_Road_ln___China___1::one{
  55. line-color:@roadColora;
  56. line-width:2;}
  57. #Arterial_Road_ln___China___1::two{
  58. line-color:@roadColorb;
  59. line-width:1;}
  60. #Arterial_Road_ln___China___1___1::one{
  61. line-color:@roadColora;
  62. line-width:2;}
  63. #Arterial_Road_ln___China___1___1::two{
  64. line-color:@roadColorb;
  65. line-width:1;}
  66. #Main_Road_L___China::one{
  67. line-color:@roadColora;
  68. line-width:2;}
  69. #Main_Road_L___China::two{
  70. line-color:@roadColorb;
  71. line-width:1;}
  72. #Main_Road_L___China___1::one{
  73. line-color:@roadColora;
  74. line-width:2;}
  75. #Main_Road_L___China___1::two{
  76. line-color:@roadColorb;
  77. line-width:1;}
  78. #Main_Road_L___China___1___1::a{
  79. line-color:@roadColora;
  80. line-width:2;}
  81. #Main_Road_L___China___1___1::b{
  82. line-color:@roadColorb;
  83. line-width:1;}
  84. #Hydside_Area_pl___Hydside{
  85. polygon-fill:@waterColor;
  86. line-color:@waterColor;
  87. }
  88. #China_Provinces_L___China400{
  89. line-dasharray:10,10;
  90. line-color:@provinceLineColor;
  91. line-width:1;
  92. }
  93. </script>
  94. <script>
  95. var map, layer, cartoCss,
  96. host = window.isLocal ? window.server : "https://iserver.supermap.io",
  97. url = host + "/iserver/services/map-china400/rest/maps/China";
  98. init();
  99. function init() {
  100. if (!document.createElement('canvas').getContext) {
  101. widgets.alert.showAlert(resources.msg_supportCanvas,false);
  102. return;
  103. }
  104. map = new SuperMap.Map("map", {
  105. controls: [
  106. new SuperMap.Control.ScaleLine(),
  107. new SuperMap.Control.Zoom(),
  108. new SuperMap.Control.MousePosition(),
  109. new SuperMap.Control.Navigation({
  110. dragPanOptions: {
  111. enableKinetic: true
  112. }
  113. })]
  114. });
  115. cartoCss = document.getElementById("cartoCssStr").text;
  116. layer = new SuperMap.Layer.TiledVectorLayer("China", url, {cacheEnabled: true}, {
  117. useLocalStorage: true,
  118. cartoCss: cartoCss,
  119. donotNeedServerCartoCss: true
  120. });
  121. layer.events.on({"layerInitialized": addLayer});
  122. }
  123. function addLayer() {
  124. map.addLayers([layer]);
  125. var center = new SuperMap.LonLat(12957388, 4853991);
  126. map.setCenter(center, 11);
  127. }
  128. </script>
  129. </body>
  130. </html>