From a5773f08acfd3f61afc6022a2534ad4afd17864e Mon Sep 17 00:00:00 2001 From: yanxj0 <291730498@qq.com> Date: Thu, 28 Nov 2024 14:32:00 +0000 Subject: [PATCH 1/2] =?UTF-8?q?feat(primitive-geojson):=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E7=82=B9=E5=9B=BE=E6=A0=87=E5=86=85=E5=AE=B9=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/GeoJsonLayer-util.ts | 136 +++++++++++------- packages/primitive-geojson/src/typings.ts | 1 + 2 files changed, 85 insertions(+), 52 deletions(-) diff --git a/packages/primitive-geojson/src/GeoJsonLayer-util.ts b/packages/primitive-geojson/src/GeoJsonLayer-util.ts index d754b54..998144e 100644 --- a/packages/primitive-geojson/src/GeoJsonLayer-util.ts +++ b/packages/primitive-geojson/src/GeoJsonLayer-util.ts @@ -140,66 +140,98 @@ export function createPoint( const symbol = options.markerSymbol; const color = options.markerColor; const size = options.markerSize; + const isCustom = options.customMarker; const properties = geoJson.properties ?? {}; - geoJsonLayer.addPoint({ - type: 'Point', - position: crsFunction(coordinates), - style: { - color: color, - pixelSize: size, - outlineColor: options.stroke, - outlineWidth: options.strokeWidth, - }, - properties, - }); - - /** add billboard */ - if (!symbol) return; - let canvasOrPromise; - if (symbol !== '' && defined(symbol)) { - if (symbol.length === 1) { - canvasOrPromise = geoJsonLayer.pinBuilder.fromText( - symbol.toUpperCase(), - color, - size, - ); + if (!symbol) { + geoJsonLayer.addPoint({ + type: 'Point', + position: crsFunction(coordinates), + style: { + color: color, + pixelSize: size, + outlineColor: options.stroke, + outlineWidth: options.strokeWidth, + }, + properties, + }); + } else { + /** add billboard */ + let canvasOrPromise; + if (symbol !== '' && defined(symbol)) { + if (isCustom) { + canvasOrPromise = processImage(symbol, size, properties); + } else { + if (symbol.length === 1) { + canvasOrPromise = geoJsonLayer.pinBuilder.fromText( + symbol.toUpperCase(), + color, + size, + ); + } else { + canvasOrPromise = geoJsonLayer.pinBuilder.fromMakiIconId( + symbol, + color, + size, + ); + } + } } else { - canvasOrPromise = geoJsonLayer.pinBuilder.fromMakiIconId( - symbol, - color, - size, - ); + canvasOrPromise = geoJsonLayer.pinBuilder.fromColor(color, size); } - } else { - canvasOrPromise = geoJsonLayer.pinBuilder.fromColor(color, size); - } - - const billboard = geoJsonLayer.addBillboard({ - type: 'Billboard', - position: crsFunction(coordinates), - style: { - verticalOrigin: VerticalOrigin.BOTTOM, - heightReference: - coordinates.length === 2 && options.clampToGround - ? HeightReference.CLAMP_TO_GROUND - : undefined, - }, - properties, - }); - const promise = Promise.resolve(canvasOrPromise) - .then(function (image) { - // @ts-ignore - billboard.image = image; - }) - .catch(function () { - // @ts-ignore - billboard.image = geoJsonLayer.pinBuilder.fromColor(color, size); + const billboard = geoJsonLayer.addBillboard({ + type: 'Billboard', + position: crsFunction(coordinates), + style: { + verticalOrigin: VerticalOrigin.BOTTOM, + heightReference: + coordinates.length === 2 && options.clampToGround + ? HeightReference.CLAMP_TO_GROUND + : undefined, + }, + properties, }); - geoJsonLayer._promises.push(promise); + const promise = Promise.resolve(canvasOrPromise) + .then(function (image) { + image instanceof Promise ? image.then(i => { + billboard.image = i; + }) : (billboard.image = image) + // @ts-ignore + billboard.image = image; + }) + .catch(function () { + // @ts-ignore + billboard.image = geoJsonLayer.pinBuilder.fromColor(color, size); + }); + + geoJsonLayer._promises.push(promise); + + } +} + +function processImage(url: string | ((arg0: any) => string), size: number, properties: any) { + let height = size; + let width = size; + if (Array.isArray(size)) { + height = size[0]; + width = size[1]; + } + return new Promise((resolve) => { + let canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + const ctx = canvas.getContext('2d'); + let img = new Image(); + img.onload = () => { + ctx?.drawImage(img, 0, 0, width, height); + resolve(canvas); + } + img.src = url instanceof Function ? url(properties) : url; + }) + } export function processPoint( diff --git a/packages/primitive-geojson/src/typings.ts b/packages/primitive-geojson/src/typings.ts index 3f45e3f..55f92b0 100644 --- a/packages/primitive-geojson/src/typings.ts +++ b/packages/primitive-geojson/src/typings.ts @@ -27,6 +27,7 @@ export type GeoJsonPrimitiveLayerOptions = { clampToGround: boolean; credit?: Credit | string; depthTest?: boolean; + customMarker?: boolean; }; export type PrimitiveItem = From 2d64335fa4ff311787b35410982fad7ecf8ee804 Mon Sep 17 00:00:00 2001 From: yanxj0 <291730498@qq.com> Date: Sun, 1 Dec 2024 10:28:54 +0000 Subject: [PATCH 2/2] =?UTF-8?q?fix(gsojson-primitive):=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=B0=BA=E5=AF=B8=E5=85=A5=E5=8F=82=E4=B8=BA?= =?UTF-8?q?=E6=95=B0=E7=BB=84=E7=9A=84=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/primitive-geojson/src/GeoJsonLayer-util.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/primitive-geojson/src/GeoJsonLayer-util.ts b/packages/primitive-geojson/src/GeoJsonLayer-util.ts index 998144e..e90c033 100644 --- a/packages/primitive-geojson/src/GeoJsonLayer-util.ts +++ b/packages/primitive-geojson/src/GeoJsonLayer-util.ts @@ -160,6 +160,7 @@ export function createPoint( /** add billboard */ let canvasOrPromise; if (symbol !== '' && defined(symbol)) { + // 自定义图片 if (isCustom) { canvasOrPromise = processImage(symbol, size, properties); } else { @@ -208,16 +209,18 @@ export function createPoint( }); geoJsonLayer._promises.push(promise); - } } -function processImage(url: string | ((arg0: any) => string), size: number, properties: any) { - let height = size; - let width = size; +function processImage(url: string | ((arg0: any) => string), size: number | number[], properties: any) { + let height = 24; + let width = 24; if (Array.isArray(size)) { height = size[0]; width = size[1]; + }else{ + height = size; + width = size; } return new Promise((resolve) => { let canvas = document.createElement('canvas');