feat: 3d标记点支持textContent

packages/cw/cw_amap/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.0.8
+
+Associated Task: [#unknow](https://ddmkhcgpt.netease-official.lcap.163yun.com/dashboard/addWorkOrder?workOrderId=unknow)
+
+### ✨Features
+
+- [ba3ecdd](https://github.com/vusion/cloud-ui-materials/commit/ba3ecddfaf4e1791581e37068e7dfc111e178e03) Thanks [ncqwer](https://github.com/ncqwer) ! - 3d标记点支持textContent
+
 ## 1.0.7
 
 Associated Task: [#232](https://ddmkhcgpt.netease-official.lcap.163yun.com/dashboard/addWorkOrder?workOrderId=232)

packages/cw/cw_amap/components/cw-amap-point-marker-3-d/api.yaml

@@ -46,6 +46,16 @@
         brifeDoc: ''
         docDescription: 集合的元素类型中，用于标识子级字段的的属性，支持自定义变更
         tooltipLink: ''
+      - name: textContentField
+        title: 文本字段
+        type: string
+        display: property-select
+        default: textContent
+        description: 集合的元素类型中，用于标记点文本的属性。
+        group: 数据属性
+        brifeDoc: ''
+        docDescription: 集合的元素类型中，用于标识文本的的属性，支持自定义变更
+        tooltipLink: ''
       - name: center
         title: 地图中心点
         type: Array<number>

packages/cw/cw_amap/components/cw-amap-point-marker-3-d/docs/examples.md

@@ -9,6 +9,7 @@
             :center="center"
             :value.sync="id"
             idField="name"
+            textContentField="name"
         >
             <template #item="current">{{ current.item.name }}</template>
         </cw-amap-point-marker-3-d>
@@ -150,7 +151,7 @@ export default {
             id: null,
             realPoints: tmp.slice(0),
             totals: tmp,
-            center: [],
+            center: [116.59008979797363, 39.90058428630659],
         };
     },
     watch: {

packages/cw/cw_amap/components/cw-amap-point-marker-3-d/index.vue

@@ -65,8 +65,10 @@ import { createMapMarkerStore } from '../../utils/createMapMarkerStore';
 import supportDatasource from '../../mixins/support.datasource';
 import infoWindow from '../../mixins/infowindow';
 import mapPNG from '../../assets/map.png';
+import debounce from 'lodash.debounce';
 
-import { makeScatterLayerStore } from './makeZmarkerLayer';
+import { makeLayerStore } from './makeLayer';
+import get from 'lodash.get';
 
 export default {
     name: 'cw-amap-point-maker-3-d',
@@ -107,6 +109,13 @@ export default {
             return this.$env.VUE_APP_DESIGNER;
         },
     },
+    created() {
+        this.watchScaleFn = debounce(
+            this.watchScale.bind(this),
+            this.debounceTime === undefined ? 10 : this.debounceTime
+            // 1000
+        );
+    },
 
     mounted() {
         if (this.inDesigner) return;
@@ -143,6 +152,9 @@ export default {
             if (this.mapInstance && this.center.length === 2)
                 this.mapInstance.setCenter(this.center);
         },
+        scale() {
+            this.watchScaleFn();
+        },
     },
 
     methods: {
@@ -193,7 +205,7 @@ export default {
                         map,
                     });
 
-                    this.scatterLayerStore = makeScatterLayerStore(
+                    this.scatterLayerStore = makeLayerStore(
                         this.textureMap,
                         loca
                     );
@@ -225,6 +237,15 @@ export default {
                 this.geoDataSource.destroy();
             }
             const tmp = data.map((point) => {
+                Object.entries({
+                    id: this.idField,
+                    type: this.typeField,
+                    position: this.positionField,
+                    textContent: this.textContentField,
+                }).reduce((acc, [key, value]) => {
+                    acc[key] = get(point, value);
+                    return acc;
+                }, point);
                 return {
                     type: 'Feature',
                     geometry: {
@@ -256,6 +277,12 @@ export default {
                 this.mapInstance.setPitch(90);
             }
         },
+
+        watchScale() {
+            if (this.scatterLayerStore) {
+                this.scatterLayerStore.scale(this.scale);
+            }
+        },
     },
 };
 </script>

packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeZmarkerLayer.js → packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeLayer.js

@@ -1,4 +1,4 @@
-export function makeScatterLayerStore(textureMap, loca) {
+export function makeLayerStore(textureMap, loca) {
     const emptySource = new Loca.GeoJSONSource({
         data: {
             type: 'FeatureCollection',
@@ -9,11 +9,13 @@ export function makeScatterLayerStore(textureMap, loca) {
         makeScatterLayer(type, texture.top, loca, emptySource)
     );
     layers.unshift(makeZMarkerLayer(textureMap, loca, emptySource));
+    layers.unshift(makeZMarkerLayerForText(textureMap, loca, emptySource));
 
     return {
         updateGeo,
         queryFeature,
         destroy,
+        scale,
     };
 
     function updateGeo(...args) {
@@ -31,6 +33,10 @@ export function makeScatterLayerStore(textureMap, loca) {
     function destroy() {
         layers.forEach((layer) => layer.destroy());
     }
+
+    function scale(v) {
+        layers.forEach((layer) => layer.scale(v));
+    }
 }
 
 // scatterLayer不支持在texture属性上使用function映射，故有多少类型的点就要映射多少类型layer
@@ -57,6 +63,7 @@ function makeScatterLayer(type, texture, loca, emptySource) {
         updateGeo,
         queryFeature,
         destroy,
+        scale,
     };
 
     function updateGeo(geo) {
@@ -74,6 +81,20 @@ function makeScatterLayer(type, texture, loca, emptySource) {
         if (layer) layer.destroy();
         layer = null;
     }
+
+    function scale(scale) {
+        layer.setStyle({
+            size: function(i, feat) {
+                if (feat.properties.type === type)
+                    return [90 / scale, 90 / scale];
+                return [0, 0]; // 不符合的不显示
+            },
+            unit: 'meter',
+            duration: 2000,
+            animate: true,
+            texture: texture,
+        });
+    }
 }
 
 function makeZMarkerLayer(textureMap, loca, emptySource) {
@@ -85,7 +106,7 @@ function makeZMarkerLayer(textureMap, loca, emptySource) {
     layer.setSource(emptySource);
     layer.setStyle({
         content: (i, feat) => {
-            return `<div style="width: 120px; cursor: pointer; height: 120px; background: url(${
+            return `<div class="hsj" style="width: 120px; cursor: pointer; height: 120px; background: url(${
                 textureMap[feat.properties.type].bottom
             });"></div>`;
         },
@@ -108,6 +129,63 @@ function makeZMarkerLayer(textureMap, loca, emptySource) {
         updateGeo,
         queryFeature,
         destroy,
+        scale,
+    };
+
+    function updateGeo(geo) {
+        layer.setSource(geo);
+    }
+
+    function queryFeature(pos) {
+        const feature = layer.queryFeature(pos);
+        if (!feature) return null;
+        return feature;
+    }
+
+    function destroy() {
+        if (layer) layer.destroy();
+        layer = null;
+    }
+
+    function scale(scale) {
+        layer.setStyle({
+            size: [60 / scale, 60 / scale],
+            content: (i, feat) => {
+                return `<div class="hsj" style="width: 120px; cursor: pointer; height: 120px; background: url(${
+                    textureMap[feat.properties.type].bottom
+                });"></div>`;
+            },
+            unit: 'meter',
+            rotation: 0,
+            alwaysFront: true,
+            altitude: 15,
+        });
+    }
+}
+
+function makeZMarkerLayerForText(textureMap, loca, emptySource) {
+    let layer = new Loca.ZMarkerLayer({
+        zIndex: 120,
+        depth: false,
+        loca,
+    });
+    layer.setSource(emptySource);
+    layer.setStyle({
+        content: (i, feat) => {
+            const props = feat.properties;
+            return `<div style="width: 490px; height: 228px; padding: 0 0;"><p style="text-align:center; height:80px; line-height:80px;font-size:40px;border-radius: 15px; text-align:center; margin:0; padding:5px;">${props.textContent}</p></div>`;
+        },
+        unit: 'meter',
+        rotation: 0,
+        alwaysFront: true,
+        size: [250, 100],
+        altitude: 0,
+    });
+    return {
+        updateGeo,
+        queryFeature,
+        destroy,
+        scale,
     };
 
     function updateGeo(geo) {
@@ -124,4 +202,18 @@ function makeZMarkerLayer(textureMap, loca, emptySource) {
         if (layer) layer.destroy();
         layer = null;
     }
+
+    function scale(scale) {
+        layer.setStyle({
+            size: [250 / scale, 100 / scale],
+            content: (i, feat) => {
+                const props = feat.properties;
+                return `<div style="width: 490px; height: 228px; padding: 0 0;"><p style="text-align:center; height:80px; line-height:80px;font-size:40px;border-radius: 15px; text-align:center; margin:0; padding:5px;">${props.textContent}</p></div>`;
+            },
+            unit: 'meter',
+            rotation: 0,
+            alwaysFront: true,
+            altitude: 0,
+        });
+    }
 }

packages/cw/cw_amap/manifest

@@ -1,6 +1,6 @@
 Plugin-Version: 1.0.0
 Library-Type: Frontend
 Metadata-File: usage.json
-packages/extension/[email protected].7/dist-theme/demo.html: dist-theme/demo.html
-packages/extension/[email protected].7/dist-theme/index.js: dist-theme/index.js
-packages/extension/[email protected].7/dist-theme/index.js.map: dist-theme/index.js.map
+packages/extension/[email protected].8/dist-theme/demo.html: dist-theme/demo.html
+packages/extension/[email protected].8/dist-theme/index.js: dist-theme/index.js
+packages/extension/[email protected].8/dist-theme/index.js.map: dist-theme/index.js.map

packages/cw/cw_amap/mixins/infowindow.js

@@ -42,6 +42,7 @@ export default ({ listenMove = true, listenZoom = true } = {}) => ({
             infoWindowMarker: null,
             hiddenInfoWindow: false,
             viewMode: '3D',
+            scale: 1,
         };
     },
     created() {
@@ -68,6 +69,11 @@ export default ({ listenMove = true, listenZoom = true } = {}) => ({
                 else this.clearSelectedItem();
             });
             mapInstance.on('zoomchange', () => {
+                    'font-size:13px; background:pink; color:#bf2c9f;',
+                    this.mapInstance.getZoom()
+                );
+                const zoomLevel = this.mapInstance.getZoom();
+                this.scale = Math.pow(2, zoomLevel - 16.82);
                 if (listenZoom) debounceFn();
                 else this.clearSelectedItem();
             });
@@ -171,7 +177,7 @@ export default ({ listenMove = true, listenZoom = true } = {}) => ({
                 placement: this.placement || 'top',
                 middleware: [
                     //todo: 基于缩放等级，动态调整offset
-                    offset(60),
+                    offset(65),
                     shift(),
                     flip(),
                     // arrow({ element: this.$refs.infoWindowArrow }),