引入风场数据
执行风场
testftn() {
//wind-laryer运行风场
const windOptions = {
colorScale: [
"rgb(36,255, 180)",
"rgb(60,157, 194)",
"rgb(128,205,193 )",
"rgb(151,218,168 )",
"rgb(198,231,181)",
"rgb(238,247,217)",
"rgb(255,238,159)",
"rgb(252,217,125)",
"rgb(255,182,100)",
"rgb(252,150,75)",
"rgb(250,112,52)",
"rgb(245,64,32)",
"rgb(237,45,28)",
"rgb(220,24,32)",
"rgb(180,0,35)",
],
maxAge: 10,
frameRate: 9,
globalAlpha: 0.9,
velocityScale: 1 / 30,
paths: 100,
};
const windLaryer = new CesiumWind(windjson, windOptions);
windLaryer.addTo(window.viewer);
windy = new Windy(windjson, window.viewer);
},
风场数据代码格式
加载CesiumWind.js
import WindCore, {assign, defaultOptions, Field, formatData, isArray, removeDomNode,} from 'wind-core'
class CesiumWind {
constructor(data, options = {}) {
this.canvas = null;
this.wind = null;
this.field = null;
this.viewer = null;
this.options = assign({}, options);
this.pickWindOptions();
const canvas = document.createElement('canvas');
canvas.style.cssText =
'position:absolute; left:0; top:0;user-select:none;pointer-events: none;';
canvas.className = 'cesium-wind-j';
this.canvas = canvas;
if (data) {
this.setData(data);
}
}
addTo(viewer) {
this.viewer = viewer;
this.appendCanvas();
this.render(this.canvas);
}
remove() {
if (!this.viewer) {
return;
}
if (this.wind) {
this.wind.stop();
}
if (this.canvas) {
removeDomNode(this.canvas);
}
delete this.canvas;
}
removeLayer() {
this.remove();
}
setData(data) {
if (data && data.checkFields && data.checkFields()) {
this.field = data;
} else if (isArray(data)) {
this.field = formatData(data);
} else {
console.error('Illegal data');
}
if (this.viewer && this.canvas && this.field) {
this.wind.updateData(this.field);
this.appendCanvas();
this.render(this.canvas);
}
return this;
}
getData() {
return this.field;
}
getWindOptions() {
return this.options.windOptions || {};
}
pickWindOptions() {
Object.keys(defaultOptions).forEach((key) => {
if (key in this.options) {
if (this.options.windOptions === undefined) {
this.options.windOptions = {};
}
this.options.windOptions[key] = this.options[key];
}
});
}
getContext() {
if (this.canvas === null) {
return;
}
return this.canvas.getContext('2d');
}
appendCanvas() {
if (!this.viewer || !this.canvas) {
return;
}
if (document.querySelector('.cesium-wind-j')) {
return;
}
this.adjustSize();
const cesiumWidget = this.viewer.canvas.parentNode;
cesiumWidget.appendChild(this.canvas);
}
adjustSize() {
const viewer = this.viewer;
const canvas = this.canvas;
const {width, height} = viewer.canvas;
const devicePixelRatio = 1;
canvas.width = width * devicePixelRatio;
canvas.height = height * devicePixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
}
render(canvas) {
if (!this.getData() || !this.viewer) {
return this;
}
const opt = this.getWindOptions();
if (canvas && !this.wind) {
const data = this.getData();
const ctx = this.getContext();
if (ctx) {
this.wind = new WindCore(ctx, opt, data);
this.wind.project = this.project.bind(this);
this.wind.unproject = this.unproject.bind(this);
this.wind.intersectsCoordinate = this.intersectsCoordinate.bind(this);
this.wind.postrender = () => {
};
}
}
if (this.wind) {
this.wind.prerender();
this.wind.render();
}
return this;
}
project(coordinate) {
const position = Cesium.Cartesian3.fromDegrees(
coordinate[0],
coordinate[1],
);
const scene = this.viewer.scene;
const sceneCoor = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
scene,
position,
);
return [sceneCoor.x, sceneCoor.y];
}
unproject(pixel) {
const viewer = this.viewer;
const pick = new Cesium.Cartesian2(pixel[0], pixel[1]);
const cartesian = viewer.scene.globe.pick(
viewer.camera.getPickRay(pick),
viewer.scene,
);
if (!cartesian) {
return null;
}
const ellipsoid = viewer.scene.globe.ellipsoid;
const cartographic = ellipsoid.cartesianToCartographic(cartesian);
const lat = Cesium.Math.toDegrees(cartographic.latitude);
const lng = Cesium.Math.toDegrees(cartographic.longitude);
return [lng, lat];
}
intersectsCoordinate(coordinate) {
const ellipsoid = Cesium.Ellipsoid.WGS84;
const camera = this.viewer.camera;
const occluder = new Cesium.EllipsoidalOccluder(ellipsoid, camera.position);
const point = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]);
return occluder.isPointVisible(point);
}
}
const WindLayer = CesiumWind;
export {Field, WindLayer};
export default CesiumWind;
一起学习ceisum,vue引入cesium,geojson数据格式,cesium展示特效,服务发布等,关注微信公众号 D6668Lei