diff --git a/docs/api/react/layer.zh.md b/docs/api/react/layer.zh.md index 3752b6dc1b..df8691143b 100644 --- a/docs/api/react/layer.zh.md +++ b/docs/api/react/layer.zh.md @@ -3,6 +3,25 @@ title: Layer 组件 order: 2 --- +## Layer 类型 + +React 各个组件名称和 L7 名称保持一致 + +- PointLayer +- PolygonLayer +- LineLayer +- HeatmapLayer +- RasterLayer +- ImageLayer +- CityBuildingLayer + +### 使用方式 + +```jsx +import { PointLayer } '@antv/l7-react'; + +``` + ## Layer Props | prop name | Type | Default | Description | @@ -17,6 +36,7 @@ order: 2 | filter | `Function` | | 图层数据过滤方法 | | select | `boolean` `interaction option` | | 图层选中高亮 | | active | `boolean` `interaction option` | `false` | 图层 hover 高亮 | +| animate | `animate Option` | `null` | 图层动画配置 | | onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 | ### layer options @@ -73,19 +93,25 @@ const scales = { ### interaction option +active，select 配置项 + **option** - color 设置交互的颜色，指滑过或者选中的 +```jsx +<> +``` + ### 获取 layer 对象 #### onLayerLoaded 回调函数获取 layer, scene 对象 -onLayerLoaded=(layer, scene) =>{ - -} +```javascript +onLayerLoaded = (layer, scene) => {}; +``` #### Context API diff --git a/docs/api/react/marker.zh.md b/docs/api/react/marker.zh.md index 37c38fcf78..e364791c1d 100644 --- a/docs/api/react/marker.zh.md +++ b/docs/api/react/marker.zh.md @@ -21,6 +21,10 @@ order: 3 | offsets | `Array[x,y]` | `null` | marker 位置偏移 | | extData | `object` | `null` | marker 属性数据 | +## Maker 事件 + +通过 onMarkerLoaded 方法获取 Marker 实例监听 + ## 实例 ```jsx diff --git a/docs/api/react/scene.zh.md b/docs/api/react/scene.zh.md index 0fe7d4d7a6..00604ea168 100644 --- a/docs/api/react/scene.zh.md +++ b/docs/api/react/scene.zh.md @@ -3,6 +3,14 @@ title: Scene 组件 order: 1 --- +## 使用 + +在 React 版本中 Mapbox 和高德地图作为两个组件封装的。 + +```javascript +import { MapboxScene, AmapScene } from '@antv/l7-react'; +``` + ## Scene Props | prop name | Type | Default | Description | diff --git a/docs/api/react/start.en.md b/docs/api/react/start.en.md index 136555fc36..e08930e106 100644 --- a/docs/api/react/start.en.md +++ b/docs/api/react/start.en.md @@ -13,6 +13,7 @@ order: 0 ```javascript import { LineLayer, AMapScene } from '@antv/l7-react'; + export default React.memo(function Map() { const [data, setData] = React.useState(); React.useEffect(() => { diff --git a/examples/react/control/demo/Marker.tsx b/examples/react/control/demo/Marker.tsx new file mode 100644 index 0000000000..3f1e11e4f0 --- /dev/null +++ b/examples/react/control/demo/Marker.tsx @@ -0,0 +1,35 @@ +import { AMapScene, Marker } from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +function creatMarkers() { + const markers = []; + for (let i = 0; i < 5; i++) { + for (let j = 0; j < 5; j++) { + markers.push(); + } + } + return markers; +} +const MapScene = React.memo(function Map() { + return ( + + {creatMarkers()} + + ); +}); + +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/control/demo/control.tsx b/examples/react/control/demo/control.tsx index 17128e868c..4844364bec 100644 --- a/examples/react/control/demo/control.tsx +++ b/examples/react/control/demo/control.tsx @@ -5,7 +5,7 @@ const MapScene = React.memo(function Map() { return ( { + const { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + } = item; + if (countryName === '中国') { + if (!ncovDataObj[countryName]) { + ncovDataObj[countryName] = { + countryName: 0, + countryEnglishName, + currentConfirmedCount: 0, + confirmedCount: 0, + suspectedCount: 0, + curedCount: 0, + deadCount: 0, + }; + } else { + ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount; + ncovDataObj[countryName].confirmedCount += confirmedCount; + ncovDataObj[countryName].suspectedCount += suspectedCount; + ncovDataObj[countryName].curedCount += curedCount; + ncovDataObj[countryName].deadCount += deadCount; + } + } else { + ncovDataObj[countryName] = { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + }; + } + }); + const geoObj: any = {}; + geodata.features.forEach((feature: any) => { + const { name } = feature.properties; + geoObj[name] = feature.properties; + const ncov = ncovDataObj[name] || {}; + feature.properties = { + ...feature.properties, + ...ncov, + }; + }); + return geodata; +} + +const World = React.memo(function Map() { + const [data, setData] = React.useState(); + const [filldata, setfillData] = React.useState(); + const [popupInfo, setPopupInfo] = React.useState<{ + lnglat: number[]; + feature: any; + }>(); + 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(), + ), + ]); + const worldData = joinData(geoData, ncovData.results); + const pointdata = worldData.features.map((feature: any) => { + return feature.properties; + }); + setfillData(worldData); + setData(pointdata); + }; + fetchData(); + }, []); + function showPopup(args: any): void { + setPopupInfo({ + lnglat: args.lngLat, + feature: args.feature, + }); + } + + return ( + <> + + {popupInfo && ( + + {popupInfo.feature.name} +
    +
  • 现有确诊:{popupInfo.feature.currentConfirmedCount}
    • +
  • 累计确诊:{popupInfo.feature.confirmedCount}
    • +
  • 治愈:{popupInfo.feature.curedCount}
    • +
  • 死亡:{popupInfo.feature.deadCount}
    • +
+ + )} + {data && [ + , + , + + + , + ]} + + + ); +}); +ReactDOM.render(, document.getElementById('map')); \ No newline at end of file diff --git a/examples/react/covid/demo/covid_bubble.tsx b/examples/react/covid/demo/covid_bubble.tsx new file mode 100644 index 0000000000..d3f9ad667a --- /dev/null +++ b/examples/react/covid/demo/covid_bubble.tsx @@ -0,0 +1,276 @@ +import { + LayerEvent, + LineLayer, + MapboxScene, + Marker, + PointLayer, + PolygonLayer, + Popup, +} from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +const colors = [ + '#732200', + '#CC3D00', + '#FF6619', + '#FF9466', + '#FFC1A6', + '#FCE2D7', + '#ffffff', +].reverse(); +function joinData(geodata: any, ncovData: any) { + const ncovDataObj: any = {}; + ncovData.forEach((item: any) => { + const { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + } = item; + if (countryName === '中国') { + if (!ncovDataObj[countryName]) { + ncovDataObj[countryName] = { + countryName, + countryEnglishName, + currentConfirmedCount: 0, + confirmedCount: 0, + suspectedCount: 0, + curedCount: 0, + deadCount: 0, + }; + } else { + ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount; + ncovDataObj[countryName].confirmedCount += confirmedCount; + ncovDataObj[countryName].suspectedCount += suspectedCount; + ncovDataObj[countryName].curedCount += curedCount; + ncovDataObj[countryName].deadCount += deadCount; + } + } else { + ncovDataObj[countryName] = { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + }; + } + }); + const geoObj: any = {}; + geodata.features.forEach((feature: any) => { + const { name } = feature.properties; + geoObj[name] = feature.properties; + const ncov = ncovDataObj[name] || {}; + feature.properties = { + ...feature.properties, + ...ncov, + }; + }); + return geodata; +} + +const World = React.memo(function Map() { + const [data, setData] = React.useState(); + const [filldata, setfillData] = React.useState(); + const [popupInfo, setPopupInfo] = React.useState<{ + lnglat: number[]; + feature: any; + }>(); + 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(), + ), + ]); + const worldData = joinData(geoData, ncovData.results); + const pointdata = worldData.features.map((feature: any) => { + return feature.properties; + }); + setfillData(worldData); + setData(pointdata); + }; + fetchData(); + }, []); + function showPopup(args: any): void { + setPopupInfo({ + lnglat: args.lngLat, + feature: args.feature, + }); + } + + return ( + <> + + {popupInfo && ( + + {popupInfo.feature.name} +
    +
  • 现有确诊:{popupInfo.feature.currentConfirmedCount}
    • +
  • 累计确诊:{popupInfo.feature.confirmedCount}
    • +
  • 治愈:{popupInfo.feature.curedCount}
    • +
  • 死亡:{popupInfo.feature.deadCount}
    • +
+ + )} + {data && [ + , + , + { + 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]; + }, + }} + shape={{ + values: 'circle', + }} + active={{ + option: { + color: '#0c2c84', + }, + }} + size={{ + field: 'confirmedCount', + values: [0, 30], + }} + style={{ + opacity: 0.8, + }} + > + + , + { + return v > 500; + }, + }} + size={{ + values: 12, + }} + style={{ + opacity: 1, + }} + > + + , + ]} + + + ); +}); +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/covid/demo/covid_column.tsx b/examples/react/covid/demo/covid_column.tsx new file mode 100644 index 0000000000..382d231fd5 --- /dev/null +++ b/examples/react/covid/demo/covid_column.tsx @@ -0,0 +1,224 @@ +import { + LineLayer, + MapboxScene, + Marker, + PointLayer, + PolygonLayer, + Popup, +} from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +function joinData(geodata: any, ncovData: any) { + const ncovDataObj: any = {}; + ncovData.forEach((item: any) => { + const { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + } = item; + if (countryName === '中国') { + if (!ncovDataObj[countryName]) { + ncovDataObj[countryName] = { + countryName: 0, + countryEnglishName, + currentConfirmedCount: 0, + confirmedCount: 0, + suspectedCount: 0, + curedCount: 0, + deadCount: 0, + }; + } else { + ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount; + ncovDataObj[countryName].confirmedCount += confirmedCount; + ncovDataObj[countryName].suspectedCount += suspectedCount; + ncovDataObj[countryName].curedCount += curedCount; + ncovDataObj[countryName].deadCount += deadCount; + } + } else { + ncovDataObj[countryName] = { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + }; + } + }); + const geoObj: any = {}; + geodata.features.forEach((feature: any) => { + const { name } = feature.properties; + geoObj[name] = feature.properties; + const ncov = ncovDataObj[name] || {}; + feature.properties = { + ...feature.properties, + ...ncov, + }; + }); + return geodata; +} + +const World = React.memo(function Map() { + const [data, setData] = React.useState(); + const [filldata, setfillData] = React.useState(); + 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(), + ), + ]); + const worldData = joinData(geoData, ncovData.results); + const pointdata = worldData.features.map((feature: any) => { + return feature.properties; + }); + setfillData(worldData); + setData(pointdata); + }; + fetchData(); + }, []); + return ( + <> + + {data && [ + , + , + { + return count > 10000 + ? '#732200' + : count > 1000 + ? '#CC3D00' + : count > 500 + ? '#FF6619' + : count > 100 + ? '#FF9466' + : count > 10 + ? '#FFC1A6' + : count > 1 + ? '#FCE2D7' + : 'rgb(255,255,255)'; + }, + }} + shape={{ + values: 'cylinder', + }} + size={{ + field: 'confirmedCount', + values: (count: number) => { + const height = + count > 10000 + ? 70 + : count > 1000 + ? 40 + : count > 500 + ? 30 + : count > 100 + ? 20 + : count > 10 + ? 10 + : count > 1 + ? 5 + : 1; + return [5, 5, height]; + }, + }} + style={{ + opacity: 1, + }} + />, + ]} + + + ); +}); + +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/covid/demo/covid_extrude.tsx b/examples/react/covid/demo/covid_extrude.tsx new file mode 100644 index 0000000000..d178218706 --- /dev/null +++ b/examples/react/covid/demo/covid_extrude.tsx @@ -0,0 +1,171 @@ +import { + LineLayer, + MapboxScene, + Marker, + PolygonLayer, + Popup, +} from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +function joinData(geodata: any, ncovData: any) { + const ncovDataObj: any = {}; + ncovData.forEach((item: any) => { + const { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + } = item; + if (countryName === '中国') { + if (!ncovDataObj[countryName]) { + ncovDataObj[countryName] = { + countryName: 0, + countryEnglishName, + currentConfirmedCount: 0, + confirmedCount: 0, + suspectedCount: 0, + curedCount: 0, + deadCount: 0, + }; + } else { + ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount; + ncovDataObj[countryName].confirmedCount += confirmedCount; + ncovDataObj[countryName].suspectedCount += suspectedCount; + ncovDataObj[countryName].curedCount += curedCount; + ncovDataObj[countryName].deadCount += deadCount; + } + } else { + ncovDataObj[countryName] = { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + }; + } + }); + const geoObj: any = {}; + geodata.features.forEach((feature: any) => { + const { name } = feature.properties; + geoObj[name] = feature.properties; + const ncov = ncovDataObj[name] || {}; + feature.properties = { + ...feature.properties, + ...ncov, + }; + }); + return geodata; +} + +const World = React.memo(function Map() { + const [data, setData] = React.useState(); + 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(), + ), + ]); + setData(joinData(geoData, ncovData.results)); + }; + fetchData(); + }, []); + return ( + <> + + {data && [ + { + return count > 10000 + ? '#732200' + : count > 1000 + ? '#CC3D00' + : count > 500 + ? '#FF6619' + : count > 100 + ? '#FF9466' + : count > 10 + ? '#FFC1A6' + : count > 1 + ? '#FCE2D7' + : 'rgb(255,255,255)'; + }, + }} + shape={{ + values: 'extrude', + }} + size={{ + field: 'confirmedCount', + values: [0, 200000, 600000, 800000, 1000000], + }} + style={{ + opacity: 1, + }} + />, + , + ]} + + + ); +}); +ReactDOM.render(, document.getElementById('map')); \ No newline at end of file diff --git a/examples/react/covid/demo/covid_fill.tsx b/examples/react/covid/demo/covid_fill.tsx new file mode 100644 index 0000000000..8c566466e2 --- /dev/null +++ b/examples/react/covid/demo/covid_fill.tsx @@ -0,0 +1,161 @@ +import { + LineLayer, + MapboxScene, + Marker, + PolygonLayer, + Popup, +} from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; + +function joinData(geodata: any, ncovData: any) { + const ncovDataObj: any = {}; + ncovData.forEach((item: any) => { + const { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + } = item; + if (countryName === '中国') { + if (!ncovDataObj[countryName]) { + ncovDataObj[countryName] = { + countryName: 0, + countryEnglishName, + currentConfirmedCount: 0, + confirmedCount: 0, + suspectedCount: 0, + curedCount: 0, + deadCount: 0, + }; + } else { + ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount; + ncovDataObj[countryName].confirmedCount += confirmedCount; + ncovDataObj[countryName].suspectedCount += suspectedCount; + ncovDataObj[countryName].curedCount += curedCount; + ncovDataObj[countryName].deadCount += deadCount; + } + } else { + ncovDataObj[countryName] = { + countryName, + countryEnglishName, + currentConfirmedCount, + confirmedCount, + suspectedCount, + curedCount, + deadCount, + }; + } + }); + const geoObj: any = {}; + geodata.features.forEach((feature: any) => { + const { name } = feature.properties; + geoObj[name] = feature.properties; + const ncov = ncovDataObj[name] || {}; + feature.properties = { + ...feature.properties, + ...ncov, + }; + }); + return geodata; +} + +const World = React.memo(function Map() { + const [data, setData] = React.useState(); + 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(), + ), + ]); + setData(joinData(geoData, ncovData.results)); + }; + fetchData(); + }, []); + return ( + <> + + {data && [ + , + , + ]} + + + ); +}); +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/covid/demo/meta.json b/examples/react/covid/demo/meta.json new file mode 100644 index 0000000000..f4a3373a4a --- /dev/null +++ b/examples/react/covid/demo/meta.json @@ -0,0 +1,33 @@ +{ + "title": { + "zh": "COVID-19 地图", + "en": "COVID-19 Map" + }, + "demos": [ + { + "filename": "covid_animate.tsx", + "title": "气泡动图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*ZFdoQ7QTqVYAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "covid_fill.tsx", + "title": "填充图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*R6quR4grVI0AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "covid_bubble.tsx", + "title": "气泡图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*_PwXRp5xA3oAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "covid_column.tsx", + "title": "3D柱图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*XCGtTIIouIcAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "covid_extrude.tsx", + "title": "3D 填充图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*k-f5T4jyFgkAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/react/covid/index.en.md b/examples/react/covid/index.en.md new file mode 100644 index 0000000000..0fb7f6ea88 --- /dev/null +++ b/examples/react/covid/index.en.md @@ -0,0 +1,4 @@ +--- +title: COVID-19 Map +order: 0 +--- diff --git a/examples/react/covid/index.zh.md b/examples/react/covid/index.zh.md new file mode 100644 index 0000000000..2dc45c18fb --- /dev/null +++ b/examples/react/covid/index.zh.md @@ -0,0 +1,4 @@ +--- +title: COVID-19 地图 +order: 0 +--- diff --git a/examples/react/layer/demo/Point_image.tsx b/examples/react/layer/demo/Point_image.tsx new file mode 100644 index 0000000000..c207688d08 --- /dev/null +++ b/examples/react/layer/demo/Point_image.tsx @@ -0,0 +1,66 @@ +import { AMapScene, LoadImage, PointLayer } from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; + +const World = React.memo(function Map() { + const [data, setData] = React.useState(); + React.useEffect(() => { + const fetchData = async () => { + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', + ); + const data = await response.json(); + setData(data); + }; + fetchData(); + }, []); + return ( + + + + + {data && ( + + )} + + ); +}); + +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/layer/demo/meta.json b/examples/react/layer/demo/meta.json index 649cdde08b..98d378945c 100644 --- a/examples/react/layer/demo/meta.json +++ b/examples/react/layer/demo/meta.json @@ -8,7 +8,12 @@ { "filename": "world.jsx", "title": "世界地图", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*SPnxSLCgZ7IAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "Point_image.tsx", + "title": "点标注图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/react/layer/index.en.md b/examples/react/layer/index.en.md index 10ec6ccf53..173e6117af 100644 --- a/examples/react/layer/index.en.md +++ b/examples/react/layer/index.en.md @@ -1,4 +1,4 @@ --- title: Layer Component -order: 0 +order: 2 --- diff --git a/examples/react/layer/index.zh.md b/examples/react/layer/index.zh.md index abf5d8dc21..063bd53314 100644 --- a/examples/react/layer/index.zh.md +++ b/examples/react/layer/index.zh.md @@ -1,4 +1,4 @@ --- title: Layer 组件 -order: 0 +order: 2 --- diff --git a/examples/react/scene/demo/meta.json b/examples/react/scene/demo/meta.json index edcdca68e5..e7b96a6d2b 100644 --- a/examples/react/scene/demo/meta.json +++ b/examples/react/scene/demo/meta.json @@ -8,12 +8,12 @@ { "filename": "amap.jsx", "title": "高德地图", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*QrQkRKHte0YAAAAAAAAAAABkARQnAQ" }, { - "filename": "Mapbox.jsx", + "filename": "mapbox.jsx", "title": "Mapbox 地图", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*_65gSYgf1DoAAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/react/scene/index.en.md b/examples/react/scene/index.en.md index 35186e11ba..53e9fab54a 100644 --- a/examples/react/scene/index.en.md +++ b/examples/react/scene/index.en.md @@ -1,4 +1,4 @@ --- title: Scene Component -order: 0 +order: 1 --- diff --git a/examples/react/scene/index.zh.md b/examples/react/scene/index.zh.md index 67355df55e..21ffe40b28 100644 --- a/examples/react/scene/index.zh.md +++ b/examples/react/scene/index.zh.md @@ -1,4 +1,4 @@ --- title: Scene 组件 -order: 0 +order: 1 --- diff --git a/gatsby-config.js b/gatsby-config.js index ec050798cb..a280b5b895 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -175,6 +175,14 @@ module.exports = { en: 'Featured' } }, + { + slug: 'react', + icon: 'map', + title: { + zh: 'React 组件', + en: 'React Demo' + } + }, { slug: 'point', icon: 'point', @@ -216,14 +224,6 @@ module.exports = { en: 'Raster Layer' } }, - { - slug: 'react', - icon: 'map', - title: { - zh: 'React 组件', - en: 'React Demo' - } - }, { slug: 'tutorial', icon: 'map', diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index 7e493e37f5..3d0b7586cf 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -111,6 +111,7 @@ export default class TextModel extends BaseModel { const { canvas, mapping } = this.fontService; if (Object.keys(mapping).length !== this.textCount) { this.updateTexture(); + this.textCount = Object.keys(mapping).length; } this.preTextStyle = { textAnchor, diff --git a/packages/react/src/component/Layer.ts b/packages/react/src/component/Layer.ts index e495a06027..46697e0515 100644 --- a/packages/react/src/component/Layer.ts +++ b/packages/react/src/component/Layer.ts @@ -30,4 +30,24 @@ const RasterLayer = React.memo(function Layer( return BaseLayer('rasterLayer', props); }); -export { PolygonLayer, LineLayer, PointLayer, HeatMapLayer, RasterLayer }; +const ImageLayer = React.memo(function Layer( + props: ILayerProps & { children?: any }, +) { + return BaseLayer('imagelayer', props); +}); + +const CityBuildingLayer = React.memo(function Layer( + props: ILayerProps & { children?: any }, +) { + return BaseLayer('citybuildinglayer', props); +}); + +export { + PolygonLayer, + LineLayer, + PointLayer, + HeatMapLayer, + RasterLayer, + ImageLayer, + CityBuildingLayer, +}; diff --git a/packages/react/src/component/LayerAttribute/Layer.tsx b/packages/react/src/component/LayerAttribute/Layer.tsx index 1d430e688d..e122727df1 100644 --- a/packages/react/src/component/LayerAttribute/Layer.tsx +++ b/packages/react/src/component/LayerAttribute/Layer.tsx @@ -1,6 +1,8 @@ import { + CityBuildingLayer, HeatmapLayer, ILayer, + ImageLayer, LineLayer, PointLayer, PolygonLayer, @@ -61,6 +63,12 @@ export default function BaseLayer(type: string, props: ILayerProps) { case 'rasterLayer': l = new RasterLayer(options); break; + case 'imageLayer': + l = new ImageLayer(options); + break; + case 'citybuildingLayer': + l = new CityBuildingLayer(options); + break; default: l = new PolygonLayer(options); } @@ -115,9 +123,9 @@ export default function BaseLayer(type: string, props: ILayerProps) { {scale && } - + {color && } {size && } - + {shape && } {style &&