vizLayer_cartoCSS_line.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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_cartoCSSLine"></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. @color:#111;
  30. #Railway_A___Road{
  31. line-color:@color;
  32. line-width:2;
  33. }
  34. #Railway_A___Road::one{
  35. line-dasharray:15,15;
  36. line-color:#DDDDDD;
  37. line-width:1.5;
  38. }
  39. </script>
  40. <script>
  41. var map, layer, cartoCss,
  42. host = window.isLocal ? window.server : "https://iserver.supermap.io",
  43. url = host + "/iserver/services/map-china400/rest/maps/China";
  44. init();
  45. function init() {
  46. if (!document.createElement('canvas').getContext) {
  47. widgets.alert.showAlert(resources.msg_supportCanvas, false);
  48. return;
  49. }
  50. map = new SuperMap.Map("map", {
  51. controls: [
  52. new SuperMap.Control.ScaleLine(),
  53. new SuperMap.Control.Zoom(),
  54. new SuperMap.Control.MousePosition(),
  55. new SuperMap.Control.Navigation({
  56. dragPanOptions: {
  57. enableKinetic: true
  58. }
  59. })]
  60. });
  61. cartoCss = document.getElementById("textData").text;
  62. layer = new SuperMap.Layer.TiledVectorLayer("China", url, {
  63. cacheEnabled: true,
  64. returnAttributes: true
  65. }, {useLocalStorage: true, cartoCss: cartoCss, donotNeedServerCartoCss: true});
  66. layer.events.on({"layerInitialized": addLayer});
  67. }
  68. function addLayer() {
  69. map.addLayers([layer]);
  70. var center = new SuperMap.LonLat(12957388, 4853991);
  71. map.setCenter(center, 11);
  72. }
  73. </script>
  74. </body>
  75. </html>