[example] 新增属性面板组件示例

SuperMap · Nov 6, 2024 · 3dceae6 · 3dceae6
1 parent 2581cd9
commit 3dceae6
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 0 deletions.
diff --git a/examples/component/components_attribute_panel_vue.html b/examples/component/components_attribute_panel_vue.html
@@ -0,0 +1,142 @@
+<!--********************************************************************
+* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
+*********************************************************************-->
+<!--********************************************************************
+* 该示例需要引入 
+* vue-iclient (https://github.com/SuperMap/vue-iclient)
+* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1/mapbox-gl-enhance.js)
+*********************************************************************-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title data-i18n="resources.title_componentsAttributePanel_Vue"></title>
+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
+  <style>
+    #main {
+      margin: 0 auto;
+      width: 100%;
+      height: 100%;
+    }
+
+    .sm-component-table-popup__table.sm-component-table-wrapper .sm-component-table-content {
+      max-height: 400px;
+      padding: 10px;
+    }
+
+    .panel-wrapper {
+      background: #fff;
+      box-shadow: -2px 0 8px rgb(0 0 0 / 15%);
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      width: 300px;
+      height: 400px;
+      border-radius: 4px;
+      z-index: 10000
+    }
+
+    .sm-component-table-placeholder {
+      border: none;
+    }
+
+  </style>
+</head>
+
+<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
+  <div id="main">
+    <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284" @load="mapLoad">
+    </sm-web-map>
+    <div class="panel-wrapper">
+      <sm-attribute-panel :attributes="attrbiutes" :columns="tableColumns">
+      </sm-attribute-panel>
+    </div>
+  </div>
+
+  <script>
+    new Vue({
+      el: '#main',
+      data() {
+        return {
+          attrbiutes: []
+        };
+      },
+      mounted() {
+        this.$message.info(resources.msg_clickLayerToPopup);
+      },
+      computed: {
+        tableColumns() {
+          return [{
+              dataIndex: 'attribute'
+            },
+            {
+              dataIndex: 'attributeValue'
+            }
+          ];
+        }
+      },
+      methods: {
+        mapLoad(obj) {
+          var vm = this;
+          vm.map = obj.map;
+          vm.map.on('click', function (e) {
+            var bbox = [
+              [e.point.x - 2, e.point.y - 2],
+              [e.point.x + 2, e.point.y + 2]
+            ];
+            var features = vm.map.queryRenderedFeatures(bbox);
+            if (features.length > 0) {
+              var matchFature = features[0];
+              vm.attrbiutes = Object.keys(matchFature.properties).map(function (prop) {
+                return {
+                  attribute: prop,
+                  attributeValue: matchFature.properties[prop]
+                }
+              });
+              vm.addHighlightLayer(matchFature);
+            } else {
+              vm.attrbiutes = [];
+              vm.removeHighlight();
+            }
+          });
+          vm.map.on('mousemove', '民航数据', function (e) {
+            vm.map.getCanvas().style.cursor = 'pointer';
+          });
+          vm.map.on('mouseout', '民航数据', function () {
+            vm.map.getCanvas().style.cursor = '';
+          })
+        },
+        addHighlightLayer(matchFature) {
+          this.removeHighlight();
+          var layer = matchFature.layer;
+          var properties = matchFature.properties;
+          var highlightLayer = Object.assign({}, layer, {
+            id: 'highlight',
+            type: 'circle',
+            paint: Object.assign({}, layer.paint, {
+              'circle-color': '#01ffff',
+              'circle-opacity': 0.6,
+              'circle-stroke-color': '#01ffff',
+              'circle-stroke-opacity': 1
+            }),
+            layout: Object.assign({}, {
+              visibility: 'visible'
+            }),
+            filter: ['all', ['==', 'index', properties.index]]
+          });
+          this.map.addLayer(highlightLayer);
+        },
+        removeHighlight() {
+          if (this.map.getLayer('highlight')) {
+            this.map.removeLayer('highlight');
+          }
+        }
+      }
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/examples/component/config.js b/examples/component/config.js
@@ -463,6 +463,14 @@ var exampleConfig = {
             localIgnore: true,
             thumbnail: 'components_video_plus_vue.png',
             fileName: 'components_video_plus_vue'
+          },
+          {
+            name: '属性面板组件',
+            name_en: 'Attribute Panel Component',
+            version: '11.3.0',
+            localIgnore: true,
+            thumbnail: 'components_attribute_panel_vue.png',
+            fileName: 'components_attribute_panel_vue'
           }
         ]
       },

diff --git a/examples/component/img/components_attribute_panel_vue.png b/examples/component/img/components_attribute_panel_vue.png
diff --git a/examples/locales/en-US/resources.js b/examples/locales/en-US/resources.js
@@ -681,6 +681,7 @@ window.examplesResources = {
         "title_componentsIdentify_Vue": 'Identify component(Vue)',
         "title_componentsPopup_Vue": 'Popup(Vue)',
         "title_componentsCoordinateConversion_Vue":"Coordinate Conversion(Vue)",
+        "title_componentsAttributePanel_Vue":"Attribute Panel component",
         "title_attributes_Vue":"Attributes(Vue)",
         "title_layerColor_Vue":"LayerColor(Vue)",
         "title_componentsLayerManager_vue": 'LayerManager component(Vue)',

diff --git a/examples/locales/zh-CN/resources.js b/examples/locales/zh-CN/resources.js
@@ -649,6 +649,7 @@ window.examplesResources = {
         "title_componentsLayerManager_vue": '图层管理组件',
         "title_componentsTimeLine_Vue": "时间轴组件",
         "title_componentsCoordinateConversion_Vue":"坐标转换组件",
+        "title_componentsAttributePanel_Vue":"属性面板组件",
         "title_attributes_Vue":"属性表组件",
         "title_layerColor_Vue":"图层颜色组件",
         "title_componentsTimeLineSupermap_Vue": "超图大厦历史影像",