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