@vtx/cs-map
Version:
React components for Vortex
453 lines (437 loc) • 20.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CesiumHeatmap = void 0;
var _cesium = require("cesium");
var _heatmap = _interopRequireDefault(require("./heatmap.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
function set(target, property, value, receiver) { if (typeof Reflect !== "undefined" && Reflect.set) { set = Reflect.set; } else { set = function set(target, property, value, receiver) { var base = _superPropBase(target, property); var desc; if (base) { desc = Object.getOwnPropertyDescriptor(base, property); if (desc.set) { desc.set.call(receiver, value); return true; } else if (!desc.writable) { return false; } } desc = Object.getOwnPropertyDescriptor(receiver, property); if (desc) { if (!desc.writable) { return false; } desc.value = value; Object.defineProperty(receiver, property, desc); } else { _defineProperty(receiver, property, value); } return true; }; } return set(target, property, value, receiver); }
function _set(target, property, value, receiver, isStrict) { var s = set(target, property, value, receiver || target); if (!s && isStrict) { throw new TypeError('failed to set property'); } return value; }
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
//只能使用2.0.0版本，高版本热度图有出不来的情况，并且2.0.0 npm包有问题，只能通过修改使用这个js
var Max = function Max(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
max = arr[len] > max ? arr[len] : max;
}
return max;
};
var Min = function Min(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
min = arr[len] < min ? arr[len] : min;
}
return min;
};
/**
* 热度图
*/
var CesiumHeatmap = exports.CesiumHeatmap = /*#__PURE__*/function () {
function CesiumHeatmap(viewer, options) {
var _this$initOptions;
_classCallCheck(this, CesiumHeatmap);
_defineProperty(this, "viewer", void 0);
_defineProperty(this, "element", void 0);
_defineProperty(this, "initOptions", void 0);
_defineProperty(this, "heatmapOptions", void 0);
_defineProperty(this, "heatmapDataOptions", void 0);
_defineProperty(this, "provider", void 0);
_defineProperty(this, "heatmap", void 0);
_defineProperty(this, "cameraMoveEnd", void 0);
_defineProperty(this, "bounds", [0, 0, 0, 0]);
_defineProperty(this, "lastCameraHeight", 0);
this.viewer = viewer;
var key = options.key,
name = options.name,
layerControl = options.layerControl,
show = options.show,
_options$initRadius = options.initRadius,
initRadius = _options$initRadius === void 0 ? 10 : _options$initRadius;
this.initOptions = _objectSpread({}, options);
// 图层标识
this.key = key;
// this.initRadius = initRadius;
// 图层名称
this.name = name;
this.layerControl = layerControl;
_set(_getPrototypeOf(CesiumHeatmap.prototype), "show", show, this, true);
if ((_this$initOptions = this.initOptions) !== null && _this$initOptions !== void 0 && (_this$initOptions = _this$initOptions.points) !== null && _this$initOptions !== void 0 && _this$initOptions.length) {
var _this$initOptions2, _this$heatmapOptions;
var bounds = this.getBounds(this.initOptions.points);
this.bounds = bounds;
var _this$createContainer = this.createContainer(bounds),
container = _this$createContainer.container,
width = _this$createContainer.width,
height = _this$createContainer.height;
this.element = container;
var datas = [];
var values = [];
for (var i in this.initOptions.points) {
var point = this.initOptions.points[i];
var x = (point.x - bounds[0]) / (bounds[2] - bounds[0]) * width; //屏幕坐标x
var y = (bounds[3] - point.y) / (bounds[3] - bounds[1]) * height; //屏幕坐标y
var dataPoint = {
x: x,
y: y,
value: point.value
};
if (typeof point.value === 'number') values.push(point.value);
datas.push(dataPoint);
}
//数据的最大值和最小值
var _min = values.length > 100000 ? Min(values) : Math.min.apply(Math, values);
var _max = values.length > 100000 ? Max(values) : Math.max.apply(Math, values);
if ((_this$initOptions2 = this.initOptions) !== null && _this$initOptions2 !== void 0 && _this$initOptions2.heatmapDataOptions) {
var _this$initOptions$hea = this.initOptions.heatmapDataOptions,
min = _this$initOptions$hea.min,
max = _this$initOptions$hea.max;
if (typeof min === 'number') {
_min = min;
}
if (typeof max === 'number') {
_max = max;
}
}
this.heatmapDataOptions = {
min: _min,
max: _max
};
var data = {
max: _max,
min: _min,
data: datas
};
var defaultOptions = {
maxOpacity: 0.9,
// radius: minRadius,
// minimum opacity. any value > 0 will produce
// no transparent gradient transition
minOpacity: 0.1,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'.3': 'blue',
'.5': 'green',
'.7': 'yellow',
'.95': 'red'
}
};
var _options = this.initOptions.heatmapOptions ? _objectSpread(_objectSpread({}, defaultOptions), this.initOptions.heatmapOptions) : defaultOptions;
this.heatmapOptions = _objectSpread({}, _options);
//初始化半径
if ((_this$heatmapOptions = this.heatmapOptions) !== null && _this$heatmapOptions !== void 0 && _this$heatmapOptions.radius) {
this.initRadius = this.heatmapOptions.radius || 10;
}
var optionsData = _objectSpread(_objectSpread({}, _options), {}, {
container: container
});
if (options.initRadius) {
optionsData.radius = options.initRadius;
}
this.heatmap = _heatmap["default"].create(optionsData);
this.heatmap.setData(data);
this.createLayer();
if (!this.initOptions.noLisenerCamera) {
this.addLisener();
}
if (this.initOptions.zoomToLayer && bounds) {
this.viewer.camera.flyTo({
destination: _cesium.Rectangle.fromDegrees.apply(_cesium.Rectangle, _toConsumableArray(bounds))
});
}
}
}
// 重写父类的属性访问器
_createClass(CesiumHeatmap, [{
key: "show",
get: function get() {
return _get(_getPrototypeOf(CesiumHeatmap.prototype), "show", this);
},
set: function set(value) {
this.setVisible(value);
}
// 获取地图
}, {
key: "getMap",
value: function getMap() {
return this.viewer;
}
// 设置图层显示隐藏
}, {
key: "setVisible",
value: function setVisible(visible) {
_set(_getPrototypeOf(CesiumHeatmap.prototype), "show", visible, this, true);
this.provider.show = visible; // 将属性传递给父类
var map = this.getMap && this.getMap();
if (map) {
map.layers.emit('visible', this, visible);
}
}
/**
* 设置数据的最大最小值
* @param dataOption
*/
}, {
key: "updateHeatMapMaxMin",
value: function updateHeatMapMaxMin(dataOption) {
var min = dataOption.min,
max = dataOption.max;
if (this.heatmap) {
if (typeof min === 'number') {
this.heatmap.setDataMin(min);
if (this.heatmapDataOptions) this.heatmapDataOptions.min = min;
}
if (typeof max === 'number') {
this.heatmap.setDataMax(max);
if (this.heatmapDataOptions) this.heatmapDataOptions.max = max;
}
}
this.updateLayer();
}
/**
* 更新热度图配置
* @param options
*/
}, {
key: "updateHeatmap",
value: function updateHeatmap(options) {
var heatmapOptions = this.heatmapOptions;
this.heatmap.configure(_objectSpread(_objectSpread({}, heatmapOptions), options));
this.updateLayer();
}
/**
* 更新半径
* @param radius
*/
}, {
key: "updateRadius",
value: function updateRadius(radius) {
var _this$initOptions3;
var heatmapOptions = this.heatmapOptions;
var currentData = this.heatmap.getData();
if (currentData !== null && currentData !== void 0 && currentData.data) {
for (var i in currentData.data) {
var data = currentData.data[i];
data.radius = radius;
}
}
this.heatmap.setData(currentData);
this.heatmapOptions = _objectSpread(_objectSpread({}, heatmapOptions), {
radius: radius
});
this.updateLayer();
if ((_this$initOptions3 = this.initOptions) !== null && _this$initOptions3 !== void 0 && _this$initOptions3.onRadiusChange) {
this.initOptions.onRadiusChange(radius);
}
}
/**
* 移除
*/
}, {
key: "remove",
value: function remove() {
if (this.element) {
document.body.removeChild(this.element);
this.element = undefined;
if (this.provider instanceof _cesium.ImageryLayer) {
if (this.provider) this.viewer.imageryLayers.remove(this.provider);
this.createSingleTileImageryLayer();
} else if (this.provider instanceof _cesium.Primitive) {
this.viewer.scene.primitives.remove(this.provider);
} else if (this.provider instanceof _cesium.CustomDataSource) {
this.viewer.dataSources.remove(this.provider);
} else if (this.provider instanceof _cesium.Entity) {
this.viewer.entities.remove(this.provider);
}
if (this.cameraMoveEnd) {
this.viewer.camera.moveEnd.removeEventListener(this.cameraMoveEnd);
this.cameraMoveEnd = undefined;
}
}
}
}, {
key: "createLayer",
value: function createLayer() {
var _this = this;
if (this.initOptions.renderType === 'primitive') {
this.createPrimitive();
} else if (this.initOptions.renderType === 'imagery') {
this.createSingleTileImageryLayer();
} else {
this.createEntity();
}
this.provider.key = this.key;
this.provider.name = this.name;
this.provider.show = this.show;
this.provider.setVisible = function (visible) {
_this.setVisible(visible);
};
}
}, {
key: "createPrimitive",
value: function createPrimitive() {
var url = this.heatmap.getDataURL();
this.provider = this.viewer.scene.primitives.add(new _cesium.Primitive({
geometryInstances: new _cesium.GeometryInstance({
geometry: new _cesium.RectangleGeometry({
rectangle: _cesium.Rectangle.fromDegrees.apply(_cesium.Rectangle, _toConsumableArray(this.bounds)),
vertexFormat: _cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
}),
appearance: new _cesium.EllipsoidSurfaceAppearance({
aboveGround: false
}),
show: this.show
}));
if (this.provider) {
this.provider.appearance.material = new _cesium.Material({
fabric: {
type: 'Image',
uniforms: {
image: url
}
}
});
}
}
}, {
key: "createSingleTileImageryLayer",
value: function createSingleTileImageryLayer() {
var url = this.heatmap.getDataURL();
this.provider = this.viewer.imageryLayers.addImageryProvider(new _cesium.SingleTileImageryProvider({
url: url,
rectangle: _cesium.Rectangle.fromDegrees.apply(_cesium.Rectangle, _toConsumableArray(this.bounds))
}));
}
}, {
key: "getImageMaterialProperty",
value: function getImageMaterialProperty() {
var url = this.heatmap.getDataURL();
var material = new _cesium.ImageMaterialProperty({
image: url
});
return material;
}
}, {
key: "createEntity",
value: function createEntity() {
this.provider = new _cesium.CustomDataSource(this.name);
this.provider.entities.add({
show: true,
rectangle: {
coordinates: _cesium.Rectangle.fromDegrees.apply(_cesium.Rectangle, _toConsumableArray(this.bounds)),
material: this.getImageMaterialProperty()
}
});
this.viewer.dataSources.add(this.provider);
}
}, {
key: "updateLayer",
value: function updateLayer() {
var src = this.heatmap.getDataURL();
if (this.provider instanceof _cesium.ImageryLayer) {
if (this.provider) this.viewer.imageryLayers.remove(this.provider);
this.createSingleTileImageryLayer();
} else if (this.provider instanceof _cesium.Primitive) {
this.provider.appearance.material.uniforms.image = src;
} else if (this.provider instanceof _cesium.Entity) {
if (this.provider.rectangle) this.provider.rectangle.material = this.getImageMaterialProperty();
} else if (this.provider instanceof _cesium.CustomDataSource) {
this.viewer.dataSources.remove(this.provider);
this.createEntity();
}
}
/**
* 添加相机的监听
*/
}, {
key: "addLisener",
value: function addLisener() {
var _this2 = this;
var maxRadius = 100;
var min = 6375000;
var max = 10000000;
this.cameraMoveEnd = function () {
if (_this2.heatmapOptions && _this2.heatmap && _this2.heatmapDataOptions) {
var _this2$initOptions;
var h = _this2.viewer.camera.getMagnitude();
var distance = _this2 !== null && _this2 !== void 0 && (_this2$initOptions = _this2.initOptions) !== null && _this2$initOptions !== void 0 && _this2$initOptions.cameraHeightDistance ? _this2.initOptions.cameraHeightDistance : 1000;
if (Math.abs(h - _this2.lastCameraHeight) > distance) {
_this2.lastCameraHeight = h;
if (typeof min === 'number' && typeof max === 'number') {
var radius = parseInt((_this2.initRadius + (maxRadius - _this2.initRadius) * (h - min) / (max - min)).toFixed(0));
if (radius) {
_this2.updateRadius(radius);
}
}
}
}
};
this.viewer.camera.moveEnd.addEventListener(this.cameraMoveEnd);
}
/**
*
* @param points
* @param expand
* @returns
*/
}, {
key: "getBounds",
value: function getBounds(points) {
if (points) {
var lonMin = 180;
var lonMax = -180;
var latMin = 90;
var latMax = -180;
points.forEach(function (point) {
var longitude = point.x,
latitude = point.y;
lonMin = longitude < lonMin ? longitude : lonMin;
latMin = latitude < latMin ? latitude : latMin;
lonMax = longitude > lonMax ? longitude : lonMax;
latMax = latitude > latMax ? latitude : latMax;
});
var xRange = lonMax - lonMin ? lonMax - lonMin : 1;
var yRange = latMax - latMin ? latMax - latMin : 1;
return [lonMin - xRange / 10, latMin - yRange / 10, lonMax + xRange / 10, latMax + yRange / 10];
}
return [0, 0, 0, 0];
}
}, {
key: "createContainer",
value: function createContainer(bounds) {
var container = document.createElement('div');
var width = 1000;
var height = parseInt((1000 / (bounds[2] - bounds[0]) * (bounds[3] - bounds[1])).toFixed(0));
container.setAttribute('style', "width:".concat(width, "px;height:").concat(height, "px;display:none;"));
document.body.appendChild(container);
return {
container: container,
width: width,
height: height
};
}
}]);
return CesiumHeatmap;
}();
//# sourceMappingURL=CesiumHeatmap.js.map