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
