针对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