components_fire_layer_vue.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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_componentsFireLayer_Vue"></title>
  9. <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
  10. <script
  11. type="text/javascript"
  12. include="three,mapbox-gl-enhance,iclient-mapboxgl-vue,mapbox-gl-enhance"
  13. src="../../dist/mapboxgl/include-mapboxgl.js"
  14. ></script>
  15. <style>
  16. #main {
  17. margin: 0 auto;
  18. width: 100%;
  19. height: 100%;
  20. }
  21. </style>
  22. </head>
  23. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  24. <div id="main">
  25. <sm-web-map :map-options="mapOptions" style="background:black">
  26. <sm-fire-layer :features="features" :model-scale="5.41843220338983e-6"></sm-fire-layer>
  27. </sm-web-map>
  28. </div>
  29. <script>
  30. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  31. $.get("../data/fire.json", function(features) {
  32. var features = features;
  33. new Vue({
  34. el: "#main",
  35. data() {
  36. var mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
  37. var attribution =
  38. "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  39. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  40. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  41. return {
  42. mapOptions: {
  43. container: "map",
  44. style: {
  45. version: 8,
  46. sources: {
  47. "raster-tiles": {
  48. attribution: attribution,
  49. type: "raster",
  50. tiles: [mapUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
  51. tileSize: 256
  52. },
  53. buildings: {
  54. type: "geojson",
  55. data: "https://iclient.supermap.io/examples/data/buildings.json"
  56. }
  57. },
  58. layers: [
  59. {
  60. id: "simple-tiles",
  61. type: "raster",
  62. source: "raster-tiles",
  63. minzoom: 0,
  64. maxzoom: 22
  65. },
  66. {
  67. id: "3d-buildings",
  68. source: "buildings",
  69. type: "fill-extrusion",
  70. paint: {
  71. "fill-extrusion-color": [
  72. "case",
  73. ["<", ["get", "height"], 2],
  74. "#fbb03b",
  75. ["<", ["get", "height"], 4],
  76. "#223b53",
  77. ["<", ["get", "height"], 8],
  78. "#15D1F2",
  79. ["<", ["get", "height"], 16],
  80. "#15D1F2",
  81. "#3bb2d0"
  82. ],
  83. "fill-extrusion-height": ["*", ["get", "height"], 5],
  84. "fill-extrusion-opacity": 0.6
  85. }
  86. }
  87. ]
  88. },
  89. center: [116.45423056455218, 39.91980158816503],
  90. zoom: 14.27415578362124,
  91. bearing: 0.8568,
  92. pitch: 60
  93. },
  94. features: features
  95. };
  96. }
  97. });
  98. });
  99. </script>
  100. </body>
  101. </html>