854 lines
33 KiB
JavaScript
854 lines
33 KiB
JavaScript
|
/*!
|
||
|
|
* author: sakitam-fdd <smilefdd@gmail.com>
|
||
|
|
* ol3-echarts v2.0.5
|
||
|
|
* build-time: 2022-1-6 15:31
|
||
|
|
* LICENSE: MIT
|
||
|
|
* (c) 2017-2022 https://sakitam-fdd.github.io/ol3Echarts
|
||
|
|
*/
|
||
|
|
(function (global, factory) {
|
||
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('openlayers'), require('echarts')) :
|
||
|
|
typeof define === 'function' && define.amd ? define(['openlayers', 'echarts'], factory) :
|
||
|
|
(global = global || self, global.ol3Echarts = factory(global.ol, global.echarts));
|
||
|
|
}(this, function (ol, echarts) { 'use strict';
|
||
|
|
|
||
|
|
ol = ol && ol.hasOwnProperty('default') ? ol['default'] : ol;
|
||
|
|
echarts = echarts && echarts.hasOwnProperty('default') ? echarts['default'] : echarts;
|
||
|
|
|
||
|
|
/*! *****************************************************************************
|
||
|
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
||
|
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||
|
|
this file except in compliance with the License. You may obtain a copy of the
|
||
|
|
License at http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
|
||
|
|
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||
|
|
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||
|
|
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||
|
|
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||
|
|
|
||
|
|
See the Apache Version 2.0 License for specific language governing permissions
|
||
|
|
and limitations under the License.
|
||
|
|
***************************************************************************** */
|
||
|
|
/* global Reflect, Promise */
|
||
|
|
|
||
|
|
var extendStatics = function(d, b) {
|
||
|
|
extendStatics = Object.setPrototypeOf ||
|
||
|
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||
|
|
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||
|
|
return extendStatics(d, b);
|
||
|
|
};
|
||
|
|
|
||
|
|
function __extends(d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
}
|
||
|
|
|
||
|
|
var isObject = function (value) {
|
||
|
|
var type = typeof value;
|
||
|
|
return value !== null && (type === 'object' || type === 'function');
|
||
|
|
};
|
||
|
|
var merge = function (a, b) {
|
||
|
|
Object.keys(b).forEach(function (key) {
|
||
|
|
if (isObject(b[key]) && isObject(a[key])) {
|
||
|
|
merge(a[key], b[key]);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
a[key] = b[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return a;
|
||
|
|
};
|
||
|
|
var bind = function (func, context) {
|
||
|
|
var arguments$1 = arguments;
|
||
|
|
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 2; _i < arguments.length; _i++) {
|
||
|
|
args[_i - 2] = arguments$1[_i];
|
||
|
|
}
|
||
|
|
return function () {
|
||
|
|
var arguments$1 = arguments;
|
||
|
|
|
||
|
|
var innerArgs = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
innerArgs[_i] = arguments$1[_i];
|
||
|
|
}
|
||
|
|
return func.apply(context, args.concat(Array.prototype.slice.call(innerArgs)));
|
||
|
|
};
|
||
|
|
};
|
||
|
|
var arrayAdd = function (array, item) {
|
||
|
|
var i = 0;
|
||
|
|
var index;
|
||
|
|
var length = array.length;
|
||
|
|
for (; i < length; i++) {
|
||
|
|
if (array[i].index === item.index) {
|
||
|
|
index = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (index === undefined) {
|
||
|
|
array.push(item);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
array[index] = item;
|
||
|
|
}
|
||
|
|
return array;
|
||
|
|
};
|
||
|
|
var uuid = function () {
|
||
|
|
function rd(a) {
|
||
|
|
return a ? (a ^ Math.random() * 16 >> a / 4).toString(16)
|
||
|
|
: ([1e7] + -[1e3] + -4e3 + -8e3 + -1e11).replace(/[018]/g, rd);
|
||
|
|
}
|
||
|
|
return rd();
|
||
|
|
};
|
||
|
|
function bindAll(fns, context) {
|
||
|
|
fns.forEach(function (fn) {
|
||
|
|
if (!context[fn]) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
context[fn] = context[fn].bind(context);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function removeNode(node) {
|
||
|
|
return node && node.parentNode ? node.parentNode.removeChild(node) : null;
|
||
|
|
}
|
||
|
|
function mockEvent(type, event) {
|
||
|
|
var e = new MouseEvent(type, {
|
||
|
|
bubbles: true,
|
||
|
|
cancelable: true,
|
||
|
|
button: event.pointerEvent.button,
|
||
|
|
buttons: event.pointerEvent.buttons,
|
||
|
|
clientX: event.pointerEvent.clientX,
|
||
|
|
clientY: event.pointerEvent.clientY,
|
||
|
|
zrX: event.pointerEvent.offsetX,
|
||
|
|
zrY: event.pointerEvent.offsetY,
|
||
|
|
movementX: event.pointerEvent.movementX,
|
||
|
|
movementY: event.pointerEvent.movementY,
|
||
|
|
relatedTarget: event.pointerEvent.relatedTarget,
|
||
|
|
screenX: event.pointerEvent.screenX,
|
||
|
|
screenY: event.pointerEvent.screenY,
|
||
|
|
view: window,
|
||
|
|
});
|
||
|
|
e.zrX = event.pointerEvent.offsetX;
|
||
|
|
e.zrY = event.pointerEvent.offsetY;
|
||
|
|
e.event = e;
|
||
|
|
return e;
|
||
|
|
}
|
||
|
|
|
||
|
|
var checkDecoded = function (json) { return !json.UTF8Encoding; };
|
||
|
|
var decodePolygon = function (coordinate, encodeOffsets, encodeScale) {
|
||
|
|
var result = [];
|
||
|
|
var _a = [encodeOffsets[0], encodeOffsets[1]], prevX = _a[0], prevY = _a[1];
|
||
|
|
for (var i = 0; i < coordinate.length; i += 2) {
|
||
|
|
var x = coordinate.charCodeAt(i) - 64;
|
||
|
|
var y = coordinate.charCodeAt(i + 1) - 64;
|
||
|
|
x = (x >> 1) ^ -(x & 1);
|
||
|
|
y = (y >> 1) ^ -(y & 1);
|
||
|
|
x += prevX;
|
||
|
|
y += prevY;
|
||
|
|
prevX = x;
|
||
|
|
prevY = y;
|
||
|
|
result.push([x / encodeScale, y / encodeScale]);
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
var decode = function (json) {
|
||
|
|
if (checkDecoded(json)) {
|
||
|
|
return json;
|
||
|
|
}
|
||
|
|
var encodeScale = json.UTF8Scale;
|
||
|
|
if (encodeScale == null) {
|
||
|
|
encodeScale = 1024;
|
||
|
|
}
|
||
|
|
var features = json.features;
|
||
|
|
for (var f = 0; f < features.length; f++) {
|
||
|
|
var feature = features[f];
|
||
|
|
var geometry = feature.geometry;
|
||
|
|
var _a = [geometry.coordinates, geometry.encodeOffsets], coordinates = _a[0], encodeOffsets = _a[1];
|
||
|
|
for (var c = 0; c < coordinates.length; c++) {
|
||
|
|
var coordinate = coordinates[c];
|
||
|
|
if (geometry.type === 'Polygon') {
|
||
|
|
coordinates[c] = decodePolygon(coordinate, encodeOffsets[c], encodeScale);
|
||
|
|
}
|
||
|
|
else if (geometry.type === 'MultiPolygon') {
|
||
|
|
for (var c2 = 0; c2 < coordinate.length; c2++) {
|
||
|
|
var polygon = coordinate[c2];
|
||
|
|
coordinate[c2] = decodePolygon(polygon, encodeOffsets[c][c2], encodeScale);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
json.UTF8Encoding = false;
|
||
|
|
return json;
|
||
|
|
};
|
||
|
|
function formatGeoJSON (json) {
|
||
|
|
var geoJson = decode(json);
|
||
|
|
var _features = echarts.util.map(echarts.util.filter(geoJson.features, function (featureObj) {
|
||
|
|
return featureObj.geometry && featureObj.properties && featureObj.geometry.coordinates.length > 0;
|
||
|
|
}), function (featureObj) {
|
||
|
|
var properties = featureObj.properties;
|
||
|
|
var geo = featureObj.geometry;
|
||
|
|
var coordinates = geo.coordinates;
|
||
|
|
var geometries = [];
|
||
|
|
if (geo.type === 'Polygon') {
|
||
|
|
geometries.push(coordinates[0]);
|
||
|
|
}
|
||
|
|
if (geo.type === 'MultiPolygon') {
|
||
|
|
echarts.util.each(coordinates, function (item) {
|
||
|
|
if (item[0]) {
|
||
|
|
geometries.push(item[0]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
properties: properties,
|
||
|
|
type: 'Feature',
|
||
|
|
geometry: {
|
||
|
|
type: 'Polygon',
|
||
|
|
coordinates: geometries,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
type: 'FeatureCollection',
|
||
|
|
crs: {},
|
||
|
|
features: _features,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var pie = function (_options, serie, coordinateSystem) {
|
||
|
|
serie.center = coordinateSystem.dataToPoint(serie.coordinates);
|
||
|
|
return serie;
|
||
|
|
};
|
||
|
|
|
||
|
|
var bar = function (options, serie, coordinateSystem) {
|
||
|
|
if (isObject(options.grid) && !Array.isArray(options.grid)) {
|
||
|
|
console.log(options);
|
||
|
|
}
|
||
|
|
else if (Array.isArray(options.grid)) {
|
||
|
|
options.grid = options.grid.map(function (gri, index) {
|
||
|
|
var coorPixel = coordinateSystem.dataToPoint(options.series[index].coordinates);
|
||
|
|
gri.left = coorPixel[0] - parseFloat(gri.width) / 2;
|
||
|
|
gri.top = coorPixel[1] - parseFloat(gri.height) / 2;
|
||
|
|
return gri;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return serie;
|
||
|
|
};
|
||
|
|
|
||
|
|
var line = function (options, serie, coordinateSystem) {
|
||
|
|
if (isObject(options.grid) && !Array.isArray(options.grid)) {
|
||
|
|
console.log(options);
|
||
|
|
}
|
||
|
|
else if (Array.isArray(options.grid)) {
|
||
|
|
options.grid = options.grid.map(function (gri, index) {
|
||
|
|
var coorPixel = coordinateSystem.dataToPoint(options.series[index].coordinates);
|
||
|
|
gri.left = coorPixel[0] - parseFloat(gri.width) / 2;
|
||
|
|
gri.top = coorPixel[1] - parseFloat(gri.height) / 2;
|
||
|
|
return gri;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return serie;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var charts = /*#__PURE__*/Object.freeze({
|
||
|
|
pie: pie,
|
||
|
|
bar: bar,
|
||
|
|
line: line
|
||
|
|
});
|
||
|
|
|
||
|
|
var Map = ol.Map;
|
||
|
|
var obj = ol.Object;
|
||
|
|
var transform = ol.proj.transform;
|
||
|
|
if (!Map.prototype.getOverlayContainer) {
|
||
|
|
Map.prototype.getOverlayContainer = function (className) {
|
||
|
|
className = className || 'ol-overlaycontainer';
|
||
|
|
var viewport = this.getViewport();
|
||
|
|
if (viewport) {
|
||
|
|
var overlays = viewport.getElementsByClassName(className);
|
||
|
|
return overlays && overlays.length > 0 ? overlays[0] : null;
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
if (!Map.prototype.getOverlayContainerStopEvent) {
|
||
|
|
Map.prototype.getOverlayContainerStopEvent = function (className) {
|
||
|
|
className = className || 'ol-overlaycontainer-stopevent';
|
||
|
|
var viewport = this.getViewport();
|
||
|
|
if (viewport) {
|
||
|
|
var overlays = viewport.getElementsByClassName(className);
|
||
|
|
return overlays && overlays.length > 0 ? overlays[0] : null;
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
var _options = {
|
||
|
|
forcedRerender: false,
|
||
|
|
forcedPrecomposeRerender: false,
|
||
|
|
hideOnZooming: false,
|
||
|
|
hideOnMoving: false,
|
||
|
|
hideOnRotating: false,
|
||
|
|
convertTypes: ['pie', 'line', 'bar'],
|
||
|
|
insertFirst: false,
|
||
|
|
stopEvent: false,
|
||
|
|
polyfillEvents: false,
|
||
|
|
};
|
||
|
|
var EChartsLayer = (function (_super) {
|
||
|
|
__extends(EChartsLayer, _super);
|
||
|
|
function EChartsLayer(chartOptions, options, map) {
|
||
|
|
var _this = this;
|
||
|
|
var opts = Object.assign(_options, options);
|
||
|
|
_this = _super.call(this, opts) || this;
|
||
|
|
_this._options = opts;
|
||
|
|
_this._chartOptions = chartOptions;
|
||
|
|
_this.set('chartOptions', chartOptions);
|
||
|
|
_this.$chart = null;
|
||
|
|
_this.$container = undefined;
|
||
|
|
_this._isRegistered = false;
|
||
|
|
_this._initEvent = false;
|
||
|
|
_this._incremental = [];
|
||
|
|
_this._coordinateSystem = null;
|
||
|
|
_this.coordinateSystemId = '';
|
||
|
|
_this.prevVisibleState = '';
|
||
|
|
bindAll([
|
||
|
|
'redraw', 'onResize', 'onZoomEnd', 'onCenterChange',
|
||
|
|
'onDragRotateEnd', 'onMoveStart', 'onMoveEnd',
|
||
|
|
'mouseDown', 'mouseUp', 'onClick', 'mouseMove' ], _this);
|
||
|
|
if (map)
|
||
|
|
{ _this.setMap(map); }
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
EChartsLayer.prototype.appendTo = function (map, forceIgnore) {
|
||
|
|
if (forceIgnore === void 0) { forceIgnore = false; }
|
||
|
|
this.setMap(map, forceIgnore);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.getMap = function () {
|
||
|
|
return this._map;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.setMap = function (map, forceIgnore) {
|
||
|
|
var _this = this;
|
||
|
|
if (forceIgnore === void 0) { forceIgnore = false; }
|
||
|
|
if (map && (forceIgnore || map instanceof Map)) {
|
||
|
|
this._map = map;
|
||
|
|
this._map.once('postrender', function () {
|
||
|
|
_this.handleMapChanged();
|
||
|
|
});
|
||
|
|
this._map.renderSync();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
throw new Error('not ol map object');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.getChartOptions = function () {
|
||
|
|
return this.get('chartOptions');
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.setChartOptions = function (options) {
|
||
|
|
if (options === void 0) { options = {}; }
|
||
|
|
this._chartOptions = options;
|
||
|
|
this.set('chartOptions', options);
|
||
|
|
this.clearAndRedraw();
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.appendData = function (data, save) {
|
||
|
|
if (save === void 0) { save = true; }
|
||
|
|
if (data) {
|
||
|
|
if (save) {
|
||
|
|
this._incremental = arrayAdd(this._incremental, {
|
||
|
|
index: this._incremental.length,
|
||
|
|
data: data.data,
|
||
|
|
seriesIndex: data.seriesIndex,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.$chart.appendData({
|
||
|
|
data: data.data.copyWithin(),
|
||
|
|
seriesIndex: data.seriesIndex,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.clear = function (keep) {
|
||
|
|
if (!keep) {
|
||
|
|
this._incremental = [];
|
||
|
|
}
|
||
|
|
if (this.$chart) {
|
||
|
|
this.$chart.clear();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.remove = function () {
|
||
|
|
this.clear();
|
||
|
|
if (this.$chart) {
|
||
|
|
this.$chart.dispose();
|
||
|
|
}
|
||
|
|
if (this._initEvent && this.$container) {
|
||
|
|
this.$container && removeNode(this.$container);
|
||
|
|
this.unBindEvent();
|
||
|
|
}
|
||
|
|
delete this.$chart;
|
||
|
|
delete this._map;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.show = function () {
|
||
|
|
this.setVisible(true);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.innerShow = function () {
|
||
|
|
if (this.$container) {
|
||
|
|
this.$container.style.display = this.prevVisibleState;
|
||
|
|
this.prevVisibleState = '';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.hide = function () {
|
||
|
|
this.setVisible(false);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.innerHide = function () {
|
||
|
|
if (this.$container) {
|
||
|
|
this.prevVisibleState = this.$container.style.display;
|
||
|
|
this.$container.style.display = 'none';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.isVisible = function () {
|
||
|
|
return this.$container && this.$container.style.display !== 'none';
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.showLoading = function () {
|
||
|
|
if (this.$chart) {
|
||
|
|
this.$chart.showLoading();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.hideLoading = function () {
|
||
|
|
if (this.$chart) {
|
||
|
|
this.$chart.hideLoading();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.setZIndex = function (zIndex) {
|
||
|
|
if (this.$container) {
|
||
|
|
if (typeof zIndex === 'number') {
|
||
|
|
zIndex = String(zIndex);
|
||
|
|
}
|
||
|
|
this.$container.style.zIndex = zIndex;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.getZIndex = function () {
|
||
|
|
return this.$container && this.$container.style.zIndex;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.setVisible = function (visible) {
|
||
|
|
if (visible) {
|
||
|
|
if (this.$container) {
|
||
|
|
this.$container.style.display = '';
|
||
|
|
}
|
||
|
|
this._chartOptions = this.getChartOptions();
|
||
|
|
this.clearAndRedraw();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.$container) {
|
||
|
|
this.$container.style.display = 'none';
|
||
|
|
}
|
||
|
|
this.clear(true);
|
||
|
|
this._chartOptions = {};
|
||
|
|
this.clearAndRedraw();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.render = function () {
|
||
|
|
if (!this.$chart && this.$container) {
|
||
|
|
this.$chart = echarts.init(this.$container);
|
||
|
|
if (this._chartOptions) {
|
||
|
|
this.registerMap();
|
||
|
|
this.$chart.setOption(this.convertData(this._chartOptions), false);
|
||
|
|
}
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'load',
|
||
|
|
source: this,
|
||
|
|
value: this.$chart,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if (this.isVisible()) {
|
||
|
|
this.redraw();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.redraw = function () {
|
||
|
|
this.clearAndRedraw();
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.updateViewSize = function (size) {
|
||
|
|
if (!this.$container)
|
||
|
|
{ return; }
|
||
|
|
this.$container.style.width = size[0] + "px";
|
||
|
|
this.$container.style.height = size[1] + "px";
|
||
|
|
this.$container.setAttribute('width', String(size[0]));
|
||
|
|
this.$container.setAttribute('height', String(size[1]));
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.onResize = function (event) {
|
||
|
|
var map = this.getMap();
|
||
|
|
if (map) {
|
||
|
|
var size = map.getSize();
|
||
|
|
this.updateViewSize(size);
|
||
|
|
this.clearAndRedraw();
|
||
|
|
if (event) {
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'change:size',
|
||
|
|
source: this,
|
||
|
|
value: size,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.onZoomEnd = function () {
|
||
|
|
this._options.hideOnZooming && this.innerShow();
|
||
|
|
var map = this.getMap();
|
||
|
|
if (map && map.getView()) {
|
||
|
|
this.clearAndRedraw();
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'zoomend',
|
||
|
|
source: this,
|
||
|
|
value: map.getView().getZoom(),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.onDragRotateEnd = function () {
|
||
|
|
this._options.hideOnRotating && this.innerShow();
|
||
|
|
var map = this.getMap();
|
||
|
|
if (map && map.getView()) {
|
||
|
|
this.clearAndRedraw();
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'change:rotation',
|
||
|
|
source: this,
|
||
|
|
value: map.getView().getRotation(),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.onMoveStart = function () {
|
||
|
|
this._options.hideOnMoving && this.innerHide();
|
||
|
|
var map = this.getMap();
|
||
|
|
if (map && map.getView()) {
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'movestart',
|
||
|
|
source: this,
|
||
|
|
value: map.getView().getCenter(),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.onMoveEnd = function () {
|
||
|
|
this._options.hideOnMoving && this.innerShow();
|
||
|
|
var map = this.getMap();
|
||
|
|
if (map && map.getView()) {
|
||
|
|
this.clearAndRedraw();
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'moveend',
|
||
|
|
source: this,
|
||
|
|
value: map.getView().getCenter(),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.onClick = function (event) {
|
||
|
|
if (this.$chart) {
|
||
|
|
this.$chart.getZr().painter.getViewportRoot().dispatchEvent(mockEvent('click', event));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.mouseDown = function (event) {
|
||
|
|
if (this.$chart) {
|
||
|
|
this.$chart.getZr().painter.getViewportRoot().dispatchEvent(mockEvent('mousedown', event));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.mouseUp = function (event) {
|
||
|
|
if (this.$chart) {
|
||
|
|
this.$chart.getZr().painter.getViewportRoot().dispatchEvent(mockEvent('mouseup', event));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.mouseMove = function (event) {
|
||
|
|
if (this.$chart) {
|
||
|
|
var target = event.originalEvent.target;
|
||
|
|
while (target) {
|
||
|
|
if (target.className === 'ol-overlaycontainer-stopevent') {
|
||
|
|
this.$chart.getZr().painter.getViewportRoot().dispatchEvent(mockEvent('mousemove', event));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
target = target.parentElement;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.onCenterChange = function () {
|
||
|
|
var map = this.getMap();
|
||
|
|
if (map && map.getView()) {
|
||
|
|
this.clearAndRedraw();
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'change:center',
|
||
|
|
source: this,
|
||
|
|
value: map.getView().getCenter(),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.handleMapChanged = function () {
|
||
|
|
var map = this.getMap();
|
||
|
|
if (this._initEvent && this.$container) {
|
||
|
|
this.$container && removeNode(this.$container);
|
||
|
|
this.unBindEvent();
|
||
|
|
}
|
||
|
|
if (!this.$container) {
|
||
|
|
this.createLayerContainer();
|
||
|
|
this.onResize(false);
|
||
|
|
}
|
||
|
|
if (map) {
|
||
|
|
var container = this._options.stopEvent ? map.getOverlayContainerStopEvent() : map.getOverlayContainer();
|
||
|
|
if (this._options.insertFirst) {
|
||
|
|
container.insertBefore(this.$container, container.childNodes[0] || null);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
container.appendChild(this.$container);
|
||
|
|
}
|
||
|
|
this.render();
|
||
|
|
this.bindEvent(map);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.createLayerContainer = function () {
|
||
|
|
this.$container = document.createElement('div');
|
||
|
|
this.$container.style.position = 'absolute';
|
||
|
|
this.$container.style.top = '0px';
|
||
|
|
this.$container.style.left = '0px';
|
||
|
|
this.$container.style.right = '0px';
|
||
|
|
this.$container.style.bottom = '0px';
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.bindEvent = function (map) {
|
||
|
|
var view = map.getView();
|
||
|
|
if (this._options.forcedPrecomposeRerender) {
|
||
|
|
map.on('precompose', this.redraw);
|
||
|
|
}
|
||
|
|
map.on('change:size', this.onResize);
|
||
|
|
view.on('change:resolution', this.onZoomEnd);
|
||
|
|
view.on('change:center', this.onCenterChange);
|
||
|
|
view.on('change:rotation', this.onDragRotateEnd);
|
||
|
|
map.on('movestart', this.onMoveStart);
|
||
|
|
map.on('moveend', this.onMoveEnd);
|
||
|
|
if (this._options.polyfillEvents) {
|
||
|
|
map.on('pointerdown', this.mouseDown);
|
||
|
|
map.on('pointerup', this.mouseUp);
|
||
|
|
map.on('pointermove', this.mouseMove);
|
||
|
|
map.on('click', this.onClick);
|
||
|
|
}
|
||
|
|
this._initEvent = true;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.unBindEvent = function () {
|
||
|
|
var map = this.getMap();
|
||
|
|
if (!map)
|
||
|
|
{ return; }
|
||
|
|
var view = map.getView();
|
||
|
|
if (!view)
|
||
|
|
{ return; }
|
||
|
|
map.un('precompose', this.redraw);
|
||
|
|
map.un('change:size', this.onResize);
|
||
|
|
view.un('change:resolution', this.onZoomEnd);
|
||
|
|
view.un('change:center', this.onCenterChange);
|
||
|
|
view.un('change:rotation', this.onDragRotateEnd);
|
||
|
|
map.un('movestart', this.onMoveStart);
|
||
|
|
map.un('moveend', this.onMoveEnd);
|
||
|
|
if (this._options.polyfillEvents) {
|
||
|
|
map.un('pointerdown', this.mouseDown);
|
||
|
|
map.un('pointerup', this.mouseUp);
|
||
|
|
map.un('pointermove', this.mouseMove);
|
||
|
|
map.un('click', this.onClick);
|
||
|
|
}
|
||
|
|
this._initEvent = false;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.clearAndRedraw = function () {
|
||
|
|
if (!this.$chart || !this.isVisible())
|
||
|
|
{ return; }
|
||
|
|
if (this._options.forcedRerender) {
|
||
|
|
this.$chart.clear();
|
||
|
|
}
|
||
|
|
this.$chart.resize();
|
||
|
|
if (this._chartOptions) {
|
||
|
|
this.registerMap();
|
||
|
|
this.$chart.setOption(this.convertData(this._chartOptions), false);
|
||
|
|
if (this._incremental && this._incremental.length > 0) {
|
||
|
|
for (var i = 0; i < this._incremental.length; i++) {
|
||
|
|
this.appendData(this._incremental[i], false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.dispatchEvent({
|
||
|
|
type: 'redraw',
|
||
|
|
source: this,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.registerMap = function () {
|
||
|
|
if (!this._isRegistered) {
|
||
|
|
this.coordinateSystemId = "openlayers_" + uuid();
|
||
|
|
echarts.registerCoordinateSystem(this.coordinateSystemId, this.getCoordinateSystem(this._options));
|
||
|
|
this._isRegistered = true;
|
||
|
|
}
|
||
|
|
if (this._chartOptions) {
|
||
|
|
var series = this._chartOptions.series;
|
||
|
|
if (series && isObject(series)) {
|
||
|
|
var convertTypes = this._options.convertTypes;
|
||
|
|
if (convertTypes) {
|
||
|
|
for (var i = series.length - 1; i >= 0; i--) {
|
||
|
|
if (!(convertTypes.indexOf(series[i].type) > -1)) {
|
||
|
|
series[i].coordinateSystem = this.coordinateSystemId;
|
||
|
|
}
|
||
|
|
series[i].animation = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.convertData = function (options) {
|
||
|
|
var series = options.series;
|
||
|
|
if (series && series.length > 0) {
|
||
|
|
if (!this._coordinateSystem) {
|
||
|
|
var Rc = this.getCoordinateSystem(this._options);
|
||
|
|
this._coordinateSystem = new Rc(this.getMap());
|
||
|
|
}
|
||
|
|
if (series && isObject(series)) {
|
||
|
|
var convertTypes = this._options.convertTypes;
|
||
|
|
if (convertTypes) {
|
||
|
|
for (var i = series.length - 1; i >= 0; i--) {
|
||
|
|
if (convertTypes.indexOf(series[i].type) > -1) {
|
||
|
|
if (series[i] && series[i].hasOwnProperty('coordinates')) {
|
||
|
|
series[i] = charts[series[i].type](options, series[i], this._coordinateSystem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return options;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.getCoordinateSystem = function (options) {
|
||
|
|
var map = this.getMap();
|
||
|
|
var coordinateSystemId = this.coordinateSystemId;
|
||
|
|
var RegisterCoordinateSystem = function (map) {
|
||
|
|
this.map = map;
|
||
|
|
this._mapOffset = [0, 0];
|
||
|
|
this.dimensions = ['lng', 'lat'];
|
||
|
|
this.projCode = RegisterCoordinateSystem.getProjectionCode(this.map);
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.dimensions = RegisterCoordinateSystem.prototype.dimensions || ['lng', 'lat'];
|
||
|
|
RegisterCoordinateSystem.prototype.getZoom = function () {
|
||
|
|
return this.map.getView().getZoom();
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.setZoom = function (zoom) {
|
||
|
|
return this.map.getView().setZoom(zoom);
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.getViewRectAfterRoam = function () {
|
||
|
|
return this.getViewRect().clone();
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.setMapOffset = function (mapOffset) {
|
||
|
|
this._mapOffset = mapOffset;
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.dataToPoint = function (data) {
|
||
|
|
var coords;
|
||
|
|
if (data && Array.isArray(data) && data.length > 0) {
|
||
|
|
coords = data.map(function (item) {
|
||
|
|
var res = 0;
|
||
|
|
if (typeof item === 'string') {
|
||
|
|
res = Number(item);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
res = item;
|
||
|
|
}
|
||
|
|
return res;
|
||
|
|
});
|
||
|
|
var source = (options && options.source) || 'EPSG:4326';
|
||
|
|
var destination = (options && options.destination) || this.projCode;
|
||
|
|
var pixel = this.map.getPixelFromCoordinate(transform(coords, source, destination));
|
||
|
|
var mapOffset = this._mapOffset;
|
||
|
|
return [pixel[0] - mapOffset[0], pixel[1] - mapOffset[1]];
|
||
|
|
}
|
||
|
|
return [0, 0];
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.pointToData = function (pixel) {
|
||
|
|
var mapOffset = this._mapOffset;
|
||
|
|
return this.map.getCoordinateFromPixel([pixel[0] + mapOffset[0], pixel[1] + mapOffset[1]]);
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.getViewRect = function () {
|
||
|
|
var size = this.map.getSize();
|
||
|
|
return new echarts.graphic.BoundingRect(0, 0, size[0], size[1]);
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.getRoamTransform = function () {
|
||
|
|
return echarts.matrix.create();
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.prototype.prepareCustoms = function () {
|
||
|
|
var rect = this.getViewRect();
|
||
|
|
return {
|
||
|
|
coordSys: {
|
||
|
|
type: coordinateSystemId,
|
||
|
|
x: rect.x,
|
||
|
|
y: rect.y,
|
||
|
|
width: rect.width,
|
||
|
|
height: rect.height,
|
||
|
|
},
|
||
|
|
api: {
|
||
|
|
coord: bind(this.dataToPoint, this),
|
||
|
|
size: bind(RegisterCoordinateSystem.dataToCoordsSize, this),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.create = function (echartsModel) {
|
||
|
|
echartsModel.eachSeries(function (seriesModel) {
|
||
|
|
if (seriesModel.get('coordinateSystem') === coordinateSystemId) {
|
||
|
|
seriesModel.coordinateSystem = new RegisterCoordinateSystem(map);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.getProjectionCode = function (map) {
|
||
|
|
var code = '';
|
||
|
|
if (map) {
|
||
|
|
code = map.getView()
|
||
|
|
&& map
|
||
|
|
.getView()
|
||
|
|
.getProjection()
|
||
|
|
.getCode();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
code = 'EPSG:3857';
|
||
|
|
}
|
||
|
|
return code;
|
||
|
|
};
|
||
|
|
RegisterCoordinateSystem.dataToCoordsSize = function (dataSize, dataItem) {
|
||
|
|
var _this = this;
|
||
|
|
if (dataItem === void 0) { dataItem = [0, 0]; }
|
||
|
|
return [0, 1].map(function (dimIdx) {
|
||
|
|
var val = dataItem[dimIdx];
|
||
|
|
var p1 = [];
|
||
|
|
var p2 = [];
|
||
|
|
var halfSize = dataSize[dimIdx] / 2;
|
||
|
|
p1[dimIdx] = val - halfSize;
|
||
|
|
p2[dimIdx] = val + halfSize;
|
||
|
|
p1[1 - dimIdx] = dataItem[1 - dimIdx];
|
||
|
|
p2[1 - dimIdx] = dataItem[1 - dimIdx];
|
||
|
|
var offset = _this.dataToPoint(p1)[dimIdx] - _this.dataToPoint(p2)[dimIdx];
|
||
|
|
return Math.abs(offset);
|
||
|
|
}, this);
|
||
|
|
};
|
||
|
|
return RegisterCoordinateSystem;
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.dispatchEvent = function (event) {
|
||
|
|
return _super.prototype.dispatchEvent.call(this, event);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.set = function (key, value, optSilent) {
|
||
|
|
return _super.prototype.set.call(this, key, value, optSilent);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.get = function (key) {
|
||
|
|
return _super.prototype.get.call(this, key);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.unset = function (key, optSilent) {
|
||
|
|
return _super.prototype.unset.call(this, key, optSilent);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.on = function (type, listener, optThis) {
|
||
|
|
return _super.prototype.on.call(this, type, listener, optThis);
|
||
|
|
};
|
||
|
|
EChartsLayer.prototype.un = function (type, listener, optThis) {
|
||
|
|
return _super.prototype.un.call(this, type, listener, optThis);
|
||
|
|
};
|
||
|
|
EChartsLayer.formatGeoJSON = formatGeoJSON;
|
||
|
|
EChartsLayer.bind = bind;
|
||
|
|
EChartsLayer.merge = merge;
|
||
|
|
EChartsLayer.uuid = uuid;
|
||
|
|
EChartsLayer.bindAll = bindAll;
|
||
|
|
EChartsLayer.arrayAdd = arrayAdd;
|
||
|
|
EChartsLayer.removeNode = removeNode;
|
||
|
|
EChartsLayer.isObject = isObject;
|
||
|
|
return EChartsLayer;
|
||
|
|
}(obj));
|
||
|
|
|
||
|
|
return EChartsLayer;
|
||
|
|
|
||
|
|
}));
|
||
|
|
//# sourceMappingURL=ol3Echarts.js.map
|