diff --git a/packages/component/src/popup.ts b/packages/component/src/popup.ts index 08db3b0018..f6d50620c9 100644 --- a/packages/component/src/popup.ts +++ b/packages/component/src/popup.ts @@ -177,6 +177,7 @@ export default class Popup extends EventEmitter implements IPopup { offsets: [0, 0], anchor: anchorType.BOTTOM, className: '', + stopPropagation: true, }; } @@ -208,11 +209,14 @@ export default class Popup extends EventEmitter implements IPopup { .split(' ') .forEach((name) => this.container.classList.add(name)); } - ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => { - this.container.addEventListener(type, (e) => { - e.stopPropagation(); + + if (this.popupOption.stopPropagation) { + ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => { + this.container.addEventListener(type, (e) => { + e.stopPropagation(); + }); }); - }); + } } if (maxWidth && this.container.style.maxWidth !== maxWidth) { this.container.style.maxWidth = maxWidth; diff --git a/packages/core/src/services/component/IPopupService.ts b/packages/core/src/services/component/IPopupService.ts index b3b76996f8..c89ac44a36 100644 --- a/packages/core/src/services/component/IPopupService.ts +++ b/packages/core/src/services/component/IPopupService.ts @@ -9,6 +9,7 @@ export interface IPopupOption { anchor: anchorType[any]; className: string; offsets: number[]; + stopPropagation: boolean; } export interface IPopup { addTo(scene: Container): this; diff --git a/packages/core/src/services/layer/StyleAttributeService.ts b/packages/core/src/services/layer/StyleAttributeService.ts index ca404befab..e533b19a61 100644 --- a/packages/core/src/services/layer/StyleAttributeService.ts +++ b/packages/core/src/services/layer/StyleAttributeService.ts @@ -308,7 +308,7 @@ export default class StyleAttributeService implements IStyleAttributeService { } }); - this.attributesAndIndices.elements.destroy(); + this.attributesAndIndices?.elements.destroy(); this.attributes = []; } } diff --git a/packages/core/src/services/renderer/ITexture2D.ts b/packages/core/src/services/renderer/ITexture2D.ts index ff6eaca325..3c4cb7d3bf 100644 --- a/packages/core/src/services/renderer/ITexture2D.ts +++ b/packages/core/src/services/renderer/ITexture2D.ts @@ -80,7 +80,8 @@ export interface ITexture2DInitializationOptions { export interface ITexture2D { get(): unknown; - update(): void; + update(options: any): void; + bind(): void; resize(options: { width: number; height: number }): void; /** diff --git a/packages/l7/demo/image.html b/packages/l7/demo/image.html new file mode 100644 index 0000000000..2f7cf40075 --- /dev/null +++ b/packages/l7/demo/image.html @@ -0,0 +1,85 @@ + + + + + L7 IE + + + + +
+ + + + + + + + diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts index 5a26e3e98f..5f878940a2 100644 --- a/packages/layers/src/point/models/image.ts +++ b/packages/layers/src/point/models/image.ts @@ -21,7 +21,7 @@ export default class ImageModel extends BaseModel { public getUninforms(): IModelUniform { const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions; if (this.rendererService.getDirty()) { - this.texture.update(); + this.texture.bind(); } return { u_opacity: opacity || 1.0, @@ -112,7 +112,11 @@ export default class ImageModel extends BaseModel { private updateTexture = () => { const { createTexture2D } = this.rendererService; if (this.texture) { - this.texture.destroy(); + this.texture.update({ + data: this.iconService.getCanvas(), + }); + this.layer.render(); + return; } this.texture = createTexture2D({ data: this.iconService.getCanvas(), @@ -121,6 +125,5 @@ export default class ImageModel extends BaseModel { width: 1024, height: this.iconService.canvasHeight || 128, }); - this.layer.render(); }; } diff --git a/packages/react/src/component/Popup.tsx b/packages/react/src/component/Popup.tsx index 8e46083ebf..1fcc3795c1 100644 --- a/packages/react/src/component/Popup.tsx +++ b/packages/react/src/component/Popup.tsx @@ -25,7 +25,10 @@ export default class PopupComponet extends React.PureComponent { } public componentDidMount() { const { lnglat, children, option } = this.props; - const p = new Popup(option); + const p = new Popup({ + stopPropagation: false, + ...option, + }); if (lnglat) { p.setLnglat(lnglat); diff --git a/packages/renderer/src/regl/ReglTexture2D.ts b/packages/renderer/src/regl/ReglTexture2D.ts index 8797dbbc8f..93af3b76d2 100644 --- a/packages/renderer/src/regl/ReglTexture2D.ts +++ b/packages/renderer/src/regl/ReglTexture2D.ts @@ -73,7 +73,11 @@ export default class ReglTexture2D implements ITexture2D { public get() { return this.texture; } - public update() { + public update(props: regl.Texture2DOptions = {}) { + this.texture(props); + } + + public bind() { // @ts-ignore this.texture._texture.bind(); } diff --git a/stories/3D_Model/Components/threeRender.tsx b/stories/3D_Model/Components/threeRender.tsx index 5b1521ba04..43f7cce41f 100644 --- a/stories/3D_Model/Components/threeRender.tsx +++ b/stories/3D_Model/Components/threeRender.tsx @@ -58,9 +58,9 @@ export default class GlTFThreeJSDemo extends React.Component { y: 'latitude', }, }) - .shape('name', ['00', '01', '02']) - // .shape('triangle') - // .color('red') + // .shape('name', ['00', '01', '02']) + .shape('triangle') + .color('red') .active(true) .size(20); scene.addLayer(imageLayer); diff --git a/stories/Components/components/Marker.tsx b/stories/Components/components/Marker.tsx index 250d73a5c7..0ae7a3a898 100644 --- a/stories/Components/components/Marker.tsx +++ b/stories/Components/components/Marker.tsx @@ -27,7 +27,7 @@ export default class MarkerComponent extends React.Component { const popup = new Popup({ offsets: [0, 20], - }).setText('hello'); + }).setHTML('

11111

'); const marker = new Marker({ offsets: [0, -20], diff --git a/stories/Layers/components/Point3D.tsx b/stories/Layers/components/Point3D.tsx index ad87d619bf..b2d5da8212 100644 --- a/stories/Layers/components/Point3D.tsx +++ b/stories/Layers/components/Point3D.tsx @@ -22,6 +22,9 @@ export default class Point3D extends React.Component { }), }); const pointLayer = new PointLayer(); + scene.on('resize',()=>{ + console.log('resize') + }) pointLayer .source(data, { cluster: true, diff --git a/stories/React/components/world_ncov.tsx b/stories/React/components/world_ncov.tsx index 31c975c2ab..8a0a4ea153 100644 --- a/stories/React/components/world_ncov.tsx +++ b/stories/React/components/world_ncov.tsx @@ -70,7 +70,7 @@ export default React.memo(function Map() { fetch( 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', ).then((d) => d.json()), - fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => + fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) => d.json(), ), ]); diff --git a/stories/React/components/world_ncov_bubble.tsx b/stories/React/components/world_ncov_bubble.tsx index 647854dd7e..13d329b024 100644 --- a/stories/React/components/world_ncov_bubble.tsx +++ b/stories/React/components/world_ncov_bubble.tsx @@ -85,7 +85,7 @@ export default React.memo(function Map() { fetch( 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', ).then((d) => d.json()), - fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => + fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) => d.json(), ), ]); @@ -133,7 +133,12 @@ export default React.memo(function Map() { margin: 0, }} > -
  • 现有确诊:{popupInfo.feature.currentConfirmedCount}
    • +
  • + + 现有确诊:{popupInfo.feature.currentConfirmedCount} +
  • 累计确诊:{popupInfo.feature.confirmedCount}
  • 治愈:{popupInfo.feature.curedCount}
  • 死亡:{popupInfo.feature.deadCount}
    • @@ -204,22 +209,7 @@ export default React.memo(function Map() { }, }} color={{ - field: 'confirmedCount', - values: (count) => { - return count > 10000 - ? colors[6] - : count > 1000 - ? colors[5] - : count > 500 - ? colors[4] - : count > 100 - ? colors[3] - : count > 10 - ? colors[2] - : count > 1 - ? colors[1] - : colors[0]; - }, + values: '#b10026', }} shape={{ values: 'circle', @@ -237,8 +227,8 @@ export default React.memo(function Map() { opacity: 0.6, }} > - - + + {/* */} , - + , ]} diff --git a/stories/React/components/world_ncov_bubble_animate.tsx b/stories/React/components/world_ncov_bubble_animate.tsx index 02a015bb90..4277bfd9c3 100644 --- a/stories/React/components/world_ncov_bubble_animate.tsx +++ b/stories/React/components/world_ncov_bubble_animate.tsx @@ -77,7 +77,7 @@ export default React.memo(function Map() { fetch( 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', ).then((d) => d.json()), - fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => + fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) => d.json(), ), ]); diff --git a/stories/React/components/world_ncov_column.tsx b/stories/React/components/world_ncov_column.tsx index be005923d8..5549292137 100644 --- a/stories/React/components/world_ncov_column.tsx +++ b/stories/React/components/world_ncov_column.tsx @@ -72,7 +72,7 @@ export default React.memo(function Map() { fetch( 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', ).then((d) => d.json()), - fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => + fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) => d.json(), ), ]); diff --git a/stories/React/components/world_ncov_fill.tsx b/stories/React/components/world_ncov_fill.tsx index b027d48274..1bc1d42805 100644 --- a/stories/React/components/world_ncov_fill.tsx +++ b/stories/React/components/world_ncov_fill.tsx @@ -1,4 +1,5 @@ import { + LayerEvent, LineLayer, MapboxScene, Marker, @@ -64,15 +65,26 @@ function joinData(geodata: any, ncovData: any) { export default React.memo(function Map() { const [data, setData] = React.useState(); + const [popupInfo, setPopupInfo] = React.useState<{ + lnglat: number[]; + feature: any; + }>(); + + function showPopup(args: any): void { + setPopupInfo({ + lnglat: args.lngLat, + feature: args.feature, + }); + } React.useEffect(() => { const fetchData = async () => { const [geoData, ncovData] = await Promise.all([ fetch( 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', ).then((d) => d.json()), - fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => - d.json(), - ), + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json', + ).then((d) => d.json()), ]); setData(joinData(geoData, ncovData.results)); }; @@ -95,6 +107,26 @@ export default React.memo(function Map() { bottom: 0, }} > + {popupInfo && ( + + {popupInfo.feature.name} +
      +
    • + + 现有确诊:{popupInfo.feature.currentConfirmedCount} +
      • +
    • 累计确诊:{popupInfo.feature.confirmedCount}
      • +
    • 治愈:{popupInfo.feature.curedCount}
      • +
    • 死亡:{popupInfo.feature.deadCount}
      • +
    +     + )} {data && [ , + > + + {/* */} + , + ,