arcgis js 4 使用pixi.js 构建箭头导航线
我们来用pixi.js 来实现箭头导航线动画
首先数据结构定义 其中多了graph 相关就是拖尾运动sprite的设置
-
let option = {
-
renderer: {
-
type: "simple",
-
symbol: {
-
lineColor: "#ffff00",
-
lineWidth: 4,
-
arrowSize: 15,
-
}
-
},
-
data: [
-
{
-
geometry: [
-
[12610148.27932812, 2653758.051763372],
-
[13517124.081943521, 3656135.9369390993]
-
],
-
attributes: {
-
name: "深圳-上海",
-
}
-
},
-
{
-
geometry: [
-
[12958063.6570659, 4857420.273468611],
-
[12716675.521741385, 3593151.825632137]
-
],
-
attributes: {
-
name: "北京-武汉",
-
}
-
},
-
]
-
};
我们通过一些全局变量保存一些信息
-
// 动画id
-
this.raf;
-
// 存放导航线数组
-
this.graphics = [];
在初始的时候
```javascript
for (let i in data) {
let item = data[i];
//获取屏幕坐标
let geometry = item.geometry
let XY1 = toScreen(geometry[0]);
let XY2 = toScreen(geometry[1]);
-
//画箭头图形
-
let arrow = new PIXI.Graphics();
-
//获取线条颜色，粗细和箭头尺寸大小
-
let lineWidth = this.options.renderer.symbol.lineWidth,
-
lineColor = this.options.renderer.symbol.lineColor,
-
arrowSize = this.options.renderer.symbol.arrowSize;
更多参考 https://xiaozhuanlan.com/topic/4591260738
