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);

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