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

针对MapVLayer 调用 当我们构建好类后，直接构建一个新的mapV包出来 那么名字我随意叫了 xxxx

• import { MapVLayer } from '@xxxx/mapV'
•  
• for(let item of r.features){
• heatPoint.push(
• {
• geometry: {
• type: 'Point',
• coordinates: [item.geometry.x,item.geometry.y]
• },
• count: 30 * Math.random(),
• time: 100 * Math.random()
•  
• }
• )
• }
• const mapvOption = {
•  
• fillStyle: 'rgba(55, 50, 250, 0.2)',
• globalCompositeOperation: "lighter",
• size: 15,
• maxSize: 10,
• max: 30,
• animation: {
• type: 'time',
• stepsRange: {
• start: 0,
• end: 100
• },
• trails: 10,
• duration: 5,
• },
• draw: 'simple'
•  
• }
•  
• let mavLayer1 = new MapVLayer(this.view, this.mapId,heatPoint,mapvOption);

针对mapV写法
```javascript

import { MapVRenderer } from "./MaVRenderer";

var defIndex = 0;

export class MapVLayer {

• /**
• *Creates an instance of MapVLayer.
• * @param {*} viewer
• * @param {*} dataset
• * @param {*} options
• * @param {*} container default viewer.container
• * @memberof MapVLayer
• */
• constructor(mapView, mapId ,dataset, options) {
• let viewer = mapView;
• this.mapId = mapId;
• this.map = viewer,
• // this.scene = viewer.scene,
• this.mapvBaseLayer = new MapVRenderer(viewer, dataset, options, this),
• this.mapVOptions = options,
• this.initDevicePixelRatio(),
• this.canvas = this._createCanvas(),
• this.render = this.render.bind(this);
• // if (container) {
• // this.container = container;
• // } else {
• // const inner = viewer.container.querySelector('.cesium-viewer-cesiumWidgetContainer')
• // this.container = inner ? inner : viewer.container;
• // }
• // this.addInnerContainer();
•  
• // void 0 != container ? (this.container = container,
• // container.appendChild(this.canvas)) : (this.container = viewer.container,
• // this.addInnerContainer()),
• this.bindEvent();
• this._reset();
• }
• initDevicePixelRatio() {
• this.devicePixelRatio = window.devicePixelRatio || 1
• }
• addInnerContainer() {
• this.container.appendChild(this.canvas)
• }
• bindEvent() {
• var that = this;
• let view = this.map;
• // this.innerMoveStart = this.moveStartEvent.bind(this);
• // this.innerMoveEnd = this.moveEndEvent.bind(this);
• //
• // view.on('pointer-down', this.innerMoveStart);
• // view.on('pointer-up', this.innerMoveEnd);
•  
• // this.scene.camera.moveStart.addEventListener(this.innerMoveStart, this);
• // this.scene.camera.moveEnd.addEventListener(this.innerMoveEnd, this);
• //
• // var t = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
• //
• // t.setInputAction(function (t) {
• // that.innerMoveEnd()
• // }, Cesium.ScreenSpaceEventType.LEFT_UP);
• // t.setInputAction(function (t) {
• // that.innerMoveEnd()
• // }, Cesium.ScreenSpaceEventType.MIDDLE_UP);
• // this.handler = t;
• that.map_ExtentChange_Listener = view.watch("extent,rotation", function () {
• that._reset();
•  
• });
• }
• unbindEvent() {
• if(this.map_ExtentChange_Listener){
• this.map_ExtentChange_Listener.remove();
• this.map_ExtentChange_Listener = null;
• }
• // this.scene.camera.moveStart.removeEventListener(this.innerMoveStart, this);
• // this.scene.camera.moveEnd.removeEventListener(this.innerMoveEnd, this);

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