arcgis js 4 完美支持mapV ，动画也支持（一）

之前我也看过有人弄过mapv和arcgis结合，但是还是不太完美，对于部分效果是不支持的比如动画，因此我自己弄一个arcgis版本的mapV出来
首先我们这次不是做插件而是改造mapV，去github 把整个mapV 下下来，在mapV 构建两个类

首先是MapVRenderer.js 类
```javascript

import BaseLayer from "../../map/BaseLayer";
import DataSet from "../../data/DataSet";

export class MapVRenderer extends BaseLayer {

/**

Creates an instance of MapVRenderer.
@param {*} viewer cesium viewer
@param {*} dataset mapv dataset
@param {*} option mapvOptions
@param {*} mapVLayer
@memberof MapVRenderer
*/
constructor(viewer, dataset, option, mapVLayer) {
super(viewer, dataset, option)
if (!BaseLayer) {
return;
}
this.map = viewer,
// this.scene = viewer.scene,
this.dataSet = new DataSet(dataset);
option = option || {},
this.init(option),
this.argCheck(option),
this.initDevicePixelRatio(),
this.canvasLayer = mapVLayer,
this.stopAniamation = !1,
this.animation = option.animation,
this.clickEvent = this.clickEvent.bind(this),
this.mousemoveEvent = this.mousemoveEvent.bind(this),
this.bindEvent()
}
initDevicePixelRatio() {
this.devicePixelRatio = window.devicePixelRatio || 1
}
clickEvent(t) {
var e = t.point;
super.clickEvent(e, t)
}
mousemoveEvent(t) {
var e = t.point;
super.mousemoveEvent(e, t)
}
addAnimatorEvent() { }
animatorMovestartEvent() {
var t = this.options.animation;
this.isEnabledTime() && this.animator && (this.steps.step = t.stepsRange.start)
}
animatorMoveendEvent() {
this.isEnabledTime() && this.animator
}
bindEvent() {
this.map;
this.options.methods && (this.options.methods.click,
this.options.methods.mousemove)
}
unbindEvent() {
var t = this.map;
this.options.methods && (this.options.methods.click && t.off("click", this.clickEvent),
this.options.methods.mousemove && t.off("mousemove", this.mousemoveEvent))
}
getContext() {
return this.canvasLayer.canvas.getContext(this.context)
}
init(t) {
this.options = t,
this.initDataRange(t),
this.context = this.options.context || "2d",
this.options.zIndex && this.canvasLayer && this.canvasLayer.setZIndex(this.options.zIndex),
this.initAnimator()
}
_canvasUpdate(t) {
this.map;
let view = this.map;
var e = this.scene;
if (this.canvasLayer && !this.stopAniamation) {
var i = this.options.animation
, n = this.getContext();
if (this.isEnabledTime()) {
if (void 0 === t)
return void this.clear(n);
"2d" === this.context && (n.save(),
n.globalCompositeOperation = "destination-out",
n.fillStyle = "rgba(0, 0, 0, .1)",
n.fillRect(0, 0, n.canvas.width, n.canvas.height),
n.restore())
} else
this.clear(n);
if ("2d" === this.context)
for (var o in this.options)
n[o] = this.options[o];
else
n.clear(n.COLOR_BUFFER_BIT);
var a = {
transferCoordinate: (t)=> {
debugger
let coordinateType = this.getXYType(t[0],t[1]);
let coordXY = this.getRealXY(t[0],t[1],coordinateType);
let mapPoint = {
x: coordXY.x,
y: coordXY.y,
spatialReference: view.spatialReference
};
let screenPoint = view.toScreen(mapPoint);
return void 0 == n ? [-1, -1] : [screenPoint.x, screenPoint.y]
}
};
void 0 !== t && (a.filter = function (e) {
var n = i.trails || 10;
return !!(t && e.time > t - n && e.time < t)
}
);
var c = this.dataSet.get(a);