components_query_vue.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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_componentsQuery_Vue'></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  11. <style>
  12. #main {
  13. margin: 0 auto;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. .mapboxgl-ctrl button:not(:disabled):hover {
  18. background-color: #269ff0;
  19. }
  20. </style>
  21. </head>
  22. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  23. <div id="main">
  24. <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
  25. <!-- 查询组件: sm-query -->
  26. <!-- 支持的数据:rest-map rest-data iportal-data-->
  27. <sm-query :rest-data="restData" :rest-map="restMap" :collapsed="false"></sm-query>
  28. </sm-web-map>
  29. </div>
  30. <script>
  31. new Vue({
  32. el: '#main',
  33. data() {
  34. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  35. return {
  36. restData: [
  37. new SuperMap.Components.commontypes.RestDataParameter({
  38. url: host + "/iserver/services/data-world/rest/data",
  39. attributeFilter: "SmID>0",
  40. maxFeatures: 30,
  41. dataName: ["World:Countries"],
  42. })
  43. ],
  44. restMap: [
  45. new SuperMap.Components.commontypes.RestMapParameter({
  46. url: host + "/iserver/services/map-world/rest/maps/World",
  47. attributeFilter: "SmID>0",
  48. maxFeatures: 30,
  49. layerName: "Rivers@World",
  50. })
  51. ],
  52. }
  53. }
  54. })
  55. </script>
  56. </body>
  57. </html>