arcgis 与 pixi.js 实现大数据量渲染 （一）

最近 前端要绘制数据量巨大的数据 不借助服务，我发现arcgis 绘制是有一定上限的， 算了下大概接近7万多个点已经不行了，所以只能另辟其他方法。 后面发现pixi.js 是基于webgl 渲染 还挺好用的。

首先 pixi.js 本身是2维的webgl，主要用于游戏，但是也够了，我本来地图用的就是mapView,我走的不是把pixi作为arcgis baselayer的方式 直接转换屏幕坐标去叠加一层canvas， 这样的好处就是 对于不同的地图引擎 都可以用，类似mapV这样子把

首先和arcgis 同步需要动态插入 一个pixi 创建的canvas 其中mapId 就是 arcgis div 的id ， view 就是arcgis 的map

• let mapContainerEl = document.getElementById( mapId );
• let app = new PIXI.Application({
• width:mapContainerEl.offsetWidth,
• height: mapContainerEl.offsetHeight,
• transparent:true
• });
• app.view.id = "pixi";
• surfaceElement.appendChild(app.view);
• document.getElementById("pixi").style = `position: absolute;left: 0px;top: 0px;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);padding: 0px;margin: 0px;border-width: 0px;`
• app.interactive = true;
• app.resizeTo = mapContainerEl;
• //当地图缩放时候 pixi.js 也可以跟随缩放
• view.watch('width,height',()=>{
• app.resize();
• });

`

关于坐标转换的方法 很好说 我们写个toScreen 方法 对于坐标我们统统转成墨卡托

```javascript

function toScreen(view, coordinate) {
let coordinateType = getXYType(coordinate[0],coordinate[1]);
let coordXY = getRealXY(view, coordinate[0],coordinate[1],coordinateType);
let item = {
x: coordXY.x,
y: coordXY.y,
spatialReference: view.spatialReference
};
let screenPoint = view.toScreen(item);
return screenPoint;
};

function getRealXY (view, x,y,xyType){

 

更多消息参考 https://xiaozhuanlan.com/topic/8406913257