antv-l7/dev-demos/features/line/demos/lineArc3d.tsx

136 lines
3.4 KiB
TypeScript
Raw Normal View History

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>
2022-09-19 16:03:18 +08:00
// @ts-ignore
import {
LineLayer,
Scene,
PointLayer,
// @ts-ignore
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>
2022-09-19 16:03:18 +08:00
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import React, { useEffect } from 'react';
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>
2022-09-19 16:03:18 +08:00
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
2021-05-27 19:53:22 +08:00
map: new GaodeMap({
pitch: 40,
2021-04-26 15:23:42 +08:00
center: [3.438, 40.16797],
zoom: 0,
2021-05-27 19:53:22 +08:00
viewMode: '3D',
style: 'dark',
}),
});
scene.on('loaded', () => {
scene.addImage(
'plane',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
);
Promise.all([
2021-04-26 15:23:42 +08:00
fetch(
2022-01-25 16:11:59 +08:00
'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json',
2021-04-26 15:23:42 +08:00
).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
2021-04-26 15:23:42 +08:00
const flydata = eval(flyline).map((item) => {
// @ts-ignore
2021-04-26 15:23:42 +08:00
const latlng1 = item.from.split(',').map((e) => {
return e * 1;
});
// @ts-ignore
2021-04-26 15:23:42 +08:00
const latlng2 = item.to.split(',').map((e) => {
return e * 1;
});
return { coord: [latlng1, latlng2] };
});
2021-04-26 15:23:42 +08:00
const worldLine = new LineLayer()
.source(world)
.color('#41fc9d')
.size(0.5)
.style({
2021-04-26 15:23:42 +08:00
opacity: 0.4,
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
2021-04-26 15:23:42 +08:00
y: 'lat',
},
})
.shape('circle')
.color('#ffed11')
.animate(true)
.size(40)
.style({
2021-04-26 15:23:42 +08:00
opacity: 1.0,
});
2021-06-28 21:08:21 +08:00
const flyLine = new LineLayer({ blend: 'normal' })
.source(flydata, {
parser: {
type: 'json',
2021-04-26 15:23:42 +08:00
coordinates: 'coord',
},
})
.color('#ff6b34')
.texture('plane')
.shape('arc3d')
// .shape('arc')
.size(20)
// .active(true)
.animate({
duration: 10,
interval: 0.2,
trailLength: 0.05,
})
.style({
textureBlend: 'replace',
lineTexture: true, // 开启线的贴图功能
iconStep: 10, // 设置贴图纹理的间距
2021-04-26 15:23:42 +08:00
opacity: 1,
});
2021-06-28 21:08:21 +08:00
const flyLine2 = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord',
},
})
.color('#ff6b34')
.shape('arc3d')
// .shape('arc')
.size(1)
// .active(true)
.style({
lineType: 'dash',
dashArray: [5, 5],
2021-06-28 21:08:21 +08:00
opacity: 0.5,
});
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
2021-06-28 21:08:21 +08:00
scene.addLayer(flyLine2);
scene.addLayer(flyLine);
});
});
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>
2022-09-19 16:03:18 +08:00
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};