mirror of https://gitee.com/antv-l7/antv-l7
feat: 瓦片图层、地图图层渲染性能/体验优化 (#1329)
* fix: 修复 featureScale 错误 * style: lint style * fix: remove featureScalePlugin async * feat: 优化简单矢量线瓦片的计算 * feat: 优化简单线图层的网格计算构建 * style: lint style * style: lint style * feat: 矢量瓦片更新渲染优化 * fix: 修复 tileLayer 重复创建导致的瓦片更新错误 * feat: 优化矢量瓦片图层本身的性能 * style: lint style * feat: 优化 reRender 的调用 * feat: 合并瓦片销毁时的重绘 * feat: 去除矢量文本图层的 remapping 映射 * feat: 网格构建异步改造修复 * feat: 瓦片渲染流程优化 * feat: 通用瓦片流程的优化（主线程阻塞优化） * feat: 补全瓦片更新触发 * feat: 默认顶点属性构建的优化 * style: lint style * feat: 调整矢量点 uniform 参数 * chore: 去除矢量图层对偏移坐标的支持（不统一） * style: lint style * feat: 合并不同瓦片图层触发的重绘 * style: lint style * chore: 调整瓦片代码结构 * feat: 矢量图层初始化优化 * chore: code clean * feat: 矢量图层地图绘制数据属性映射优化 * chore: lint style * feat: 矢量图层地图绘制初始化优化 * feat: maskLayer 初始化优化、debugtestLayer 默认为 basemap 模式 * chore: style * feat: 绘制指令优化 - picking drawCommand * style: lint style * feat: 优化矢量图层初始化资源的创建 * feat: 简化矢量瓦片图层加载完成触发的重绘 * chore: 统一地图图层的样式写法 color、size * style: lint style * style: lint style * style: lint style * feat: 瓦片渲染执行优化 Please enter the commit message for your changes. Lines starting * feat: 优化拾取渲染 * style: lint style * chore: style change * style: lint style * feat: layer plugin list clean * style: lint style * feat: 合并shader 使用 * style: lint style * feat: 优化 source 计算 * feat: 去除 source 中对创建 tileset 的多余判断 * chore: 优化代码写法 * feat: 地图瓦片图层类型定义优化 * chore: data clean * style: lint style * style: lint style * feat: debugLayer add basemap attr * chore: demo 调整 * feat: 优化瓦片图层的渲染 * feat: 修改瓦片显示更新 * fix: 修复动画模式传值导致的显示效果问题 * fix: 修复 mapbox version 设置错误的问题 * fix: 修复 CanvasLayer render * style: lint style * chore: clean citybuilding demo * style: lint style * chore: clean point simple code * chore: clean point text iconfont * chore: clean polygon fill code * style: lint style * chore: clean billboard demo * chore: clean polygon water/ocean demos * chore: clean point radar demos * chore: clean point normal demos * chore: clean wind layer demos * chore: clean demos * feat: clean demos & fix half line insert attri * style: lint style * chore: clean mask demo * chore: adjust website demo * style: lint style * chore: clean worker demos * style: lint style * fix: 修复箭头顶点重复插入的问题 * fix: 修复线图层弧线的纹理分布 * chore: website demos code clean * chore: layerService/renderlayers move clear place * feat: 优化图片瓦片的颜色映射 * style: lint style Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao
GitHub
parent
3e7ab354ac
commit
9bf6a17d88
|
|
@ -0,0 +1,155 @@
|
|||
### CanvasLayer - demo1
|
||||
```tsx
|
||||
import { CanvasLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
let x = 0;
|
||||
function draw(option) {
|
||||
const { size, ctx, mapService } = option;
|
||||
const [ width, height ] = size;
|
||||
|
||||
const radius = 30,
|
||||
rectWidth = radius * 2;
|
||||
const rectHeight = rectWidth;
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
const points = [
|
||||
{
|
||||
lng: 108.544921875,
|
||||
lat: 30.977609093348686,
|
||||
level: 85,
|
||||
color: 'rgba( 220,20,60, 0.6)'
|
||||
},
|
||||
{
|
||||
lng: 110.654296875,
|
||||
lat: 31.090574094954192,
|
||||
level: 75,
|
||||
color: 'rgba( 255,140,0, 0.6)'
|
||||
},
|
||||
{
|
||||
lng: 112.5,
|
||||
lat: 29.80251790576445,
|
||||
level: 65,
|
||||
color: 'rgba(255,165,0, 0.6)'
|
||||
},
|
||||
{
|
||||
lng: 114.78515624999999,
|
||||
lat: 30.64867367928756,
|
||||
level: 40,
|
||||
color: 'rgba(30,144,255, 0.6)'
|
||||
},
|
||||
{
|
||||
lng: 116.49902343749999,
|
||||
lat: 29.84064389983441,
|
||||
level: 50,
|
||||
color: 'rgba(30,144,255, 0.6)'
|
||||
},
|
||||
{
|
||||
lng: 118.21289062499999,
|
||||
lat: 31.16580958786196,
|
||||
level: 20,
|
||||
color: 'rgba( 127,255,0, 0.6)'
|
||||
},
|
||||
{
|
||||
lng: 119.091796875,
|
||||
lat: 32.509761735919426,
|
||||
level: 50,
|
||||
color: 'rgba(30,144,255, 0.6)'
|
||||
},
|
||||
{
|
||||
lng: 121.0693359374999,
|
||||
lat: 31.80289258670676,
|
||||
level: 45,
|
||||
color: 'rgba(30,144,255, 0.6)'
|
||||
}
|
||||
];
|
||||
ctx.fillStyle = 'rgb(35,75,225)';
|
||||
ctx.font = 'normal small-caps bold 14px arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
points.map(point => {
|
||||
const pixelCenter = mapService.lngLatToContainer([ point.lng, point.lat ]);
|
||||
pixelCenter.x *= window.devicePixelRatio;
|
||||
pixelCenter.y *= window.devicePixelRatio;
|
||||
const rectStartX = pixelCenter.x - radius;
|
||||
const rectStartY = pixelCenter.y - radius;
|
||||
|
||||
ctx.save();
|
||||
|
||||
ctx.fillText(point.level + '%', pixelCenter.x, pixelCenter.y);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(pixelCenter.x, pixelCenter.y, radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(135,206,250,0.2)';
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.clip();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = point.color;
|
||||
ctx.moveTo(rectStartX, pixelCenter.y);
|
||||
|
||||
const waterheight = rectStartY + ((100 - point.level) / 100) * rectHeight;
|
||||
for (let i = 0; i <= rectWidth; i += 10) {
|
||||
ctx.lineTo(
|
||||
rectStartX + i,
|
||||
waterheight + Math.sin(Math.PI * 2 * (i / rectWidth) + x) * 3 + 1
|
||||
);
|
||||
}
|
||||
|
||||
ctx.lineTo(pixelCenter.x + radius, pixelCenter.y + radius);
|
||||
ctx.lineTo(rectStartX, pixelCenter.y + radius);
|
||||
ctx.lineTo(rectStartX, pixelCenter.y);
|
||||
ctx.closePath();
|
||||
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
});
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'fresh',
|
||||
center: [ 115, 31 ],
|
||||
zoom: 5.0
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
const layer = new CanvasLayer({})
|
||||
.style({
|
||||
zIndex: 10,
|
||||
update: 'always',
|
||||
drawingOnCanvas: draw
|
||||
})
|
||||
.animate({
|
||||
enable: true
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
|
||||
setInterval(() => {
|
||||
x += 0.1;
|
||||
layer.style({
|
||||
drawingOnCanvas: draw
|
||||
});
|
||||
scene.render();
|
||||
}, 30);
|
||||
});
|
||||
}, [])
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height:'500px',
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
### CanvasLayer - demo2
|
||||
```tsx
|
||||
import { CanvasLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'fresh',
|
||||
center: [ 90, 31 ],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new CanvasLayer({})
|
||||
.style({
|
||||
zIndex: 10,
|
||||
update: 'dragend',
|
||||
drawingOnCanvas: option => {
|
||||
const { size, ctx, mapService } = option;
|
||||
const [ width, height ] = size;
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.fillStyle = 'rgba(0, 200, 0, 0.2)';
|
||||
data.features.map(feature => {
|
||||
const pixelCenter = mapService.lngLatToContainer(
|
||||
feature.geometry.coordinates
|
||||
);
|
||||
pixelCenter.x *= window.devicePixelRatio;
|
||||
pixelCenter.y *= window.devicePixelRatio;
|
||||
if (
|
||||
pixelCenter.x < 0 ||
|
||||
pixelCenter.y < 0 ||
|
||||
pixelCenter.x > width ||
|
||||
pixelCenter.y > height
|
||||
) { return ''; }
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
pixelCenter.x,
|
||||
pixelCenter.y,
|
||||
feature.properties.capacity / 200,
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}, [])
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height:'500px',
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### building - amap1
|
||||
<code src="./amap1.tsx"></code>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
// @ts-ignore
|
||||
import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [120.145, 30.238915],
|
||||
pitch: 60,
|
||||
zoom: 13.2,
|
||||
}),
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
|
||||
).then(async (res) => {
|
||||
const pointLayer = new CityBuildingLayer();
|
||||
pointLayer
|
||||
.source(await res.json())
|
||||
.size('floor', [0, 500])
|
||||
.color('rgba(242,246,250,1.0)')
|
||||
.animate({
|
||||
enable: true,
|
||||
})
|
||||
.active({
|
||||
color: '#0ff',
|
||||
mix: 0.5,
|
||||
})
|
||||
.style({
|
||||
opacity: 0.7,
|
||||
baseColor: 'rgb(16, 16, 16)',
|
||||
windowColor: 'rgb(30, 60, 89)',
|
||||
brightColor: 'rgb(255, 176, 38)',
|
||||
sweep: {
|
||||
enable: true,
|
||||
sweepRadius: 2,
|
||||
sweepColor: '#1990FF',
|
||||
sweepSpeed: 0.5,
|
||||
sweepCenter: [120.145319, 30.238915],
|
||||
},
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
|
||||
)
|
||||
.then((data) => data.json())
|
||||
.then(({ lakeBorderData, lakeData, landData }) => {
|
||||
const lakeLayer = new PolygonLayer()
|
||||
.source(lakeData)
|
||||
.shape('fill')
|
||||
.color('#1E90FF')
|
||||
.style({
|
||||
opacity: 0.4,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'out', // in - out
|
||||
},
|
||||
});
|
||||
const landLayer = new PolygonLayer()
|
||||
.source(landData)
|
||||
.shape('fill')
|
||||
.color('#3CB371')
|
||||
.style({
|
||||
opacity: 0.4,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
|
||||
const lakeBorderLayer = new PolygonLayer()
|
||||
.source(lakeBorderData)
|
||||
.shape('fill')
|
||||
.color('#ccc')
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
|
||||
scene.addLayer(lakeLayer);
|
||||
scene.addLayer(lakeBorderLayer);
|
||||
scene.addLayer(landLayer);
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({
|
||||
zIndex: 0,
|
||||
depth: true,
|
||||
})
|
||||
.source(data)
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.color('#1990FF')
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 2, // 持续时间，延时
|
||||
trailLength: 2, // 流线长度
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### building - amap2
|
||||
<code src="./amap2.tsx"></code>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
// @ts-ignore
|
||||
import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
style: 'dark',
|
||||
center: [120.145, 30.238915],
|
||||
pitch: 60,
|
||||
zoom: 13.2,
|
||||
}),
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
|
||||
).then(async (res) => {
|
||||
const pointLayer = new CityBuildingLayer();
|
||||
pointLayer
|
||||
.source(await res.json())
|
||||
.size('floor', [0, 500])
|
||||
.color('rgba(242,246,250,1.0)')
|
||||
.animate({
|
||||
enable: true,
|
||||
})
|
||||
.active({
|
||||
color: '#0ff',
|
||||
mix: 0.5,
|
||||
})
|
||||
.style({
|
||||
opacity: 0.7,
|
||||
baseColor: 'rgb(16, 16, 16)',
|
||||
windowColor: 'rgb(30, 60, 89)',
|
||||
brightColor: 'rgb(255, 176, 38)',
|
||||
sweep: {
|
||||
enable: true,
|
||||
sweepRadius: 2,
|
||||
sweepColor: '#1990FF',
|
||||
sweepSpeed: 0.5,
|
||||
sweepCenter: [120.145319, 30.238915],
|
||||
},
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
|
||||
)
|
||||
.then((data) => data.json())
|
||||
.then(({ lakeBorderData, lakeData, landData }) => {
|
||||
const lakeLayer = new PolygonLayer()
|
||||
.source(lakeData)
|
||||
.shape('fill')
|
||||
.color('#1E90FF')
|
||||
.style({
|
||||
opacity: 0.4,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'out', // in - out
|
||||
},
|
||||
});
|
||||
const landLayer = new PolygonLayer()
|
||||
.source(landData)
|
||||
.shape('fill')
|
||||
.color('#3CB371')
|
||||
.style({
|
||||
opacity: 0.4,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
|
||||
const lakeBorderLayer = new PolygonLayer()
|
||||
.source(lakeBorderData)
|
||||
.shape('fill')
|
||||
.color('#ccc')
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
|
||||
scene.addLayer(lakeLayer);
|
||||
scene.addLayer(lakeBorderLayer);
|
||||
scene.addLayer(landLayer);
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({
|
||||
zIndex: 0,
|
||||
depth: true,
|
||||
})
|
||||
.source(data)
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.color('#1990FF')
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 2, // 持续时间，延时
|
||||
trailLength: 2, // 流线长度
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### building - mapbox
|
||||
<code src="./mapbox.tsx"></code>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
// @ts-ignore
|
||||
import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [120.145, 30.238915],
|
||||
pitch: 60,
|
||||
zoom: 13.2,
|
||||
}),
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
|
||||
).then(async (res) => {
|
||||
const pointLayer = new CityBuildingLayer();
|
||||
pointLayer
|
||||
.source(await res.json())
|
||||
.size('floor', [0, 500])
|
||||
.color('rgba(242,246,250,1.0)')
|
||||
.animate({
|
||||
enable: true,
|
||||
})
|
||||
.active({
|
||||
color: '#0ff',
|
||||
mix: 0.5,
|
||||
})
|
||||
.style({
|
||||
opacity: 0.7,
|
||||
baseColor: 'rgb(16, 16, 16)',
|
||||
windowColor: 'rgb(30, 60, 89)',
|
||||
brightColor: 'rgb(255, 176, 38)',
|
||||
sweep: {
|
||||
enable: true,
|
||||
sweepRadius: 2,
|
||||
sweepColor: '#1990FF',
|
||||
sweepSpeed: 0.5,
|
||||
sweepCenter: [120.145319, 30.238915],
|
||||
},
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
|
||||
)
|
||||
.then((data) => data.json())
|
||||
.then(({ lakeBorderData, lakeData, landData }) => {
|
||||
const lakeLayer = new PolygonLayer()
|
||||
.source(lakeData)
|
||||
.shape('fill')
|
||||
.color('#1E90FF')
|
||||
.style({
|
||||
opacity: 0.4,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'out', // in - out
|
||||
},
|
||||
});
|
||||
const landLayer = new PolygonLayer()
|
||||
.source(landData)
|
||||
.shape('fill')
|
||||
.color('#3CB371')
|
||||
.style({
|
||||
opacity: 0.4,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
|
||||
const lakeBorderLayer = new PolygonLayer()
|
||||
.source(lakeBorderData)
|
||||
.shape('fill')
|
||||
.color('#ccc')
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
|
||||
scene.addLayer(lakeLayer);
|
||||
scene.addLayer(lakeBorderLayer);
|
||||
scene.addLayer(landLayer);
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({
|
||||
zIndex: 0,
|
||||
depth: true,
|
||||
})
|
||||
.source(data)
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.color('#1990FF')
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 2, // 持续时间，延时
|
||||
trailLength: 2, // 流线长度
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### billboard
|
||||
<code src="./demos/billboard.tsx"></code>
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene, Source } from '@antv/l7';
|
||||
import { GeometryLayer } from '@antv/l7-layers';
|
||||
import { Scene, GeometryLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class Demo extends React.Component {
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
|
@ -60,20 +59,14 @@ export default class Demo extends React.Component {
|
|||
img.src =
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ';
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
### sprite
|
||||
<code src="./sprite.tsx"></code>
|
||||
<code src="./demos/sprite.tsx"></code>
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene, Source } from '@antv/l7';
|
||||
import { HeatmapLayer } from '@antv/l7-layers';
|
||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class Demo extends React.Component {
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
|
@ -45,20 +44,14 @@ export default class Demo extends React.Component {
|
|||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
### Heatmap
|
||||
<code src="./heatmap.tsx"></code>
|
||||
<code src="./demos/heatmap.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Heatmap - 3D
|
||||
<code src="./demos/heatmap3d.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Image Layer
|
||||
<code src="./image.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Image Layer - raster
|
||||
<code src="./raster.tsx"></code>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return {
|
||||
data: values[0],
|
||||
width,
|
||||
height,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
};
|
||||
}
|
||||
|
||||
async function addLayer() {
|
||||
const tiffdata = await getTiffData();
|
||||
|
||||
const layer = new RasterLayer({});
|
||||
layer
|
||||
.source(tiffdata.data, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: tiffdata.width,
|
||||
height: tiffdata.height,
|
||||
min: 0,
|
||||
max: 80,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
heightRatio: 100,
|
||||
opacity: 0.8,
|
||||
domain: [0, 2000],
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C',
|
||||
].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
return layer;
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
const layer = await addLayer();
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
})();
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
// @ts-ignore
|
||||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
|
|
@ -6,6 +5,7 @@ import {
|
|||
lineAtOffset,
|
||||
lineAtOffsetAsyc,
|
||||
PointLayer,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
|
@ -6,6 +6,7 @@ import {
|
|||
lineAtOffset,
|
||||
lineAtOffsetAsyc,
|
||||
PointLayer,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
|
@ -18,7 +19,6 @@ export default () => {
|
|||
map: new GaodeMap({
|
||||
center: [105, 32],
|
||||
zoom: 4,
|
||||
// pitch: 60
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
@ -1,22 +1,26 @@
|
|||
import { LineLayer, Scene } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class LineDemo extends React.Component {
|
||||
// @ts-ignore
|
||||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
Source,
|
||||
lineAtOffset,
|
||||
lineAtOffsetAsyc,
|
||||
PointLayer,
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
// @ts-ignore
|
||||
useEffect(async () => {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
map: new GaodeMap({
|
||||
center: [110.19382669582967, 40.258134],
|
||||
pitch: 0,
|
||||
zoom: 3,
|
||||
|
|
@ -53,21 +57,14 @@ export default class LineDemo extends React.Component {
|
|||
.render();
|
||||
lineLayer.fitBounds();
|
||||
scene.addLayer(lineLayer);
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
import { PointLayer, LineLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Amap2demo_arcLine3d extends React.Component {
|
||||
// @ts-ignore
|
||||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
PointLayer,
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
|
@ -21,7 +21,6 @@ export default class Amap2demo_arcLine3d extends React.Component {
|
|||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addImage(
|
||||
|
|
@ -123,22 +122,14 @@ export default class Amap2demo_arcLine3d extends React.Component {
|
|||
scene.addLayer(flyLine);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
// @ts-ignore
|
||||
import { LineLayer, Scene, PointLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 40,
|
||||
center: [ 40, 40.16797 ],
|
||||
style: 'dark',
|
||||
zoom: 2.5
|
||||
})
|
||||
});
|
||||
scene.addImage(
|
||||
'plane',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
|
||||
);
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json'
|
||||
).then(d => d.json()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json'
|
||||
).then(d => d.text()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json'
|
||||
).then(d => d.text())
|
||||
]).then(function onLoad([ world, dot, flyline ]) {
|
||||
const dotData = eval(dot);
|
||||
// @ts-ignore
|
||||
const flydata = eval(flyline).map(item => {
|
||||
// @ts-ignore
|
||||
const latlng1 = item.from.split(',').map(e => {
|
||||
return e * 1;
|
||||
});
|
||||
// @ts-ignore
|
||||
const latlng2 = item.to.split(',').map(e => {
|
||||
return e * 1;
|
||||
});
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
});
|
||||
|
||||
const worldLine = new LineLayer()
|
||||
.source(world)
|
||||
.color('#41fc9d')
|
||||
.size(0.5)
|
||||
.style({
|
||||
opacity: 0.4
|
||||
});
|
||||
const dotPoint = new PointLayer()
|
||||
.source(dotData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#ffed11')
|
||||
.animate(true)
|
||||
.size(40);
|
||||
const flyLine = new LineLayer({ blend: 'normal' })
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#ff6b34')
|
||||
.texture('plane')
|
||||
.shape('arc')
|
||||
.size(15)
|
||||
.animate({
|
||||
duration: 1,
|
||||
interval: 0.2,
|
||||
trailLength: 0.5
|
||||
})
|
||||
.style({
|
||||
textureBlend: 'replace',
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 10, // 设置贴图纹理的间距
|
||||
});
|
||||
|
||||
const flyLine2 = new LineLayer()
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#ff6b34')
|
||||
.shape('arc')
|
||||
.size(1)
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
dashArray: [ 5, 5 ],
|
||||
opacity: 0.5
|
||||
});
|
||||
scene.addLayer(worldLine);
|
||||
scene.addLayer(dotPoint);
|
||||
scene.addLayer(flyLine2);
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
// @ts-ignore
|
||||
import { LineLayer, Scene, PointLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 120.15, 30.3 ],
|
||||
zoom: 10,
|
||||
style: 'light'
|
||||
})
|
||||
});
|
||||
|
||||
const pointLayer = new PointLayer()
|
||||
.source([{ lng: 120.155, lat: 30.31 }], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size(6000)
|
||||
.color('#f00')
|
||||
.animate(true)
|
||||
.style({
|
||||
unit: 'meter'
|
||||
});
|
||||
const lineLayer = new LineLayer({})
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[
|
||||
120.1863098144,
|
||||
30.321915039121
|
||||
],
|
||||
[
|
||||
120.3401184082,
|
||||
30.43446594614
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[
|
||||
120.19660949707033,
|
||||
30.298796461361665
|
||||
],
|
||||
[
|
||||
120.31883239746092,
|
||||
30.28041626667403
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[
|
||||
120.12245178222656,
|
||||
30.29523927312319
|
||||
],
|
||||
[
|
||||
120.01808166503906,
|
||||
30.261439550638762
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[
|
||||
120.15609741210938,
|
||||
30.285159872426014
|
||||
],
|
||||
[
|
||||
120.14923095703124,
|
||||
30.20626765511821
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[
|
||||
120.10940551757812,
|
||||
30.320136880604423
|
||||
],
|
||||
[
|
||||
120.01327514648438,
|
||||
30.362803774813028
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
.size(2)
|
||||
.shape('line')
|
||||
.style({
|
||||
arrow: {
|
||||
enable: true,
|
||||
arrowWidth: 4,
|
||||
arrowHeight: 4,
|
||||
tailWidth: 0.4
|
||||
}
|
||||
})
|
||||
.color('#f00');
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(pointLayer);
|
||||
scene.addLayer(lineLayer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
// @ts-ignore
|
||||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [120.15, 30.246],
|
||||
pitch: 0,
|
||||
zoom: 13.5,
|
||||
style: 'dark',
|
||||
pitchEnable: false,
|
||||
rotation: -90,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.addImage(
|
||||
'arrow',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
|
||||
);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const colors = ['#66c2a4', '#2ca25f', '#006d2c'];
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(2.5)
|
||||
.shape('line')
|
||||
.texture('arrow')
|
||||
.color('', () => {
|
||||
return colors[Math.floor(Math.random() * colors.length)];
|
||||
})
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 1, // 持续时间，延时
|
||||
trailLength: 2, // 流线长度
|
||||
})
|
||||
.style({
|
||||
opacity: 0.6,
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 20, // 设置贴图纹理的间距
|
||||
borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
|
||||
borderColor: '#fff', // 默认为 #ccc
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene, Source } from '@antv/l7';
|
||||
import { LineLayer } from '@antv/l7-layers';
|
||||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class Demo extends React.Component {
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
|
@ -15,7 +18,7 @@ export default class Demo extends React.Component {
|
|||
zoom: 2,
|
||||
}),
|
||||
});
|
||||
const layer = new LineLayer()
|
||||
const layer = new LineLayer({ workerEnabled: true })
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
|
|
@ -32,26 +35,20 @@ export default class Demo extends React.Component {
|
|||
},
|
||||
],
|
||||
})
|
||||
.shape('arc')
|
||||
.shape('line')
|
||||
.color('#f00')
|
||||
.size(5);
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -6,6 +6,7 @@ import {
|
|||
lineAtOffset,
|
||||
lineAtOffsetAsyc,
|
||||
PointLayer,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
// @ts-ignore
|
||||
import { LineLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
|
|
@ -1,28 +1,19 @@
|
|||
// @ts-ignore
|
||||
import { LineLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class Amap2demo_lineDash extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [116.3956, 39.9392],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
style: 'amap://styles/wine',
|
||||
// viewMode: '2D',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
|
|
@ -43,22 +34,14 @@ export default class Amap2demo_lineDash extends React.Component {
|
|||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene, Source } from '@antv/l7';
|
||||
import { LineLayer } from '@antv/l7-layers';
|
||||
import { LineLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class Demo extends React.Component {
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
|
@ -36,6 +35,7 @@ export default class Demo extends React.Component {
|
|||
.color('#f00')
|
||||
.size(10)
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
arrow: {
|
||||
enable: true,
|
||||
},
|
||||
|
|
@ -43,20 +43,14 @@ export default class Demo extends React.Component {
|
|||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import { LineLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 40,
|
||||
style: 'light',
|
||||
center: [102.600579, 23.114887],
|
||||
zoom: 14.66,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size('ELEV', (h) => {
|
||||
return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20]; // amap
|
||||
})
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize',
|
||||
})
|
||||
.style({
|
||||
heightfixed: true,
|
||||
})
|
||||
.color(
|
||||
'ELEV',
|
||||
[
|
||||
'#E4682F',
|
||||
'#FF8752',
|
||||
'#FFA783',
|
||||
'#FFBEA8',
|
||||
'#FFDCD6',
|
||||
'#EEF3FF',
|
||||
'#C8D7F5',
|
||||
'#A5C1FC',
|
||||
'#7FA7F9',
|
||||
'#5F8AE5',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,25 +1,17 @@
|
|||
import { LineLayer, Scene, flow } from '@antv/l7';
|
||||
import { LineLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
export default class Amap2demo_lineLinear extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [115, 30.258134],
|
||||
pitch: 40,
|
||||
zoom: 6,
|
||||
viewMode: '3D',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
const geoData = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
|
|
@ -77,22 +69,14 @@ export default class Amap2demo_lineLinear extends React.Component {
|
|||
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -91,62 +91,6 @@ export default () => {
|
|||
}),
|
||||
});
|
||||
|
||||
const testdata = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'MultiLineString',
|
||||
coordinates: [
|
||||
[
|
||||
[115.565185546875, 41.31082388091818],
|
||||
[115.3948974609375, 41.203456192051306],
|
||||
[115.1751708984375, 40.979898069620134],
|
||||
[115.0982666015625, 40.90105786688403],
|
||||
[114.697265625, 40.701463603604594],
|
||||
[114.89501953125, 40.50126945841643],
|
||||
[114.9993896484375, 40.50126945841643],
|
||||
[115.0982666015625, 40.400947631519614],
|
||||
[114.9993896484375, 40.3004760797495],
|
||||
[114.697265625, 40.20405042511331],
|
||||
[114.697265625, 40.3004760797495],
|
||||
[114.3951416015625, 40.20405042511331],
|
||||
[114.1973876953125, 40.20405042511331],
|
||||
[114.0985107421875, 40.00237193587648],
|
||||
[113.9996337890625, 39.90130858574736],
|
||||
[113.697509765625, 39.80009595634837],
|
||||
[113.2965087890625, 39.90130858574736],
|
||||
[113.0987548828125, 39.80009595634837],
|
||||
[112.9998779296875, 39.70296052957232],
|
||||
[112.69775390625, 39.202462225882385],
|
||||
[112.598876953125, 39.202462225882385],
|
||||
[112.5, 39.0533181067413],
|
||||
[112.3956298828125, 38.90385833966778],
|
||||
[112.1978759765625, 38.70265930723801],
|
||||
[112.060546875, 38.77121637244272],
|
||||
[112.060546875, 40.061256581404734],
|
||||
[112.1978759765625, 40.20405042511331],
|
||||
[112.060546875, 40.20405042511331],
|
||||
[112.060546875, 41.31082388091818],
|
||||
[115.565185546875, 41.31082388091818],
|
||||
],
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
ECO_NAME: 'Mongolian-Manchurian grassland',
|
||||
BIOME_NAME: 'Temperate Grasslands, Savannas & Shrublands',
|
||||
REALM: 'Palearctic',
|
||||
NNH: 3,
|
||||
NNH_NAME: 'Nature Could Recover',
|
||||
COLOR: '#F6FC38',
|
||||
COLOR_BIO: '#FEFF73',
|
||||
COLOR_NNH: '#F9A91B',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const multipolygon = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
|
|
@ -205,11 +149,6 @@ export default () => {
|
|||
COLOR_NNH: '#F9A91B',
|
||||
},
|
||||
};
|
||||
const testdata2 = {
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
};
|
||||
console.log(polygonToLineString((multipolygon as unknown) as MultiPolygon));
|
||||
|
||||
const layer = new LineLayer()
|
||||
// .source({
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
### Line
|
||||
<code src="./line.tsx"></code>
|
||||
<code src="./demos/line.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - animate
|
||||
<code src="./demos/lineAnimate.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - arc
|
||||
<code src="./demos/linearc.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - arc3d
|
||||
<code src="./demos/lineArc3d.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - arc - plane
|
||||
<code src="./demos/lineArcPlane.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - arrow
|
||||
<code src="./demos/lineArrow.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - greatCircle
|
||||
<code src="./demos/greatcircleline.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - half
|
||||
<code src="./demos/linehalf.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - texture
|
||||
<code src="./demos/lineTexture.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - worker
|
||||
<code src="./demos/lineWorker.tsx"></code>
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
### Linear Line
|
||||
<code src="./linearline.tsx"></code>
|
||||
### Line - linear
|
||||
<code src="./demos/linearline.tsx"></code>
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
### Line Blur
|
||||
<code src="./lineblur.tsx"></code>
|
||||
### Line - blur
|
||||
<code src="./demos/lineblur.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - dash
|
||||
<code src="./demos/linedash.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - height
|
||||
<code src="./demos/lineheight.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - wall
|
||||
<code src="./demos/linewall.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Line - simple
|
||||
<code src="./demos/simpleline.tsx"></code>
|
||||
|
|
@ -1,22 +1,11 @@
|
|||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
MaskLayer,
|
||||
HeatmapLayer,
|
||||
PointLayer,
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
|
|||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
|
|
@ -67,7 +55,6 @@ export default class MaskPoints extends React.Component {
|
|||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
// const heatmapLayer = new HeatmapLayer({ mask: true, maskInside: true })
|
||||
const heatmapLayer = new HeatmapLayer({
|
||||
mask: true,
|
||||
maskInside: false,
|
||||
|
|
@ -97,22 +84,14 @@ export default class MaskPoints extends React.Component {
|
|||
scene.addLayer(heatmapLayer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,22 +1,11 @@
|
|||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
MaskLayer,
|
||||
HeatmapLayer,
|
||||
PointLayer,
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
|
|||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
|
|
@ -117,22 +105,14 @@ export default class MaskPoints extends React.Component {
|
|||
// scene.addMask(mask2, heatmapLayer.id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,22 +1,11 @@
|
|||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
MaskLayer,
|
||||
HeatmapLayer,
|
||||
PointLayer,
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -28,7 +17,6 @@ export default class MaskPoints extends React.Component {
|
|||
zoom: 12.47985,
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
|
|
@ -62,7 +50,6 @@ export default class MaskPoints extends React.Component {
|
|||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
// const layer = new HeatmapLayer({ mask: true })
|
||||
const layer = new HeatmapLayer({
|
||||
mask: true,
|
||||
maskInside: false,
|
||||
|
|
@ -105,22 +92,14 @@ export default class MaskPoints extends React.Component {
|
|||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,22 +1,11 @@
|
|||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
MaskLayer,
|
||||
HeatmapLayer,
|
||||
PointLayer,
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
|
|||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
|
|
@ -66,7 +54,6 @@ export default class MaskPoints extends React.Component {
|
|||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
// const layer = new HeatmapLayer({ mask: true })
|
||||
const layer = new HeatmapLayer({
|
||||
mask: true,
|
||||
maskInside: false,
|
||||
|
|
@ -115,22 +102,14 @@ export default class MaskPoints extends React.Component {
|
|||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,23 +1,11 @@
|
|||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
MaskLayer,
|
||||
PolygonLayer,
|
||||
PointLayer,
|
||||
ImageLayer,
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Scene, ImageLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -28,7 +16,6 @@ export default class MaskPoints extends React.Component {
|
|||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
|
|
@ -64,7 +51,6 @@ export default class MaskPoints extends React.Component {
|
|||
};
|
||||
|
||||
scene.on('loaded', () => {
|
||||
// let points = new PointLayer({ zIndex: 2, mask: true, maskInside: false }) // maskInside: true
|
||||
const layer = new ImageLayer({
|
||||
mask: true,
|
||||
maskInside: false,
|
||||
|
|
@ -73,7 +59,7 @@ export default class MaskPoints extends React.Component {
|
|||
maskColor: '#f00',
|
||||
});
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4UApTKmeiy4AAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
|
|
@ -88,22 +74,14 @@ export default class MaskPoints extends React.Component {
|
|||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,38 +1,34 @@
|
|||
import { LineLayer, Scene, MaskLayer, RasterLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
// @ts-ignore
|
||||
import { Scene, RasterLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
// 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return {
|
||||
data: values[0],
|
||||
width,
|
||||
height,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
};
|
||||
}
|
||||
|
||||
export default () => {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
private async getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
// 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return {
|
||||
data: values[0],
|
||||
width,
|
||||
height,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
};
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
useEffect( async () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -43,13 +39,12 @@ export default class MaskPoints extends React.Component {
|
|||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
|
||||
const tiffdata = await this.getTiffData();
|
||||
const tiffdata = await getTiffData();
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
|
|
@ -57,7 +52,6 @@ export default class MaskPoints extends React.Component {
|
|||
.then((res) => res.json())
|
||||
.then((maskData) => {
|
||||
const layer = new RasterLayer({ mask: true, maskfence: maskData });
|
||||
// const layer = new RasterLayer({ mask: true, maskInside: false });
|
||||
const mindata = -0;
|
||||
const maxdata = 8000;
|
||||
layer
|
||||
|
|
@ -91,22 +85,14 @@ export default class MaskPoints extends React.Component {
|
|||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,22 +1,11 @@
|
|||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
MaskLayer,
|
||||
PolygonLayer,
|
||||
PointLayer,
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Scene, PointLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
|
|||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
|
|
@ -55,7 +43,6 @@ export default class MaskPoints extends React.Component {
|
|||
};
|
||||
|
||||
scene.on('loaded', () => {
|
||||
// let points = new PointLayer({ zIndex: 2, mask: true, maskInside: false }) // maskInside: true
|
||||
let point1 = new PointLayer({
|
||||
zIndex: 1,
|
||||
mask: true,
|
||||
|
|
@ -85,7 +72,6 @@ export default class MaskPoints extends React.Component {
|
|||
})
|
||||
.active(true);
|
||||
|
||||
// let point2 = new PointLayer({ zIndex: 3, mask: false, maskInside: true })
|
||||
let point2 = new PointLayer({
|
||||
zIndex: 3,
|
||||
mask: true,
|
||||
|
|
@ -131,22 +117,14 @@ export default class MaskPoints extends React.Component {
|
|||
scene.render();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,22 +1,11 @@
|
|||
import {
|
||||
LineLayer,
|
||||
Scene,
|
||||
MaskLayer,
|
||||
PolygonLayer,
|
||||
PointLayer,
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Scene, PointLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default class MaskPoints extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
|
|
@ -26,7 +15,6 @@ export default class MaskPoints extends React.Component {
|
|||
zoom: 4,
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
|
|
@ -65,7 +53,6 @@ export default class MaskPoints extends React.Component {
|
|||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
// const pointLayer = new PointLayer({ mask: true })
|
||||
const pointLayer = new PointLayer({
|
||||
mask: true,
|
||||
maskInside: false,
|
||||
|
|
@ -95,22 +82,14 @@ export default class MaskPoints extends React.Component {
|
|||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
// @ts-ignore
|
||||
import { Scene, WindLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
map: new GaodeMap({
|
||||
center: [105.732421875, 32.24997445586331],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 2,
|
||||
}),
|
||||
});
|
||||
|
||||
const maskData = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'MultiPolygon',
|
||||
coordinates: [
|
||||
[
|
||||
[
|
||||
[125.15625000000001, 8.407168163601076],
|
||||
[116.54296874999999, -21.289374355860424],
|
||||
[156.26953125, -20.632784250388013],
|
||||
[150.29296875, 2.1088986592431382],
|
||||
],
|
||||
],
|
||||
[
|
||||
[
|
||||
[78.57421875, 46.92025531537451],
|
||||
[51.67968749999999, 37.020098201368114],
|
||||
[87.890625, 28.76765910569123],
|
||||
],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
scene.on('loaded', () => {
|
||||
const layer = new WindLayer({
|
||||
mask: true,
|
||||
maskInside: false,
|
||||
maskfence: maskData,
|
||||
});
|
||||
layer
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [-180, -85, 180, 85],
|
||||
},
|
||||
},
|
||||
)
|
||||
.animate(true)
|
||||
.style({
|
||||
uMin: -21.32,
|
||||
uMax: 26.8,
|
||||
vMin: -21.57,
|
||||
vMax: 21.42,
|
||||
numParticles: 35535,
|
||||
fadeOpacity: 0.996,
|
||||
sizeScale: 1.2,
|
||||
rampColors: {
|
||||
0.0: '#c6dbef',
|
||||
0.1: '#9ecae1',
|
||||
0.2: '#6baed6',
|
||||
0.3: '#4292c6',
|
||||
0.4: '#2171b5',
|
||||
0.5: '#084594',
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### heatmap
|
||||
<code src="./demos/heatmap.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### heatmapgrid
|
||||
<code src="./demos/heatmapgrid.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### heatmapgrid3d
|
||||
<code src="./demos/heatmapgrid3d.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### hexgon
|
||||
<code src="./demos/hexgon.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### image
|
||||
<code src="./demos/image.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### raster
|
||||
<code src="./demos/raster.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### singleMask
|
||||
<code src="./demos/singleMask.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### text
|
||||
<code src="./demos/text.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### wind
|
||||
<code src="./demos/wind.tsx"></code>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
### Arc Line
|
||||
<code src="./arcline.tsx"></code>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect( () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 66.02383,
|
||||
style: 'dark',
|
||||
center: [121.400257, 31.25287],
|
||||
zoom: 14.55,
|
||||
rotation: 134.9507,
|
||||
}),
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude',
|
||||
},
|
||||
})
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn',
|
||||
])
|
||||
.size('unit_price', (h) => {
|
||||
return [6, 6, 100];
|
||||
})
|
||||
.color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect( () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [121.107846, 30.267069],
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
zoom: 8,
|
||||
animateEnable: false,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({ depth: false })
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
},
|
||||
})
|
||||
.shape('cylinder') // cylinder triangleColumn hexagonColumn squareColumn
|
||||
.size('t', function(level) {
|
||||
return [1, 1, level * 2 + 20];
|
||||
})
|
||||
.active(true)
|
||||
.color('#0ff')
|
||||
.style({
|
||||
// opacity: 0.8,
|
||||
opacityLinear: {
|
||||
enable: true, // true - false
|
||||
dir: 'up', // up - down
|
||||
},
|
||||
lightEnable: false,
|
||||
// sourceColor: '#f00',
|
||||
// targetColor: "#0f0"
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect( () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 110, 36 ],
|
||||
style: 'light',
|
||||
zoom: 3
|
||||
})
|
||||
});
|
||||
|
||||
const fontFamily = 'iconfont';
|
||||
// 指定 iconfont 字体文件
|
||||
const fontPath =
|
||||
'//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
|
||||
// 全局添加资源
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
// 全局添加 iconfont 字段的映射;
|
||||
scene.addIconFont('icon1', '');
|
||||
|
||||
scene.on('loaded', () => {
|
||||
const imageLayer = new PointLayer()
|
||||
.source(
|
||||
[
|
||||
{
|
||||
j: 118.234433,
|
||||
w: 35.007936,
|
||||
icon: 'icon1',
|
||||
value: 10,
|
||||
name: 'AA',
|
||||
type: 'dibiaoshui',
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
},
|
||||
},
|
||||
)
|
||||
.color('#44ff00')
|
||||
.shape('icon', 'text')
|
||||
.size(30)
|
||||
.style({
|
||||
// textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
// textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, 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',
|
||||
);
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [121.4, 31.258134],
|
||||
zoom: 12,
|
||||
pitch: 0,
|
||||
style: 'normal',
|
||||
}),
|
||||
});
|
||||
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({
|
||||
blend: 'normal',
|
||||
})
|
||||
.source(newData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude',
|
||||
},
|
||||
})
|
||||
.shape('type', (v: any) => {
|
||||
return v;
|
||||
})
|
||||
.active(false)
|
||||
.size(20);
|
||||
scene.addLayer(imageLayer);
|
||||
imageLayer.on('mousedown', (e) => {
|
||||
console.log('mousedown', e);
|
||||
});
|
||||
imageLayer.on('click', (e) => {
|
||||
console.log('click', e);
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect( () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect( () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [110.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 2,
|
||||
}),
|
||||
});
|
||||
|
||||
const layer = new PointLayer()
|
||||
.source(
|
||||
[
|
||||
{
|
||||
lng: 120,
|
||||
lat: 30,
|
||||
t: 'text1',
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
},
|
||||
)
|
||||
.size(25)
|
||||
.color('#f00')
|
||||
.shape('radar')
|
||||
.animate(true)
|
||||
.active(true);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect( () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 110, 36 ],
|
||||
style: 'light',
|
||||
zoom: 3
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({ blend: 'additive' })
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('simple')
|
||||
.size(6)
|
||||
.color('#ff0')
|
||||
.style({
|
||||
opacity: 0.3
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
// @ts-ignore
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect( () => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 110, 36 ],
|
||||
style: 'light',
|
||||
zoom: 3
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('m', 'text')
|
||||
.size(12)
|
||||
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
|
||||
.style({
|
||||
// textAllowOverlap: true,
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
### GreatCircle Line
|
||||
<code src="./greatcircleline.tsx"></code>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
### 图片图层
|
||||
<code src="./image.tsx"></code>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
### point circle
|
||||
### point - circle
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
### point - column
|
||||
<code src="./demos/column.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### point - cylinder
|
||||
<code src="./demos/cylinder.tsx"></code>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
### point fillImage
|
||||
### point - fillImage
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
### Point - text - iconfont
|
||||
|
||||
#### iconfont
|
||||
<code src="./demos/iconfont.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### point - icons
|
||||
<code src="./demos/icons.tsx"></code>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
### point image
|
||||
### point - image
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
|
|
@ -6,12 +6,10 @@ import React, { useEffect } from 'react';
|
|||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'point_fillImage',
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
|
||||
center: [120, 30],
|
||||
pitch: 60,
|
||||
zoom: 14
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
### Point - normal
|
||||
<code src="./demos/normal.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### point - radar
|
||||
<code src="./demos/radar.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Point - simple
|
||||
<code src="./demos/simple.tsx"></code>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
### Point - text
|
||||
#### normal text
|
||||
<code src="./demos/text.tsx"></code>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
### point wave
|
||||
### point - wave
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
### Simple Line
|
||||
<code src="./simpleline.tsx"></code>
|
||||
|
|
@ -1,35 +1,26 @@
|
|||
import { PolygonLayer, Scene, LineLayer, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Amap2demo_polygon_extrude extends React.Component {
|
||||
private gui: dat.GUI;
|
||||
private $stats: Node;
|
||||
import {
|
||||
Scene,
|
||||
PolygonLayer,
|
||||
PointLayer,
|
||||
LineLayer,
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
// const response = await fetch(
|
||||
// // 'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
|
||||
// // 'https://gw.alipayobjects.com/os/basement_prod/619a6f16-ecb0-4fca-9f9a-b06b67f6f02b.json',
|
||||
// 'https://gw.alipayobjects.com/os/bmw-prod/93a55259-328e-4e8b-8dc2-35e05844ed31.json'
|
||||
// );
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
// map: new GaodeMapV2({
|
||||
// map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [120, 29.732983],
|
||||
zoom: 6.2,
|
||||
pitch: 60,
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
const wavePoints = new PointLayer({ zIndex: 2 })
|
||||
.source(
|
||||
|
|
@ -70,7 +61,6 @@ export default class Amap2demo_polygon_extrude extends React.Component {
|
|||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(wavePoints);
|
||||
// @ts-ignore
|
||||
let lineDown, lineUp, textLayer;
|
||||
|
||||
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
|
||||
|
|
@ -148,9 +138,6 @@ export default class Amap2demo_polygon_extrude extends React.Component {
|
|||
.size(150000)
|
||||
.shape('extrude')
|
||||
.color('#0DCCFF')
|
||||
// .active({
|
||||
// color: 'rgb(100,230,255)',
|
||||
// })
|
||||
.style({
|
||||
heightfixed: true,
|
||||
pickLight: true,
|
||||
|
|
@ -176,58 +163,16 @@ export default class Amap2demo_polygon_extrude extends React.Component {
|
|||
sidesurface: false,
|
||||
});
|
||||
scene.addLayer(provincelayerTop);
|
||||
|
||||
// provincelayer.on('mousemove', () => {
|
||||
// provincelayer.style({
|
||||
// raisingHeight: 200000 + 100000,
|
||||
// });
|
||||
// // @ts-ignore
|
||||
// lineDown.style({
|
||||
// raisingHeight: 200000 + 100000,
|
||||
// });
|
||||
// // @ts-ignore
|
||||
// lineUp.style({
|
||||
// raisingHeight: 200000 + 150000 + 100000,
|
||||
// });
|
||||
// // @ts-ignore
|
||||
// textLayer.style({
|
||||
// raisingHeight: 200000 + 150000 + 10000 + 100000,
|
||||
// });
|
||||
// });
|
||||
|
||||
// provincelayer.on('unmousemove', () => {
|
||||
// provincelayer.style({
|
||||
// raisingHeight: 200000,
|
||||
// });
|
||||
// // @ts-ignore
|
||||
// lineDown.style({
|
||||
// raisingHeight: 200000,
|
||||
// });
|
||||
// // @ts-ignore
|
||||
// lineUp.style({
|
||||
// raisingHeight: 200000 + 150000,
|
||||
// });
|
||||
// // @ts-ignore
|
||||
// textLayer.style({
|
||||
// raisingHeight: 200000 + 150000 + 10000,
|
||||
// });
|
||||
// });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
|
||||
import {
|
||||
Scene,
|
||||
PolygonLayer,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 40,
|
||||
center: [113.8623046875, 30.031055426540206],
|
||||
zoom: 7.5,
|
||||
}),
|
||||
});
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
testOpacity: 0.8,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
[113.8623046875, 30.031055426540206],
|
||||
[116.3232421875, 30.031055426540206],
|
||||
[116.3232421875, 31.090574094954192],
|
||||
[113.8623046875, 31.090574094954192],
|
||||
[113.8623046875, 30.031055426540206],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('red')
|
||||
.active(true)
|
||||
.style({
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene, Source } from '@antv/l7';
|
||||
import { PolygonLayer } from '@antv/l7-layers';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Demo extends React.Component {
|
||||
public async componentDidMount() {
|
||||
import {
|
||||
Scene,
|
||||
PolygonLayer,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
|
@ -46,20 +49,14 @@ export default class Demo extends React.Component {
|
|||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene, Source } from '@antv/l7';
|
||||
import { PolygonLayer } from '@antv/l7-layers';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Demo extends React.Component {
|
||||
public async componentDidMount() {
|
||||
import {
|
||||
Scene,
|
||||
PolygonLayer,
|
||||
// @ts-ignore
|
||||
} from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [120, 30],
|
||||
pitch: 0,
|
||||
zoom: 2,
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
const layer = new PolygonLayer()
|
||||
|
|
@ -27,8 +30,9 @@ export default class Demo extends React.Component {
|
|||
coordinates: [
|
||||
[
|
||||
[104.4140625, 35.460669951495305],
|
||||
[98.7890625, 24.206889622398023],
|
||||
[111.796875, 27.371767300523047],
|
||||
[114.4140625, 35.460669951495305],
|
||||
[114.4140625, 30.460669951495305],
|
||||
[104.4140625, 30.460669951495305],
|
||||
[104.4140625, 35.460669951495305],
|
||||
],
|
||||
],
|
||||
|
|
@ -47,20 +51,14 @@ export default class Demo extends React.Component {
|
|||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Polygon - extrude
|
||||
<code src="./demos/extrude.tsx"></code>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### Polygon - fill
|
||||
<code src="./demos/fill.tsx"></code>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue