fix: 小程序场景增加scene 增加开关

This commit is contained in:
lzxue 2022-12-20 15:37:56 +08:00
parent c5894c9659
commit 6242f3c0ff
7 changed files with 96 additions and 2 deletions

View File

@ -0,0 +1,79 @@
// @ts-ignore
import { PointLayer, Scene,Popup } from '@antv/l7';
// @ts-ignore
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
// @ts-ignore
useEffect( async () => {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
);
let shapeType = '01'
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [121.4, 31.258134],
zoom: 14,
pitch: 0,
style: 'normal',
doubleClickZoom:false,
}),
});
scene.addImage(
'00',
'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ',
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg',
);
const data = await response.json();
const newData = data.map((item: any) => {
item.type = ['00', '01', '02'][Math.floor(Math.random() * 3)];
return item;
});
const imageLayer = new PointLayer({
autoFit:false
})
.source(newData, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('type', (v: any) => {
return shapeType;
})
.active(false)
.size(20);
scene.addLayer(imageLayer);
setTimeout(()=>{
shapeType = '02';
// imageLayer.shape('type', (v: any) => {
// console.log(1111,shapeType)
// return shapeType;
// })
imageLayer.shape('02');
// scene.render()
},2000)
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

View File

@ -0,0 +1,2 @@
### Point - Shape
<code src="./demos/shape.tsx"></code>

View File

@ -16,6 +16,7 @@ const defaultSceneConfig: Partial<ISceneConfig & IRenderConfig> = {
logoVisible: true, logoVisible: true,
antialias: true, antialias: true,
stencil: true, stencil: true,
isMini: false,
preserveDrawingBuffer: false, preserveDrawingBuffer: false,
pickBufferScale: 1.0, pickBufferScale: 1.0,
fitBoundsOptions: { fitBoundsOptions: {

View File

@ -11,6 +11,7 @@ export interface ISceneConfig extends IRenderConfig {
map: IMapWrapper; map: IMapWrapper;
logoPosition?: PositionName; logoPosition?: PositionName;
logoVisible?: boolean; logoVisible?: boolean;
isMini?: boolean; // 是否是小程序场景
animate?: boolean; animate?: boolean;
fitBoundsOptions?: unknown; fitBoundsOptions?: unknown;
pickBufferScale?: number; pickBufferScale?: number;

View File

@ -32,7 +32,7 @@ import {
} from '@antv/l7-core'; } from '@antv/l7-core';
import { MaskLayer } from '@antv/l7-layers'; import { MaskLayer } from '@antv/l7-layers';
import { ReglRendererService } from '@antv/l7-renderer'; import { ReglRendererService } from '@antv/l7-renderer';
import { DOM, isMini } from '@antv/l7-utils'; import { DOM, isMini, setMiniScene } from '@antv/l7-utils';
import { Container } from 'inversify'; import { Container } from 'inversify';
import BoxSelect, { BoxSelectEventList } from './boxSelect'; import BoxSelect, { BoxSelectEventList } from './boxSelect';
import ILayerManager from './ILayerManager'; import ILayerManager from './ILayerManager';
@ -99,6 +99,7 @@ class Scene
); );
this.popupService = sceneContainer.get<IPopupService>(TYPES.IPopupService); this.popupService = sceneContainer.get<IPopupService>(TYPES.IPopupService);
this.boxSelect = new BoxSelect(this, {}); this.boxSelect = new BoxSelect(this, {});
setMiniScene(config?.isMini|| false);
if (isMini) { if (isMini) {
this.sceneService.initMiniScene(config); this.sceneService.initMiniScene(config);

View File

@ -91,6 +91,11 @@ const scene = new L7.Scene({
是否保留缓冲区数据 `boolean` `false` 是否保留缓冲区数据 `boolean` `false`
### isMini
<description> _boolean_ **可选** _default: false_ </description>
是否小程序模式 `boolean` `false`,目前仅支持支付宝
## Layer 方法 ## Layer 方法
### addLayer(layer): void 增加图层对象 ### addLayer(layer): void 增加图层对象

View File

@ -29,6 +29,11 @@ import { $XMLHttpRequest as $XMLHttpRequest2 } from './XMLHttpRequest';
import { globalWindow, l7globalThis } from './global'; import { globalWindow, l7globalThis } from './global';
export let isMiniScene = false;
export function setMiniScene(flag: boolean) {
isMiniScene = flag;
}
// 判断时候是支付宝小程序环境 my.isFRM == true smallfish H5+ // 判断时候是支付宝小程序环境 my.isFRM == true smallfish H5+
export const isMiniAli = export const isMiniAli =
// @ts-ignore // @ts-ignore
@ -42,7 +47,7 @@ export const isWeChatMiniProgram =
wx !== null && wx !== null &&
(typeof wx.request !== 'undefined' || typeof wx.miniProgram !== 'undefined'); (typeof wx.request !== 'undefined' || typeof wx.miniProgram !== 'undefined');
export const isMini = isMiniAli || isWeChatMiniProgram; export const isMini = (isMiniAli || isWeChatMiniProgram) && isMiniScene;
export const miniWindow = { export const miniWindow = {
atob, atob,