From 84128fd2b0ca11a4c786e44ab5937370381804f7 Mon Sep 17 00:00:00 2001 From: ncqwer <1732031236@qq.com> Date: Tue, 30 Apr 2024 19:22:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=203d=E6=A0=87=E8=AE=B0=E7=82=B9=E6=94=AF?= =?UTF-8?q?=E6=8C=81textContent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/cw/cw_amap/CHANGELOG.md | 8 ++ .../cw-amap-point-marker-3-d/api.yaml | 10 ++ .../cw-amap-point-marker-3-d/docs/examples.md | 3 +- .../cw-amap-point-marker-3-d/index.vue | 31 +++++- .../{makeZmarkerLayer.js => makeLayer.js} | 96 ++++++++++++++++++- .../makeScatterLayerStore.js | 76 --------------- packages/cw/cw_amap/manifest | 6 +- packages/cw/cw_amap/mixins/infowindow.js | 8 +- packages/cw/cw_amap/package.json | 3 +- 9 files changed, 154 insertions(+), 87 deletions(-) rename packages/cw/cw_amap/components/cw-amap-point-marker-3-d/{makeZmarkerLayer.js => makeLayer.js} (50%) delete mode 100644 packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeScatterLayerStore.js diff --git a/packages/cw/cw_amap/CHANGELOG.md b/packages/cw/cw_amap/CHANGELOG.md index 21a1bb64..3149b689 100644 --- a/packages/cw/cw_amap/CHANGELOG.md +++ b/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) diff --git a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/api.yaml b/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/api.yaml index 6015f08f..266ea171 100644 --- a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/api.yaml +++ b/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 diff --git a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/docs/examples.md b/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/docs/examples.md index 04f7bcc9..5c09513d 100644 --- a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/docs/examples.md +++ b/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" > @@ -150,7 +151,7 @@ export default { id: null, realPoints: tmp.slice(0), totals: tmp, - center: [], + center: [116.59008979797363, 39.90058428630659], }; }, watch: { diff --git a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/index.vue b/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/index.vue index 8901137b..53d4eb1b 100644 --- a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/index.vue +++ b/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); + } + }, }, }; diff --git a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeZmarkerLayer.js b/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeLayer.js similarity index 50% rename from packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeZmarkerLayer.js rename to packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeLayer.js index e7bd44e9..3c1fab8f 100644 --- a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeZmarkerLayer.js +++ b/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 `
`; }, @@ -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 `
`; + }, + 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 `

${props.textContent}

`; + }, + 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 `

${props.textContent}

`; + }, + unit: 'meter', + rotation: 0, + alwaysFront: true, + altitude: 0, + }); + } } diff --git a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeScatterLayerStore.js b/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeScatterLayerStore.js deleted file mode 100644 index a5a6b1ae..00000000 --- a/packages/cw/cw_amap/components/cw-amap-point-marker-3-d/makeScatterLayerStore.js +++ /dev/null @@ -1,76 +0,0 @@ -export function makeScatterLayerStore(textureMap, loca) { - const emptySource = new Loca.GeoJSONSource({ - data: { - type: 'FeatureCollection', - features: [], - }, - }); - const layers = Object.entries(textureMap).map((vs) => - makeScatterLayer(...vs, loca, emptySource) - ); - - return { - updateGeo, - queryFeature, - destroy, - }; - - function updateGeo(...args) { - layers.forEach((layer) => layer.updateGeo(...args)); - } - - function queryFeature(pos) { - for (const layer of layers) { - const feature = layer.queryFeature(pos); - if (feature) return feature; - } - return null; - } - - function destroy() { - layers.forEach((layer) => layer.destroy()); - } -} - -// scatterLayer不支持在texture属性上使用function映射，故有多少类型的点就要映射多少类型layer -function makeScatterLayer(type, texture, loca, emptySource) { - let layer = new Loca.ScatterLayer({ - zIndex: 110, - altitude: 15, - opacity: 1, - loca, - }); - layer.setSource(emptySource); - layer.setStyle({ - unit: 'meter', - size: function(i, feat) { - if (feat.properties.type === type) return [90, 90]; - return [0, 0]; // 不符合的不显示 - }, - duration: 2000, - animate: true, - texture: texture, - }); - - return { - updateGeo, - queryFeature, - destroy, - }; - - function updateGeo(geo) { - layer.setSource(geo); - } - - function queryFeature(pos) { - const feature = layer.queryFeature(pos); - if (!feature) return null; - if (feature.properties.type !== type) return null; - return feature; - } - - function destroy() { - if (layer) layer.destroy(); - layer = null; - } -} diff --git a/packages/cw/cw_amap/manifest b/packages/cw/cw_amap/manifest index 4a76006a..847e87c6 100644 --- a/packages/cw/cw_amap/manifest +++ b/packages/cw/cw_amap/manifest @@ -1,6 +1,6 @@ Plugin-Version: 1.0.0 Library-Type: Frontend Metadata-File: usage.json -packages/extension/cw_amap@1.0.7/dist-theme/demo.html: dist-theme/demo.html -packages/extension/cw_amap@1.0.7/dist-theme/index.js: dist-theme/index.js -packages/extension/cw_amap@1.0.7/dist-theme/index.js.map: dist-theme/index.js.map \ No newline at end of file +packages/extension/cw_amap@1.0.8/dist-theme/demo.html: dist-theme/demo.html +packages/extension/cw_amap@1.0.8/dist-theme/index.js: dist-theme/index.js +packages/extension/cw_amap@1.0.8/dist-theme/index.js.map: dist-theme/index.js.map \ No newline at end of file diff --git a/packages/cw/cw_amap/mixins/infowindow.js b/packages/cw/cw_amap/mixins/infowindow.js index 43e2f2ab..60f8fc74 100644 --- a/packages/cw/cw_amap/mixins/infowindow.js +++ b/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 }), diff --git a/packages/cw/cw_amap/package.json b/packages/cw/cw_amap/package.json index 9dcc1ee0..db0f235f 100644 --- a/packages/cw/cw_amap/package.json +++ b/packages/cw/cw_amap/package.json @@ -2,7 +2,7 @@ "name": "cw_amap", "title": "高德地图组件", "description": "", - "version": "1.0.7", + "version": "1.0.8", "main": "./index.js", "author": "", "repository": "", @@ -52,7 +52,6 @@ "dependencies": { "@amap/amap-jsapi-loader": "^1.0.1", "@floating-ui/dom": "^1.5.4", - "lodash.debounce": "^4.0.8", "lodash.get": "^4.4.2", "lodash.merge": "^4.6.2" }