初始化仓库
This commit is contained in:
yiqiuyang
468
public/map/mars3d/plugins/echarts/mars3d-echarts-src.js
Normal file
468
public/map/mars3d/plugins/echarts/mars3d-echarts-src.js
Normal file
@ -0,0 +1,468 @@
|
||||
/**
|
||||
* Mars3D平台插件,结合echarts可视化功能插件 mars3d-echarts
|
||||
*
|
||||
* 版本信息：v3.4.7
|
||||
* 编译日期：2022-09-15 16:25:35
|
||||
* 版权所有：Copyright by 火星科技 http://mars3d.cn
|
||||
* 使用单位：安徽XX有限公司 ，2021-08-18
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, (window.echarts || require('echarts')), (window.mars3d || require('mars3d'))) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'echarts', 'mars3d'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["mars3d-echarts"] = {}, global.echarts, global.mars3d));
|
||||
})(this, (function (exports, echarts, mars3d) { 'use strict';
|
||||
|
||||
function _interopNamespace(e) {
|
||||
if (e && e.__esModule) return e;
|
||||
var n = Object.create(null);
|
||||
if (e) {
|
||||
Object.keys(e).forEach(function (k) {
|
||||
if (k !== 'default') {
|
||||
var d = Object.getOwnPropertyDescriptor(e, k);
|
||||
Object.defineProperty(n, k, d.get ? d : {
|
||||
enumerable: true,
|
||||
get: function () { return e[k]; }
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
n["default"] = e;
|
||||
return n;
|
||||
}
|
||||
|
||||
var echarts__namespace = /*#__PURE__*/_interopNamespace(echarts);
|
||||
var mars3d__namespace = /*#__PURE__*/_interopNamespace(mars3d);
|
||||
|
||||
const Cesium$1 = mars3d__namespace.Cesium;
|
||||
|
||||
|
||||
// 地图坐标系统类。参考了开源：https://github.com/sharpzao/EchartsCesium
|
||||
class CompositeCoordinateSystem {
|
||||
//= ========= 构造方法 ==========
|
||||
constructor(scene, api) {
|
||||
this._mars3d_scene = scene;
|
||||
this.dimensions = ["lng", "lat"];
|
||||
this._mapOffset = [0, 0];
|
||||
|
||||
this._api = api;
|
||||
}
|
||||
|
||||
//= ========= 方法 ==========
|
||||
setMapOffset(mapOffset) {
|
||||
this._mapOffset = mapOffset;
|
||||
}
|
||||
|
||||
getBMap() {
|
||||
return this._mars3d_scene
|
||||
}
|
||||
|
||||
dataToPoint(data) {
|
||||
const scene = this._mars3d_scene;
|
||||
const defVal = [NaN, NaN]; // echarts内部就是用NaN来做判断的
|
||||
|
||||
let heightTerrain = scene.echartsFixedHeight;
|
||||
if (scene.echartsAutoHeight) {
|
||||
heightTerrain = scene.globe.getHeight(Cesium$1.Cartographic.fromDegrees(data[0], data[1]));
|
||||
}
|
||||
|
||||
const position = Cesium$1.Cartesian3.fromDegrees(data[0], data[1], heightTerrain);
|
||||
if (!position) {
|
||||
return defVal
|
||||
}
|
||||
|
||||
const px = Cesium$1.SceneTransforms.wgs84ToWindowCoordinates(scene, position);
|
||||
// var px = scene.cartesianToCanvasCoordinates(position);
|
||||
if (!px) {
|
||||
return defVal
|
||||
}
|
||||
|
||||
// 判断是否在球的背面
|
||||
if (scene.echartsDepthTest && scene.mode === Cesium$1.SceneMode.SCENE3D) {
|
||||
const occluder = new Cesium$1.EllipsoidalOccluder(scene.globe.ellipsoid, scene.camera.positionWC);
|
||||
const visible = occluder.isPointVisible(position);
|
||||
// visible为true说明点在球的正面，否则点在球的背面。
|
||||
// 需要注意的是不能用这种方法判断点的可见性，如果球放的比较大，点跑到屏幕外面，它返回的依然为true
|
||||
if (!visible) {
|
||||
return defVal
|
||||
}
|
||||
}
|
||||
// 判断是否在球的背面
|
||||
|
||||
return [px.x - this._mapOffset[0], px.y - this._mapOffset[1]]
|
||||
}
|
||||
|
||||
getViewRect() {
|
||||
const api = this._api;
|
||||
return new echarts__namespace.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight())
|
||||
}
|
||||
|
||||
getRoamTransform() {
|
||||
return echarts__namespace.matrix.create()
|
||||
}
|
||||
}
|
||||
|
||||
// 用于确定创建列表数据时要使用的维度
|
||||
CompositeCoordinateSystem.dimensions = ["lng", "lat"];
|
||||
CompositeCoordinateSystem.create = function (ecModel, api) {
|
||||
let coordSys;
|
||||
const scene = ecModel.scheduler.ecInstance._mars3d_scene;
|
||||
|
||||
ecModel.eachComponent("mars3dMap", function (mars3dMapModel) {
|
||||
const painter = api.getZr().painter;
|
||||
if (!painter) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!coordSys) {
|
||||
coordSys = new CompositeCoordinateSystem(scene, api);
|
||||
}
|
||||
mars3dMapModel.coordinateSystem = coordSys;
|
||||
|
||||
coordSys.setMapOffset(mars3dMapModel.__mapOffset || [0, 0]);
|
||||
});
|
||||
|
||||
ecModel.eachSeries(function (seriesModel) {
|
||||
if (seriesModel.get("coordinateSystem") === "mars3dMap") {
|
||||
if (!coordSys) {
|
||||
coordSys = new CompositeCoordinateSystem(scene, api);
|
||||
}
|
||||
seriesModel.coordinateSystem = coordSys;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/// //////扩展echarts///////////
|
||||
if (echarts__namespace?.init) {
|
||||
echarts__namespace.registerCoordinateSystem("mars3dMap", CompositeCoordinateSystem);
|
||||
echarts__namespace.registerAction(
|
||||
{
|
||||
type: "mars3dMapRoam",
|
||||
event: "mars3dMapRoam",
|
||||
update: "updateLayout"
|
||||
},
|
||||
function (payload, ecModel) {}
|
||||
);
|
||||
|
||||
echarts__namespace.extendComponentModel({
|
||||
type: "mars3dMap",
|
||||
getBMap: function () {
|
||||
return this._mars3d_scene
|
||||
},
|
||||
defaultOption: { roam: false }
|
||||
});
|
||||
|
||||
echarts__namespace.extendComponentView({
|
||||
type: "mars3dMap",
|
||||
init: function (ecModel, api) {
|
||||
this.api = api;
|
||||
this.scene = ecModel.scheduler.ecInstance._mars3d_scene;
|
||||
this.scene.postRender.addEventListener(this.moveHandler, this);
|
||||
},
|
||||
moveHandler: function (type, target) {
|
||||
this.api.dispatchAction({ type: "mars3dMapRoam" });
|
||||
},
|
||||
render: function (mars3dMapModel, ecModel, api) {},
|
||||
dispose: function (target) {
|
||||
this.scene.postRender.removeEventListener(this.moveHandler, this);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
throw new Error("请引入 echarts 库 ")
|
||||
}
|
||||
|
||||
const Cesium = mars3d__namespace.Cesium;
|
||||
const BaseLayer = mars3d__namespace.layer.BaseLayer;
|
||||
let _div_zIndex = 999;
|
||||
|
||||
/**
|
||||
* Echarts图层，
|
||||
* 【需要引入 echarts 库 和 mars3d-echarts 插件库】
|
||||
*
|
||||
* @param {Object} [options] 参数对象，包括以下：
|
||||
* @param {Object} [options.Echarts本身] 支持Echarts本身所有Options参数，具体查阅 [Echarts配置项手册]{@link https://echarts.apache.org/zh/option.html}
|
||||
*
|
||||
* @param {Boolean} [options.depthTest=true] 是否进行计算深度判断，在地球背面或被遮挡时不显示（大数据时，需要关闭）
|
||||
* @param {Number} [options.fixedHeight=0] 点的固定的海拔高度
|
||||
* @param {Boolean} [options.clampToGround=false] 点是否贴地
|
||||
* @param {Boolean} [options.pointerEvents=false] 图层是否可以进行鼠标交互，为false时可以穿透操作及缩放地图
|
||||
*
|
||||
*
|
||||
* @param {String|Number} [options.id = createGuid()] 图层id标识
|
||||
* @param {String|Number} [options.pid = -1] 图层父级的id，一般图层管理中使用
|
||||
* @param {String} [options.name = ''] 图层名称
|
||||
* @param {Boolean} [options.show = true] 图层是否显示
|
||||
* @param {BaseClass|Boolean} [options.eventParent] 指定的事件冒泡对象，默认为map对象，false时不冒泡
|
||||
* @param {Object} [options.center] 图层自定义定位视角 {@link Map#setCameraView}
|
||||
* @param {Number} options.center.lng 经度值, 180 - 180
|
||||
* @param {Number} options.center.lat 纬度值, -90 - 90
|
||||
* @param {Number} [options.center.alt] 高度值
|
||||
* @param {Number} [options.center.heading] 方向角度值，绕垂直于地心的轴旋转角度, 0至360
|
||||
* @param {Number} [options.center.pitch] 俯仰角度值，绕纬度线旋转角度, -90至90
|
||||
* @param {Number} [options.center.roll] 翻滚角度值，绕经度线旋转角度, -90至90
|
||||
* @param {Boolean} [options.flyTo] 加载完成数据后是否自动飞行定位到数据所在的区域。
|
||||
* @export
|
||||
* @class EchartsLayer
|
||||
* @extends {BaseLayer}
|
||||
*/
|
||||
class EchartsLayer extends BaseLayer {
|
||||
constructor(options = {}) {
|
||||
super(options);
|
||||
|
||||
this._pointerEvents = this.options.pointerEvents;
|
||||
}
|
||||
|
||||
/**
|
||||
* echarts对象，是echarts.init方法返回的 echartsInstance 实例
|
||||
* @type {HTMLCanvasElement}
|
||||
* @readonly
|
||||
* @see https://echarts.apache.org/zh/api.html#echartsInstance
|
||||
*/
|
||||
get layer() {
|
||||
return this._echartsInstance
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否可以鼠标交互，为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件。true时无法缩放地球，但可以使用echarts相关的事件或toolitp等。
|
||||
* @type {Boolean}
|
||||
*/
|
||||
get pointerEvents() {
|
||||
return this._pointerEvents
|
||||
}
|
||||
|
||||
set pointerEvents(value) {
|
||||
this._pointerEvents = value;
|
||||
if (this._echartsContainer) {
|
||||
if (value) {
|
||||
this._echartsContainer.style.pointerEvents = "all";
|
||||
} else {
|
||||
/* 加上这个css后鼠标可以穿透，但是无法触发单击等鼠标事件 */
|
||||
this._echartsContainer.style.pointerEvents = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_setOptionsHook(options, newOptions) {
|
||||
this.setEchartsOption(options);
|
||||
}
|
||||
|
||||
_showHook(show) {
|
||||
if (show) {
|
||||
this._echartsContainer.style.visibility = "visible";
|
||||
} else {
|
||||
this._echartsContainer.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图前创建一些对象的钩子方法，
|
||||
* 只会调用一次
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_mountedHook() {
|
||||
this._map.scene.echartsDepthTest = this.options.depthTest ?? true; // 是否进行计算深度（大数据时，需要关闭）
|
||||
this._map.scene.echartsAutoHeight = this.options.clampToGround ?? false;
|
||||
this._map.scene.echartsFixedHeight = this.options.fixedHeight ?? 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图上的创建钩子方法，
|
||||
* 每次add时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_addedHook() {
|
||||
this._echartsContainer = this._createChartOverlay();
|
||||
this._echartsInstance = echarts__namespace.init(this._echartsContainer);
|
||||
this._echartsInstance._mars3d_scene = this._map.scene;
|
||||
|
||||
this.setEchartsOption(this.options);
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象从地图上移除的创建钩子方法，
|
||||
* 每次remove时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_removedHook() {
|
||||
if (this._echartsInstance) {
|
||||
this._echartsInstance.clear();
|
||||
this._echartsInstance.dispose();
|
||||
delete this._echartsInstance;
|
||||
}
|
||||
if (this._echartsContainer) {
|
||||
this._map.container.removeChild(this._echartsContainer);
|
||||
delete this._echartsContainer;
|
||||
}
|
||||
}
|
||||
|
||||
_createChartOverlay() {
|
||||
const scene = this._map.scene;
|
||||
scene.canvas.setAttribute("tabIndex", 0);
|
||||
|
||||
const chartContainer = mars3d__namespace.DomUtil.create("div", "mars3d-echarts", this._map.container);
|
||||
chartContainer.style.position = "absolute";
|
||||
chartContainer.style.top = "0px";
|
||||
chartContainer.style.left = "0px";
|
||||
chartContainer.style.width = scene.canvas.clientWidth + "px";
|
||||
chartContainer.style.height = scene.canvas.clientHeight + "px";
|
||||
chartContainer.style.pointerEvents = this._pointerEvents ? "all" : "none"; // auto时可以交互，但是没法放大地球， none 没法交互
|
||||
chartContainer.style.zIndex = this.options.zIndex || _div_zIndex++;
|
||||
|
||||
return chartContainer
|
||||
}
|
||||
|
||||
/**
|
||||
* 改变图层canvas容器尺寸，在容器大小发生改变时需要手动调用。
|
||||
* @return {void} 无
|
||||
* @see https://echarts.apache.org/zh/api.html#echartsInstance.resize
|
||||
*/
|
||||
resize() {
|
||||
if (!this._echartsInstance) {
|
||||
return
|
||||
}
|
||||
const scene = this._map.scene;
|
||||
|
||||
this._echartsContainer.style.width = scene.canvas.clientWidth + "px";
|
||||
this._echartsContainer.style.height = scene.canvas.clientHeight + "px";
|
||||
|
||||
this._echartsInstance.resize();
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置图表实例的配置项以及数据，
|
||||
* 万能接口，所有参数和数据的修改都可以通过 setOption 完成，
|
||||
* ECharts 会合并新的参数和数据，然后刷新图表。
|
||||
* 如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
|
||||
* @param {Object} option 图表的配置项和数据，具体见 [Echarts配置项手册]{@link https://echarts.apache.org/zh/option.html}。
|
||||
* @param {Boolean} [notMerge=false] 是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
|
||||
* @param {Boolean} [lazyUpdate=false] 在设置完 option 后是否不立即更新图表，默认为 false，即同步立即更新。如果为 true，则会在下一个 animation frame 中，才更新图表。
|
||||
* @return {void} 无
|
||||
* @see https://echarts.apache.org/zh/api.html#echartsInstance.setOption
|
||||
*/
|
||||
setEchartsOption(option, notMerge, lazyUpdate) {
|
||||
if (this._echartsInstance) {
|
||||
option.mars3dMap = option.mars3dMap || {}; // 需要注册
|
||||
this._echartsInstance.setOption(option, notMerge, lazyUpdate);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图层内所有数据的 矩形边界值
|
||||
* @param {Boolean} [options] 控制参数
|
||||
* @param {Boolean} [options.isFormat=false] 是否格式化，格式化时示例： { xmin: 73.16895, xmax: 134.86816, ymin: 12.2023, ymax: 54.11485 }
|
||||
* @return {Cesium.Rectangle|Object} isFormat：true时，返回格式化对象，isFormat：false时返回Cesium.Rectangle对象
|
||||
*/
|
||||
getRectangle(options) {
|
||||
let xmin, xmax, ymin, ymax;
|
||||
|
||||
function refPoint(coors) {
|
||||
if (!Array.isArray(coors)) {
|
||||
return
|
||||
}
|
||||
|
||||
const lng = coors[0] || 0;
|
||||
const lat = coors[1] || 0;
|
||||
|
||||
if (lng !== 0 && lat !== 0) {
|
||||
if (xmin === undefined) {
|
||||
xmin = lng;
|
||||
xmax = lng;
|
||||
ymin = lat;
|
||||
ymax = lat;
|
||||
} else {
|
||||
xmin = Math.min(xmin, lng);
|
||||
xmax = Math.max(xmax, lng);
|
||||
ymin = Math.min(ymin, lat);
|
||||
ymax = Math.max(ymax, lat);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const series = this.options.series;
|
||||
if (series) {
|
||||
series.forEach((serie) => {
|
||||
if (serie.data) {
|
||||
serie.data.forEach((item) => {
|
||||
if (item.value) {
|
||||
refPoint(item.value);
|
||||
} else if (item.coords) {
|
||||
item.coords.forEach((coord) => {
|
||||
refPoint(coord);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (xmin === 0 && ymin === 0 && xmax === 0 && ymax === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (options?.isFormat) {
|
||||
return { xmin: xmin, xmax: xmax, ymin: ymin, ymax: ymax }
|
||||
} else {
|
||||
return Cesium.Rectangle.fromDegrees(xmin, ymin, xmax, ymax)
|
||||
}
|
||||
}
|
||||
|
||||
/// /////////////////事件相关//////////////////////
|
||||
|
||||
/**
|
||||
* 绑定事件处理函数,
|
||||
*
|
||||
* @param {String} eventName 事件名称，全小写，例如'click'，'mousemove', 'legendselected' ,可以参考[echarts官网说明]{@link https://echarts.apache.org/zh/api.html#echartsInstance.on}
|
||||
* @param {Function} callback 绑定的监听器回调方法
|
||||
* @param {Object} [context] 侦听器的上下文(this关键字将指向的对象)。
|
||||
* @return {EchartsLayer} 当前对象本身,可以链式调用
|
||||
*/
|
||||
on(eventName, callback, context) {
|
||||
this._echartsInstance.on(eventName, callback, context || this);
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* 带条件的绑定事件处理函数
|
||||
* @param {String} eventName 事件名称，全小写，例如'click'，'mousemove', 'legendselected'
|
||||
* @param {String|Object} query 可选的过滤条件，能够只在指定的组件或者元素上进行响应。可以参考[echarts官网说明]{@link https://echarts.apache.org/zh/api.html#echartsInstance.on}
|
||||
* @param {Function} callback 绑定的监听器回调方法
|
||||
* @param {Object} [context] 侦听器的上下文(this关键字将指向的对象)
|
||||
* @return {EchartsLayer} 当前对象本身,可以链式调用
|
||||
*/
|
||||
onByQuery(eventName, query, callback, context) {
|
||||
this._echartsInstance.on(eventName, query, callback, context || this);
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* 解除绑定指定类型事件监听器
|
||||
*
|
||||
* @param {String} eventName 事件名称，全小写，例如'click'，'mousemove', 'legendselected'
|
||||
* @param {Function} [callback] 绑定的监听器回调方法,未传值时解绑所有指定类型对应事件
|
||||
* @param {Object} [context] 侦听器的上下文(this关键字将指向的对象)。
|
||||
* @return {EchartsLayer} 当前对象本身,可以链式调用
|
||||
*/
|
||||
off(eventName, callback, context) {
|
||||
this._echartsInstance.off(eventName, callback, context || this);
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
// 注册下
|
||||
mars3d__namespace.LayerUtil.register("echarts", EchartsLayer);
|
||||
|
||||
mars3d__namespace.layer.EchartsLayer = EchartsLayer;
|
||||
|
||||
exports.EchartsLayer = EchartsLayer;
|
||||
Object.keys(echarts).forEach(function (k) {
|
||||
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
||||
enumerable: true,
|
||||
get: function () { return echarts[k]; }
|
||||
});
|
||||
});
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
15
public/map/mars3d/plugins/echarts/mars3d-echarts.js
Normal file
15
public/map/mars3d/plugins/echarts/mars3d-echarts.js
Normal file
File diff suppressed because one or more lines are too long
647
public/map/mars3d/plugins/heatmap/mars3d-heatmap-src.js
Normal file
647
public/map/mars3d/plugins/heatmap/mars3d-heatmap-src.js
Normal file
@ -0,0 +1,647 @@
|
||||
/**
|
||||
* Mars3D平台插件,结合heatmap可视化功能插件 mars3d-heatmap
|
||||
*
|
||||
* 版本信息：v3.4.7
|
||||
* 编译日期：2022-09-15 16:25:35
|
||||
* 版权所有：Copyright by 火星科技 http://mars3d.cn
|
||||
* 使用单位：安徽XX有限公司 ，2021-08-18
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, (window.mars3d || require('mars3d')), (window.h337 || require('@mars3d/heatmap.js'))) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'mars3d', '@mars3d/heatmap.js'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["mars3d-heatmap"] = {}, global.mars3d, global.h337));
|
||||
})(this, (function (exports, mars3d, h337) { 'use strict';
|
||||
|
||||
function _interopNamespace(e) {
|
||||
if (e && e.__esModule) return e;
|
||||
var n = Object.create(null);
|
||||
if (e) {
|
||||
Object.keys(e).forEach(function (k) {
|
||||
if (k !== 'default') {
|
||||
var d = Object.getOwnPropertyDescriptor(e, k);
|
||||
Object.defineProperty(n, k, d.get ? d : {
|
||||
enumerable: true,
|
||||
get: function () { return e[k]; }
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
n["default"] = e;
|
||||
return n;
|
||||
}
|
||||
|
||||
var mars3d__namespace = /*#__PURE__*/_interopNamespace(mars3d);
|
||||
var h337__namespace = /*#__PURE__*/_interopNamespace(h337);
|
||||
|
||||
var HeatMaterial = "uniform sampler2D image;\n\nczm_material czm_getMaterial(czm_materialInput materialInput) {\n czm_material material = czm_getDefaultMaterial(materialInput);\n vec2 st = materialInput.st;\n vec4 colorImage = texture2D(image, st);\n if(colorImage.rgb == vec3(1.0) || colorImage.rgb == vec3(0.0)) {\n discard;\n }\n material.diffuse = colorImage.rgb;\n material.alpha = colorImage.a;\n return material;\n}\n"; // eslint-disable-line
|
||||
|
||||
if (!h337__namespace.create) {
|
||||
throw new Error("请引入 heatmap.js 库 ")
|
||||
}
|
||||
|
||||
const Cesium = mars3d__namespace.Cesium;
|
||||
const BaseLayer = mars3d__namespace.layer.BaseLayer;
|
||||
|
||||
// 热力图默认参数
|
||||
const DEF_HEATSTYLE = {
|
||||
maxOpacity: 0.8,
|
||||
minOpacity: 0.1,
|
||||
blur: 0.85,
|
||||
radius: 25,
|
||||
gradient: {
|
||||
0.4: "blue",
|
||||
0.6: "green",
|
||||
0.8: "yellow",
|
||||
0.9: "red"
|
||||
}
|
||||
};
|
||||
|
||||
const DEF_STYLE = {
|
||||
arcRadiusScale: 1.5,
|
||||
arcBlurScale: 1.5,
|
||||
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
|
||||
};
|
||||
|
||||
/**
|
||||
* 热力图图层，基于heatmap.js库渲染。
|
||||
* 【需要引入 heatmap.js 库 和 mars3d-heatmap 插件库】
|
||||
*
|
||||
* @param {Object} options 参数对象，包括以下：
|
||||
* @param {LngLatPoint[]|Cesium.Cartesian3[]|Object[]} [options.positions] 坐标数据集合（含value热力值），有热力值时，传入LatLngPoint数组，热力值为value字段。示例:[{lat:31.123,lng:103.568,value:1.2},{lat:31.233,lng:103.938,value:2.3}]
|
||||
*
|
||||
* @param {Object} [options.rectangle] 坐标的矩形区域范围，默认内部自动计算
|
||||
* @param {Number} options.rectangle.xmin 最小经度值
|
||||
* @param {Number} options.rectangle.xmax 最大经度值
|
||||
* @param {Number} options.rectangle.ymin 最小纬度值
|
||||
* @param {Number} options.rectangle.ymax 最大纬度值
|
||||
*
|
||||
* @param {Number} [options.max] 数据集的value值上限，默认内部计算
|
||||
* @param {Number} [options.min] 数据集的value值下限，默认内部计算
|
||||
*
|
||||
* @param {Object} [options.heatStyle] heatmap热力图本身configObject参数，详情也可查阅 [heatmap文档]{@link https://www.patrick-wied.at/static/heatmapjs/docs.html}
|
||||
* @param {Number} [options.heatStyle.maxOpacity=0.8] 最大不透明度，取值范围0.0-1.0。
|
||||
* @param {Number} [options.heatStyle.minOpacity=0.1] 最小不透明度，取值范围0.0-1.0。
|
||||
* @param {Number} [options.heatStyle.blur=0.85] 将应用于所有数据点的模糊因子。模糊因子越高，渐变将越平滑
|
||||
* @param {Number} [options.heatStyle.radius=25] 每个数据点将具有的半径（如果未在数据点本身上指定）
|
||||
* @param {Object} [options.heatStyle.gradient] 色带，表示渐变的对象，示例：{ 0.4: 'blue', 0.6: 'green',0.8: 'yellow',0.9: 'red' }
|
||||
*
|
||||
* @param {RectanglePrimitive.StyleOptions|Object} [options.style] 矢量对象样式参数，还包括：
|
||||
* @param {Boolean} [options.style.opacity=1] 透明度
|
||||
* @param {Boolean} [options.style.arc=false] 是否显示曲面热力图
|
||||
* @param {Boolean} [options.style.arcRadiusScale=1.5] 曲面热力图时，radius扩大比例
|
||||
* @param {Boolean} [options.style.arcBlurScale=1.5] 曲面热力图时，blur扩大比例
|
||||
* @param {Number} [options.style.height = 0] 高度，相对于椭球面的高度。
|
||||
* @param {Number} [options.style.diffHeight ] 曲面的起伏差值高，默认根据数据范围的比例自动计算。
|
||||
* @param {RectanglePrimitive.StyleOptions} [options.style.多个参数] rectangle矩形支持的样式
|
||||
*
|
||||
* @param {Number} [options.maxCanvasSize=5000] Canvas最大尺寸（单位：像素），调大精度更高，但过大容易内存溢出
|
||||
* @param {Number} [options.minCanvasSize=700] Canvas最小尺寸（单位：像素）
|
||||
* @param {Number} [options.delayTime=2] 显示数据时的过渡动画时长（单位：秒）
|
||||
*
|
||||
* @param {String|Number} [options.id = createGuid()] 图层id标识
|
||||
* @param {String|Number} [options.pid = -1] 图层父级的id，一般图层管理中使用
|
||||
* @param {String} [options.name = ''] 图层名称
|
||||
* @param {Boolean} [options.show = true] 图层是否显示
|
||||
* @param {BaseClass|Boolean} [options.eventParent] 指定的事件冒泡对象，默认为map对象，false时不冒泡
|
||||
* @param {Object} [options.center] 图层自定义定位视角 {@link Map#setCameraView}
|
||||
* @param {Number} options.center.lng 经度值, 180 - 180
|
||||
* @param {Number} options.center.lat 纬度值, -90 - 90
|
||||
* @param {Number} [options.center.alt] 高度值
|
||||
* @param {Number} [options.center.heading] 方向角度值，绕垂直于地心的轴旋转角度, 0至360
|
||||
* @param {Number} [options.center.pitch] 俯仰角度值，绕纬度线旋转角度, -90至90
|
||||
* @param {Number} [options.center.roll] 翻滚角度值，绕经度线旋转角度, -90至90
|
||||
* @param {Boolean} [options.flyTo] 加载完成数据后是否自动飞行定位到数据所在的区域。
|
||||
* @export
|
||||
* @class HeatLayer
|
||||
* @extends {BaseLayer}
|
||||
*/
|
||||
class HeatLayer extends BaseLayer {
|
||||
constructor(options = {}) {
|
||||
super(options);
|
||||
|
||||
this.options.maxCanvasSize = this.options.maxCanvasSize ?? document.body.clientWidth;
|
||||
this.options.maxCanvasSize = Math.min(this.options.maxCanvasSize, 5000);
|
||||
this.options.minCanvasSize = this.options.minCanvasSize ?? document.body.clientHeight;
|
||||
this.options.minCanvasSize = Math.max(this.options.minCanvasSize, 700);
|
||||
|
||||
this.options.heatStyle = {
|
||||
...DEF_HEATSTYLE,
|
||||
...(this.options.heatStyle || {})
|
||||
};
|
||||
this.options.style = {
|
||||
...DEF_STYLE,
|
||||
...(this.options.style || {})
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 矢量数据图层
|
||||
* @type {GraphicLayer}
|
||||
* @readonly
|
||||
*/
|
||||
get layer() {
|
||||
return this._layer
|
||||
}
|
||||
|
||||
/**
|
||||
* heatmap热力图本身configObject参数，详情也可查阅 [heatmap文档]{@link https://www.patrick-wied.at/static/heatmapjs/docs.html}
|
||||
* @type {Object}
|
||||
*/
|
||||
get heatStyle() {
|
||||
return this.options.heatStyle
|
||||
}
|
||||
|
||||
set heatStyle(value) {
|
||||
this.options.heatStyle = mars3d__namespace.Util.merge(this.options.heatStyle, value);
|
||||
|
||||
if (this._heat) {
|
||||
this._heat.configure(this.options.heatStyle);
|
||||
this._updatePositionsHook(true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 矩形的样式参数
|
||||
* @type {RectanglePrimitive.StyleOptions}
|
||||
*/
|
||||
get style() {
|
||||
return this.options.style
|
||||
}
|
||||
|
||||
set style(value) {
|
||||
this.options.style = mars3d__namespace.Util.merge(this.options.style, value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 坐标数据集合（含value热力值），示例:[{lat:31.123,lng:103.568,value:1.2},{lat:31.233,lng:103.938,value:2.3}] 。
|
||||
* 平滑更新建议使用setPositions方法
|
||||
* @type {Cesium.Cartesian3[]|LngLatPoint[]}
|
||||
*/
|
||||
get positions() {
|
||||
return this._positions
|
||||
}
|
||||
|
||||
set positions(value) {
|
||||
this.setPositions(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 位置坐标(数组对象)，示例 [ [123.123456,32.654321,198.7], [111.123456,22.654321,50.7] ]
|
||||
* @type {Array[]}
|
||||
* @readonly
|
||||
*/
|
||||
get coordinates() {
|
||||
const coords = [];
|
||||
this.points.forEach((item) => {
|
||||
coords.push(item.toArray());
|
||||
});
|
||||
return coords
|
||||
}
|
||||
|
||||
/**
|
||||
* 坐标数据对应的矩形边界
|
||||
* @type {Cesium.Rectangle}
|
||||
* @readonly
|
||||
*/
|
||||
get rectangle() {
|
||||
return this._rectangle
|
||||
}
|
||||
|
||||
_setOptionsHook(options, newOptions) {
|
||||
if (options.positions) {
|
||||
this.positions = options.positions;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图前创建一些对象的钩子方法，
|
||||
* 只会调用一次
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_mountedHook() {
|
||||
this._layer = new mars3d__namespace.layer.GraphicLayer({
|
||||
private: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图上的创建钩子方法，
|
||||
* 每次add时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_addedHook() {
|
||||
this._map.addLayer(this._layer);
|
||||
|
||||
if (this.options.positions) {
|
||||
this.positions = this.options.positions;
|
||||
}
|
||||
|
||||
if (this.options.flyTo) {
|
||||
this.flyToByAnimationEnd();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象从地图上移除的创建钩子方法，
|
||||
* 每次remove时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_removedHook() {
|
||||
if (this.heatStyle.container) {
|
||||
mars3d__namespace.DomUtil.remove(this.heatStyle.container);
|
||||
delete this.heatStyle.container;
|
||||
}
|
||||
|
||||
this.clear();
|
||||
this._map.removeLayer(this._layer);
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加新的坐标点（含热力值）
|
||||
* @param {Cesium.Cartesian3 |LngLatPoint} item 坐标点（含热力值），示例: {lat:31.123,lng:103.568,value:1.2}
|
||||
* @param {Boolean} [isGD] 是否固定区域坐标，true时可以平滑更新
|
||||
* @return {void} 无
|
||||
*/
|
||||
addPosition(item, isGD) {
|
||||
this._positions = this._positions || [];
|
||||
this._positions.push(item);
|
||||
|
||||
this._updatePositionsHook(isGD);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新所有坐标点（含热力值）数据
|
||||
*
|
||||
* @param {Cesium.Cartesian3[] |LngLatPoint[]} arr 坐标点（含热力值），示例:[{lat:31.123,lng:103.568,value:1.2},{lat:31.233,lng:103.938,value:2.3}]
|
||||
* @param {Boolean} [isGD] 是否固定区域坐标，true时可以平滑更新
|
||||
* @return {void} 无
|
||||
*/
|
||||
setPositions(arr, isGD) {
|
||||
this._positions = arr;
|
||||
this._updatePositionsHook(isGD);
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除矢量对象
|
||||
* @return {void} 无
|
||||
*/
|
||||
clear() {
|
||||
if (this._graphic) {
|
||||
this._layer.removeGraphic(this._graphic, true);
|
||||
delete this._graphic;
|
||||
}
|
||||
}
|
||||
|
||||
_updatePositionsHook(isGD) {
|
||||
if (!this.show || !this._map || !this.positions || this.positions.length === 0) {
|
||||
return this
|
||||
}
|
||||
|
||||
const canvas = this._getHeatCanvas();
|
||||
|
||||
if (this.style.arc) {
|
||||
if (this._graphic && isGD) {
|
||||
this._graphic.uniforms.image = canvas;
|
||||
this._graphic.uniforms.bumpMap = this._getArcHeatCanvas();
|
||||
} else {
|
||||
this._createArcGraphic(canvas);
|
||||
}
|
||||
} else {
|
||||
if (this._graphic && isGD) {
|
||||
this._graphic.uniforms.image = canvas;
|
||||
} else {
|
||||
this._createGraphic(canvas);
|
||||
}
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
// 普通平面热力图
|
||||
_createGraphic(image) {
|
||||
this.clear();
|
||||
this._graphic = new mars3d__namespace.graphic.RectanglePrimitive({
|
||||
...this.options,
|
||||
rectangle: this._rectangle,
|
||||
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
||||
material: new Cesium.Material({
|
||||
fabric: {
|
||||
uniforms: {
|
||||
image: image
|
||||
},
|
||||
source: HeatMaterial
|
||||
},
|
||||
translucent: true
|
||||
}),
|
||||
flat: true
|
||||
})
|
||||
});
|
||||
this._layer.addGraphic(this._graphic);
|
||||
}
|
||||
|
||||
// 曲面 热力图
|
||||
_createArcGraphic(canvas) {
|
||||
this.clear();
|
||||
|
||||
const renderstate = Cesium.RenderState.fromCache({
|
||||
cull: {
|
||||
enabled: true
|
||||
},
|
||||
depthTest: {
|
||||
enabled: true
|
||||
},
|
||||
stencilTest: {
|
||||
enabled: true,
|
||||
frontFunction: Cesium.StencilFunction.ALWAYS,
|
||||
frontOperation: {
|
||||
fail: Cesium.StencilOperation.KEEP,
|
||||
zFail: Cesium.StencilOperation.KEEP,
|
||||
zPass: Cesium.StencilOperation.REPLACE
|
||||
},
|
||||
backFunction: Cesium.StencilFunction.ALWAYS,
|
||||
backOperation: {
|
||||
fail: Cesium.StencilOperation.KEEP,
|
||||
zFail: Cesium.StencilOperation.KEEP,
|
||||
zPass: Cesium.StencilOperation.REPLACE
|
||||
},
|
||||
reference: 0x2,
|
||||
mask: 0x2
|
||||
},
|
||||
blending: Cesium.BlendingState.ALPHA_BLEND
|
||||
});
|
||||
|
||||
// 曲面的起伏差值高
|
||||
const diffHeight = Math.floor(this.style.diffHeight ?? this._mBoundsMax * 0.02) + 0.1;
|
||||
if (this.style.diffHeight) {
|
||||
delete this.style.diffHeight;
|
||||
}
|
||||
|
||||
// 控制曲面的精度
|
||||
const splitNum = (this.style.splitNum, 100);
|
||||
let granularity = Math.max(this._rectangle.height, this._rectangle.width);
|
||||
this.style.granularity = granularity /= splitNum;
|
||||
|
||||
// console.log(this.options.style.granularity)
|
||||
|
||||
this._graphic = new mars3d__namespace.graphic.RectanglePrimitive({
|
||||
...this.options,
|
||||
rectangle: this._rectangle,
|
||||
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
||||
aboveGround: true,
|
||||
renderState: renderstate,
|
||||
material: new Cesium.Material({
|
||||
fabric: {
|
||||
uniforms: {
|
||||
image: canvas,
|
||||
repeat: new Cesium.Cartesian2(1.0, 1.0),
|
||||
color: new Cesium.Color(1.0, 1.0, 1.0, 0.01),
|
||||
bumpMap: this._getArcHeatCanvas()
|
||||
},
|
||||
source: HeatMaterial
|
||||
},
|
||||
translucent: true
|
||||
}),
|
||||
vertexShaderSource: `attribute vec3 position3DHigh;
|
||||
attribute vec3 position3DLow;
|
||||
attribute vec2 st;
|
||||
attribute float batchId;
|
||||
uniform sampler2D bumpMap_3;
|
||||
varying vec3 v_positionMC;
|
||||
varying vec3 v_positionEC;
|
||||
varying vec2 v_st;
|
||||
|
||||
void main()
|
||||
{
|
||||
vec4 p = czm_computePosition();
|
||||
v_positionMC = position3DHigh + position3DLow;
|
||||
v_positionEC = (czm_modelViewRelativeToEye * p).xyz;
|
||||
v_st = st;
|
||||
vec4 color = texture2D(bumpMap_3, v_st);
|
||||
float centerBump = distance(vec3(0.0),color.rgb);
|
||||
vec3 upDir = normalize(v_positionMC.xyz);
|
||||
vec3 disPos = upDir * centerBump * ${diffHeight};
|
||||
p +=vec4(disPos,0.0);
|
||||
gl_Position = czm_modelViewProjectionRelativeToEye * p;
|
||||
}
|
||||
`,
|
||||
flat: true
|
||||
})
|
||||
});
|
||||
this._layer.addGraphic(this._graphic);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图层内所有数据的 矩形边界值
|
||||
* @param {Boolean} [options] 控制参数
|
||||
* @param {Boolean} [options.isFormat=false] 是否格式化，格式化时示例： { xmin: 73.16895, xmax: 134.86816, ymin: 12.2023, ymax: 54.11485 }
|
||||
* @return {Cesium.Rectangle|Object} isFormat：true时，返回格式化对象，isFormat：false时返回Cesium.Rectangle对象
|
||||
*/
|
||||
getRectangle(options) {
|
||||
if (options?.isFormat && this._rectangle) {
|
||||
return mars3d__namespace.PolyUtil.formatRectangle(this._rectangle)
|
||||
} else {
|
||||
return this._rectangle
|
||||
}
|
||||
}
|
||||
|
||||
// 处理数据并返回生成的图片
|
||||
_getHeatCanvas() {
|
||||
const positions = this._positions;
|
||||
|
||||
const _points = [];
|
||||
let xmin, xmax, ymin, ymax;
|
||||
|
||||
positions.forEach((item) => {
|
||||
const point = mars3d__namespace.LngLatPoint.parse(item);
|
||||
if (!point) {
|
||||
return
|
||||
}
|
||||
point.value = item.value || 1; // 热力值
|
||||
|
||||
if (!this.options.rectangle) {
|
||||
if (xmin === undefined) {
|
||||
xmin = point.lng;
|
||||
xmax = point.lng;
|
||||
ymin = point.lat;
|
||||
ymax = point.lat;
|
||||
} else {
|
||||
xmin = Math.min(xmin, point.lng);
|
||||
xmax = Math.max(xmax, point.lng);
|
||||
ymin = Math.min(ymin, point.lat);
|
||||
ymax = Math.max(ymax, point.lat);
|
||||
}
|
||||
}
|
||||
_points.push(point);
|
||||
});
|
||||
|
||||
// 经纬度边界
|
||||
let _bounds = this.options.rectangle || { xmin, xmax, ymin, ymax };
|
||||
|
||||
// 墨卡托边界值
|
||||
const mBounds = getMercatorBounds(_bounds);
|
||||
|
||||
// 计算范围内的差值和极值
|
||||
const diffLng = Math.abs(mBounds.xmax - mBounds.xmin);
|
||||
const diffLat = Math.abs(mBounds.ymax - mBounds.ymin);
|
||||
const max = Math.max(diffLng, diffLat);
|
||||
const min = Math.min(diffLng, diffLat);
|
||||
|
||||
this._mBoundsMax = max;
|
||||
|
||||
// 计算是否缩放
|
||||
let scale = 1;
|
||||
if (max > this.options.maxCanvasSize) {
|
||||
scale = max / this.options.maxCanvasSize;
|
||||
if (min / scale < this.options.minCanvasSize) {
|
||||
scale = min / this.options.minCanvasSize;
|
||||
}
|
||||
} else if (min < this.options.minCanvasSize) {
|
||||
scale = min / this.options.minCanvasSize;
|
||||
if (max / scale > this.options.maxCanvasSize) {
|
||||
scale = max / this.options.maxCanvasSize;
|
||||
}
|
||||
}
|
||||
|
||||
const spacing = this.heatStyle.radius * 1.5;
|
||||
const canvasWidth = diffLng / scale + spacing * 2;
|
||||
const canvasHeight = diffLat / scale + spacing * 2;
|
||||
|
||||
const offset = spacing * scale;
|
||||
mBounds.xmin -= offset;
|
||||
mBounds.ymin -= offset;
|
||||
mBounds.xmax += offset;
|
||||
mBounds.ymax += offset;
|
||||
|
||||
this._scale = scale;
|
||||
|
||||
// 加扩大值后的边界
|
||||
_bounds = geLatLngBounds(mBounds);
|
||||
|
||||
this._rectangle = Cesium.Rectangle.fromDegrees(_bounds.xmin, _bounds.ymin, _bounds.xmax, _bounds.ymax);
|
||||
|
||||
let maxVal = _points[0].value ?? 1;
|
||||
let minVal = _points[0].value ?? 0;
|
||||
const hetdata = [];
|
||||
_points.forEach((point) => {
|
||||
const mkt = mars3d__namespace.PointTrans.lonlat2mercator([point.lng, point.lat]);
|
||||
|
||||
const value = point.value || 1;
|
||||
const coord_x = Math.round((mkt[0] - mBounds.xmin) / scale);
|
||||
const coord_y = Math.round((mBounds.ymax - mkt[1]) / scale);
|
||||
|
||||
maxVal = Math.max(maxVal, value); // 求最大值
|
||||
minVal = Math.min(minVal, value);
|
||||
|
||||
hetdata.push({
|
||||
x: coord_x,
|
||||
y: coord_y,
|
||||
value: value
|
||||
});
|
||||
});
|
||||
const heatData = {
|
||||
min: this.options.min ?? minVal,
|
||||
max: this.options.max ?? maxVal,
|
||||
data: hetdata
|
||||
};
|
||||
this._last_heatData = heatData;
|
||||
|
||||
if (
|
||||
!this._last_mBounds ||
|
||||
mBounds.xmin !== this._last_mBounds.xmin ||
|
||||
mBounds.ymin !== this._last_mBounds.ymin ||
|
||||
mBounds.xmax !== this._last_mBounds.xmax ||
|
||||
mBounds.ymax !== this._last_mBounds.ymax
|
||||
) {
|
||||
this._last_mBounds = mBounds;
|
||||
|
||||
if (!this.heatStyle.container) {
|
||||
this.heatStyle.container = mars3d__namespace.DomUtil.create("div", "mars3d-heatmap mars3d-hideDiv", this._map.container);
|
||||
}
|
||||
this.heatStyle.container.style.cssText = `width:${canvasWidth}px;height:${canvasHeight}px;`;
|
||||
|
||||
if (!this._heat) {
|
||||
this._heat = h337__namespace.create(this.heatStyle);
|
||||
} else {
|
||||
this._heat.configure(this.heatStyle);
|
||||
}
|
||||
}
|
||||
this._heat.setData(heatData);
|
||||
|
||||
const canvas = mars3d__namespace.DomUtil.copyCanvas(this._heat._renderer.canvas);
|
||||
|
||||
// 注释不删除，便于动态更新
|
||||
// if (this.heatStyle.container) {
|
||||
// mars3d.DomUtil.remove(this.heatStyle.container)
|
||||
// delete this.heatStyle.container
|
||||
// }
|
||||
|
||||
return canvas
|
||||
}
|
||||
|
||||
_getArcHeatCanvas() {
|
||||
this._heat.configure({
|
||||
radius: this.heatStyle.radius * this.style.arcRadiusScale,
|
||||
blur: this.heatStyle.blur * this.style.arcBlurScale,
|
||||
gradient: this.heatStyle.gradientArc || {
|
||||
0.25: "rgb(0,0,0)",
|
||||
0.55: "rgb(140,140,140)",
|
||||
0.85: "rgb(216,216,216)",
|
||||
1.0: "rgb(255,255,255)"
|
||||
}
|
||||
});
|
||||
const canvasBump = mars3d__namespace.DomUtil.copyCanvas(this._heat._renderer.canvas);
|
||||
|
||||
this._heat.configure(this.options.heatStyle); // 恢复配置
|
||||
|
||||
return canvasBump
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据坐标点获取其对应的value值和颜色值
|
||||
* @param {Cesium.Cartesian3 |LngLatPoint} item 坐标点
|
||||
* @return {Object} 格式为 {"x":2081,"y":767,"value":3,"color":"rgba(209,231,0,195)"}
|
||||
*/
|
||||
getPointData(item) {
|
||||
const point = mars3d__namespace.LngLatPoint.parse(item);
|
||||
if (!point) {
|
||||
return {}
|
||||
}
|
||||
const mkt = mars3d__namespace.PointTrans.lonlat2mercator([point.lng, point.lat]);
|
||||
const mBounds = this._last_mBounds;
|
||||
|
||||
const coord_x = Math.round((mkt[0] - mBounds.xmin) / this._scale);
|
||||
const coord_y = Math.round((mBounds.ymax - mkt[1]) / this._scale);
|
||||
const value = this._heat.getValueAt({ x: coord_x, y: coord_y });
|
||||
const rgba = this._heat._renderer.ctx.getImageData(coord_x - 1, coord_y - 1, 1, 1).data;
|
||||
|
||||
return {
|
||||
x: coord_x,
|
||||
y: coord_y,
|
||||
value: value,
|
||||
color: "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mars3d__namespace.layer.HeatLayer = HeatLayer;
|
||||
mars3d__namespace.LayerUtil.register("heat", HeatLayer);
|
||||
|
||||
function getMercatorBounds(bounds) {
|
||||
const pt1 = mars3d__namespace.PointTrans.lonlat2mercator([bounds.xmin, bounds.ymin]);
|
||||
const pt2 = mars3d__namespace.PointTrans.lonlat2mercator([bounds.xmax, bounds.ymax]);
|
||||
return { xmin: pt1[0], ymin: pt1[1], xmax: pt2[0], ymax: pt2[1] }
|
||||
}
|
||||
|
||||
function geLatLngBounds(bounds) {
|
||||
const pt1 = mars3d__namespace.PointTrans.mercator2lonlat([bounds.xmin, bounds.ymin]);
|
||||
const pt2 = mars3d__namespace.PointTrans.mercator2lonlat([bounds.xmax, bounds.ymax]);
|
||||
return { xmin: pt1[0], ymin: pt1[1], xmax: pt2[0], ymax: pt2[1] }
|
||||
}
|
||||
|
||||
exports.HeatLayer = HeatLayer;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
15
public/map/mars3d/plugins/heatmap/mars3d-heatmap.js
Normal file
15
public/map/mars3d/plugins/heatmap/mars3d-heatmap.js
Normal file
File diff suppressed because one or more lines are too long
752
public/map/mars3d/plugins/mapv/mars3d-mapv-src.js
Normal file
752
public/map/mars3d/plugins/mapv/mars3d-mapv-src.js
Normal file
@ -0,0 +1,752 @@
|
||||
/**
|
||||
* Mars3D平台插件,结合mapv可视化功能插件 mars3d-mapv
|
||||
*
|
||||
* 版本信息：v3.4.7
|
||||
* 编译日期：2022-09-15 16:25:35
|
||||
* 版权所有：Copyright by 火星科技 http://mars3d.cn
|
||||
* 使用单位：安徽XX有限公司 ，2021-08-18
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, (window.mapv || require('mapv')), (window.mars3d || require('mars3d'))) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'mapv', 'mars3d'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["mars3d-mapv"] = {}, global.mapv, global.mars3d));
|
||||
})(this, (function (exports, mapv, mars3d) { 'use strict';
|
||||
|
||||
function _interopNamespace(e) {
|
||||
if (e && e.__esModule) return e;
|
||||
var n = Object.create(null);
|
||||
if (e) {
|
||||
Object.keys(e).forEach(function (k) {
|
||||
if (k !== 'default') {
|
||||
var d = Object.getOwnPropertyDescriptor(e, k);
|
||||
Object.defineProperty(n, k, d.get ? d : {
|
||||
enumerable: true,
|
||||
get: function () { return e[k]; }
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
n["default"] = e;
|
||||
return n;
|
||||
}
|
||||
|
||||
var mapv__namespace = /*#__PURE__*/_interopNamespace(mapv);
|
||||
var mars3d__namespace = /*#__PURE__*/_interopNamespace(mars3d);
|
||||
|
||||
/* eslint-disable no-unused-expressions */
|
||||
|
||||
const Cesium$1 = mars3d__namespace.Cesium;
|
||||
|
||||
const baiduMapLayer = mapv__namespace ? mapv__namespace.baiduMapLayer : null;
|
||||
|
||||
// eslint-disable-next-line no-proto
|
||||
const BaseLayer$1 = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
|
||||
|
||||
class MapVRenderer extends BaseLayer$1 {
|
||||
//= ========= 构造方法 ==========
|
||||
constructor(map, dataset, options, mapVLayer) {
|
||||
super(map, dataset, options);
|
||||
if (!BaseLayer$1) {
|
||||
return
|
||||
}
|
||||
|
||||
this.map = map;
|
||||
this.scene = map.scene;
|
||||
|
||||
this.dataSet = dataset;
|
||||
options = options || {};
|
||||
|
||||
this.init(options);
|
||||
this.argCheck(options);
|
||||
this.initDevicePixelRatio();
|
||||
this.canvasLayer = mapVLayer;
|
||||
this.stopAniamation = !1;
|
||||
this.animation = options.animation;
|
||||
// this.bindEvent()
|
||||
}
|
||||
|
||||
//= ========= 方法 ==========
|
||||
initDevicePixelRatio() {
|
||||
this.devicePixelRatio = window.devicePixelRatio || 1;
|
||||
}
|
||||
|
||||
addAnimatorEvent() {}
|
||||
animatorMovestartEvent() {
|
||||
const t = this.options.animation;
|
||||
this.isEnabledTime() && this.animator && (this.steps.step = t.stepsRange.start);
|
||||
}
|
||||
|
||||
animatorMoveendEvent() {
|
||||
this.isEnabledTime() && this.animator;
|
||||
}
|
||||
|
||||
// bindEvent() {
|
||||
// if (this.options.methods.click) {
|
||||
// this.map.on("click", this.clickEvent, this)
|
||||
// }
|
||||
// if (this.options.methods.mousemove) {
|
||||
// this.map.on("mouseMove", this.mousemoveEvent, this)
|
||||
// }
|
||||
// }
|
||||
|
||||
// unbindEvent() {
|
||||
// this.map.off("click", this.clickEvent, this)
|
||||
// this.map.off("mouseMove", this.mousemoveEvent, this)
|
||||
// }
|
||||
|
||||
// clickEvent(event) {
|
||||
// super.clickEvent(event.windowPosition, event)
|
||||
// }
|
||||
|
||||
// mousemoveEvent(event) {
|
||||
// super.mousemoveEvent(event.windowPosition, event)
|
||||
// }
|
||||
|
||||
getContext() {
|
||||
return this.canvasLayer.canvas.getContext(this.context)
|
||||
}
|
||||
|
||||
init(t) {
|
||||
this.options = t;
|
||||
this.initDataRange(t);
|
||||
this.context = this.options.context || "2d";
|
||||
|
||||
if (this.options.zIndex && this.canvasLayer && this.canvasLayer.setZIndex) {
|
||||
this.canvasLayer.setZIndex(this.options.zIndex);
|
||||
}
|
||||
|
||||
this.initAnimator();
|
||||
}
|
||||
|
||||
_canvasUpdate(t) {
|
||||
const scene = this.scene;
|
||||
if (this.canvasLayer && !this.stopAniamation) {
|
||||
const i = this.options.animation;
|
||||
const n = this.getContext();
|
||||
if (this.isEnabledTime()) {
|
||||
// eslint-disable-next-line no-void
|
||||
if (void 0 === t) {
|
||||
// eslint-disable-next-line no-void
|
||||
return void this.clear(n)
|
||||
}
|
||||
this.context === "2d" &&
|
||||
(n.save(),
|
||||
(n.globalCompositeOperation = "destination-out"),
|
||||
(n.fillStyle = "rgba(0, 0, 0, .1)"),
|
||||
n.fillRect(0, 0, n.canvas.width, n.canvas.height),
|
||||
n.restore());
|
||||
} else {
|
||||
this.clear(n);
|
||||
}
|
||||
if (this.context === "2d") {
|
||||
for (const o in this.options) {
|
||||
n[o] = this.options[o];
|
||||
}
|
||||
} else {
|
||||
n.clear(n.COLOR_BUFFER_BIT);
|
||||
}
|
||||
const a = {
|
||||
transferCoordinate: function (data) {
|
||||
const defVal = null; // [-999, -999]
|
||||
|
||||
let heightTerrain = scene.mapvFixedHeight;
|
||||
if (scene.mapvAutoHeight) {
|
||||
heightTerrain = scene.globe.getHeight(Cesium$1.Cartographic.fromDegrees(data[0], data[1]));
|
||||
}
|
||||
|
||||
// 坐标转换
|
||||
const position = Cesium$1.Cartesian3.fromDegrees(data[0], data[1], heightTerrain);
|
||||
if (!position) {
|
||||
return defVal
|
||||
}
|
||||
const px = scene.cartesianToCanvasCoordinates(position);
|
||||
if (!px) {
|
||||
return defVal
|
||||
}
|
||||
|
||||
// 判断是否在球的背面
|
||||
if (scene.mapvDepthTest && scene.mode === Cesium$1.SceneMode.SCENE3D) {
|
||||
const occluder = new Cesium$1.EllipsoidalOccluder(scene.globe.ellipsoid, scene.camera.positionWC);
|
||||
const visible = occluder.isPointVisible(position);
|
||||
// visible为true说明点在球的正面，否则点在球的背面。
|
||||
// 需要注意的是不能用这种方法判断点的可见性，如果球放的比较大，点跑到屏幕外面，它返回的依然为true
|
||||
if (!visible) {
|
||||
return defVal
|
||||
}
|
||||
}
|
||||
// 判断是否在球的背面
|
||||
|
||||
return [px.x, px.y]
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line no-void
|
||||
void 0 !== t &&
|
||||
(a.filter = function (e) {
|
||||
const n = i.trails || 10;
|
||||
return !!(t && e.time > t - n && e.time < t)
|
||||
});
|
||||
const c = this.dataSet.get(a);
|
||||
// eslint-disable-next-line no-sequences
|
||||
this.processData(c), this.options.unit === "m" && this.options.size, (this.options._size = this.options.size);
|
||||
|
||||
const h = scene.cartesianToCanvasCoordinates(Cesium$1.Cartesian3.fromDegrees(0, 0));
|
||||
if (!h) {
|
||||
return
|
||||
}
|
||||
|
||||
this.drawContext(n, new mapv__namespace.DataSet(c), this.options, h);
|
||||
this.options.updateCallback && this.options.updateCallback(t);
|
||||
}
|
||||
}
|
||||
|
||||
updateData(t, e) {
|
||||
let i = t;
|
||||
// eslint-disable-next-line
|
||||
i && i.get && (i = i.get()), void 0 !== i && this.dataSet.set(i);
|
||||
|
||||
super.update({
|
||||
options: e
|
||||
});
|
||||
}
|
||||
|
||||
addData(t, e) {
|
||||
let i = t;
|
||||
// eslint-disable-next-line
|
||||
t && t.get && (i = t.get()),
|
||||
this.dataSet.add(i),
|
||||
this.update({
|
||||
options: e
|
||||
});
|
||||
}
|
||||
|
||||
getData() {
|
||||
return this.dataSet
|
||||
}
|
||||
|
||||
removeData(t) {
|
||||
if (this.dataSet) {
|
||||
const e = this.dataSet.get({
|
||||
filter: function (e) {
|
||||
return t == null || typeof t !== "function" || !t(e)
|
||||
}
|
||||
});
|
||||
this.dataSet.set(e);
|
||||
this.update({
|
||||
options: null
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
clearData() {
|
||||
this.dataSet && this.dataSet.clear();
|
||||
this.update({
|
||||
options: null
|
||||
});
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.canvasLayer.draw();
|
||||
}
|
||||
|
||||
clear(t) {
|
||||
t && t.clearRect && t.clearRect(0, 0, t.canvas.width, t.canvas.height);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
// this.unbindEvent()
|
||||
this.clear(this.getContext());
|
||||
this.clearData();
|
||||
this.animator && this.animator.stop();
|
||||
this.animator = null;
|
||||
this.canvasLayer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改mapv内部方法，已适应数据在球背面或看不见的区域的数据不显示的处理
|
||||
if (mapv__namespace?.DataSet) {
|
||||
mapv__namespace.DataSet.prototype.transferCoordinate = function (data, transferFn, fromColumn, toColumnName) {
|
||||
toColumnName = toColumnName || "_coordinates";
|
||||
fromColumn = fromColumn || "coordinates";
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const geometry = data[i].geometry;
|
||||
const coordinates = geometry[fromColumn];
|
||||
switch (geometry.type) {
|
||||
case "Point":
|
||||
{
|
||||
const pt = transferFn(coordinates);
|
||||
if (pt) {
|
||||
geometry[toColumnName] = pt;
|
||||
} else {
|
||||
geometry[toColumnName] = [-999, -999];
|
||||
}
|
||||
}
|
||||
break
|
||||
case "LineString":
|
||||
{
|
||||
const newCoordinates = [];
|
||||
for (let j = 0; j < coordinates.length; j++) {
|
||||
const pt = transferFn(coordinates[j]);
|
||||
if (pt) {
|
||||
newCoordinates.push(pt);
|
||||
}
|
||||
}
|
||||
geometry[toColumnName] = newCoordinates;
|
||||
}
|
||||
break
|
||||
case "MultiLineString":
|
||||
case "Polygon":
|
||||
{
|
||||
const newCoordinates = getPolygon(coordinates);
|
||||
geometry[toColumnName] = newCoordinates;
|
||||
}
|
||||
break
|
||||
case "MultiPolygon":
|
||||
{
|
||||
const newCoordinates = [];
|
||||
for (let c = 0; c < coordinates.length; c++) {
|
||||
const polygon = getPolygon(coordinates[c]);
|
||||
if (polygon.length > 0) {
|
||||
newCoordinates.push(polygon);
|
||||
}
|
||||
}
|
||||
|
||||
geometry[toColumnName] = newCoordinates;
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function getPolygon(coordinates) {
|
||||
const newCoordinates = [];
|
||||
for (let c = 0; c < coordinates.length; c++) {
|
||||
const coordinate = coordinates[c];
|
||||
const newcoordinate = [];
|
||||
for (let j = 0; j < coordinate.length; j++) {
|
||||
const pt = transferFn(coordinate[j]);
|
||||
if (pt) {
|
||||
newcoordinate.push(pt);
|
||||
}
|
||||
}
|
||||
if (newcoordinate.length > 0) {
|
||||
newCoordinates.push(newcoordinate);
|
||||
}
|
||||
}
|
||||
return newCoordinates
|
||||
}
|
||||
|
||||
return data
|
||||
};
|
||||
} else {
|
||||
throw new Error("请引入 mapv 库 ")
|
||||
}
|
||||
|
||||
const Cesium = mars3d__namespace.Cesium;
|
||||
const BaseLayer = mars3d__namespace.layer.BaseLayer;
|
||||
|
||||
let divId = 0;
|
||||
|
||||
/**
|
||||
* MapV图层
|
||||
* 【需要引入 mapv.js 库 和 mars3d-mapv 插件库】
|
||||
*
|
||||
* @param {Object} options 图层参数，包括：
|
||||
* @param {Object} [options.data] new mapv.DataSet(data)的data值，如有传入时可以用于替代dataSet参数
|
||||
* @param {Boolean} [options.depthTest=true] 是否进行计算深度判断，在地球背面或被遮挡时不显示（大数据时，需要关闭）
|
||||
* @param {Number} [options.fixedHeight=0] 点的固定的海拔高度
|
||||
* @param {Boolean} [options.clampToGround=false] 点是否贴地
|
||||
* @param {*} [options.多个参数] 支持mapv本身所有drawOptions图层样式参数，具体查阅 [mapv库drawOptions文档]{@link https://github.com/huiyan-fe/mapv/wiki/%E7%B1%BB%E5%8F%82%E8%80%83} ，也可以 [在线编辑图层样式]{@link https://mapv.baidu.com/editor/}
|
||||
*
|
||||
* @param {String|Number} [options.id = createGuid()] 图层id标识
|
||||
* @param {String|Number} [options.pid = -1] 图层父级的id，一般图层管理中使用
|
||||
* @param {String} [options.name = ''] 图层名称
|
||||
* @param {Boolean} [options.show = true] 图层是否显示
|
||||
* @param {BaseClass|Boolean} [options.eventParent] 指定的事件冒泡对象，默认为map对象，false时不冒泡
|
||||
* @param {Object} [options.center] 图层自定义定位视角 {@link Map#setCameraView}
|
||||
* @param {Number} options.center.lng 经度值, 180 - 180
|
||||
* @param {Number} options.center.lat 纬度值, -90 - 90
|
||||
* @param {Number} [options.center.alt] 高度值
|
||||
* @param {Number} [options.center.heading] 方向角度值，绕垂直于地心的轴旋转角度, 0至360
|
||||
* @param {Number} [options.center.pitch] 俯仰角度值，绕纬度线旋转角度, -90至90
|
||||
* @param {Number} [options.center.roll] 翻滚角度值，绕经度线旋转角度, -90至90
|
||||
* @param {Boolean} [options.flyTo] 加载完成数据后是否自动飞行定位到数据所在的区域。
|
||||
*
|
||||
* @param {*} [dataSet] mapv.DataSet数据集,可以参考[ MapV数据集对象说明]{@link https://github.com/huiyan-fe/mapv/blob/master/src/data/DataSet.md}
|
||||
* @export
|
||||
* @class MapVLayer
|
||||
* @extends {BaseLayer}
|
||||
*/
|
||||
class MapVLayer extends BaseLayer {
|
||||
//= ========= 构造方法 ==========
|
||||
constructor(options, dataSet) {
|
||||
super(options);
|
||||
|
||||
this._pointerEvents = this.options.pointerEvents;
|
||||
this.dataSet = dataSet || new mapv__namespace.DataSet(options.data);
|
||||
|
||||
/**
|
||||
* 图层对应的Canvas对象
|
||||
* @type {HTMLCanvasElement}
|
||||
* @readonly
|
||||
*/
|
||||
this.canvas = null;
|
||||
}
|
||||
|
||||
// /**
|
||||
// * 是否可以鼠标交互，为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件。true时无法缩放地球，但可以使用mapv相关的事件
|
||||
// * @type {Boolean}
|
||||
// */
|
||||
get pointerEvents() {
|
||||
return this._pointerEvents
|
||||
}
|
||||
|
||||
set pointerEvents(value) {
|
||||
this._pointerEvents = value;
|
||||
if (this.canvas) {
|
||||
if (value) {
|
||||
this.canvas.style.pointerEvents = "all";
|
||||
} else {
|
||||
/* 加上这个css后鼠标可以穿透，但是无法触发单击等鼠标事件 */
|
||||
this.canvas.style.pointerEvents = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//= ========= 方法 ==========
|
||||
_showHook(show) {
|
||||
if (show) {
|
||||
this.canvas.style.display = "block";
|
||||
} else {
|
||||
this.canvas.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图前创建一些对象的钩子方法，
|
||||
* 只会调用一次
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_mountedHook() {
|
||||
this._map.scene.mapvDepthTest = this.options.depthTest ?? true; // 是否进行计算深度（大数据时，需要关闭）
|
||||
this._map.scene.mapvAutoHeight = this.options.clampToGround ?? false;
|
||||
this._map.scene.mapvFixedHeight = this.options.fixedHeight ?? 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图上的创建钩子方法，
|
||||
* 每次add时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_addedHook() {
|
||||
if (this.dataSet && (!this.dataSet._data || this.dataSet._data.length === 0)) {
|
||||
this.dataSet._data = [].concat(this.dataSet._dataCache);
|
||||
}
|
||||
this._mapVRenderer = new MapVRenderer(this._map, this.dataSet, this.options, this);
|
||||
|
||||
this.initDevicePixelRatio();
|
||||
this.canvas = this._createCanvas();
|
||||
this.render = this.render.bind(this);
|
||||
|
||||
this.bindEvent();
|
||||
this._reset();
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象从地图上移除的创建钩子方法，
|
||||
* 每次remove时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_removedHook() {
|
||||
// 释放
|
||||
this.unbindEvent();
|
||||
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.destroy();
|
||||
this._mapVRenderer = null;
|
||||
}
|
||||
this.canvas.parentElement.removeChild(this.canvas);
|
||||
}
|
||||
|
||||
initDevicePixelRatio() {
|
||||
this.devicePixelRatio = window.devicePixelRatio || 1;
|
||||
}
|
||||
|
||||
bindEvent() {
|
||||
// 绑定cesium事件与mapv联动
|
||||
this._map.on(mars3d__namespace.EventType.mouseDown, this._onMoveStartEvent, this); // 按下
|
||||
// this._map.on(mars3d.EventType.mouseUp, this._onMoveEndEvent, this) //释放
|
||||
this._map.on(mars3d__namespace.EventType.cameraMoveStart, this._onMoveStartEvent, this);
|
||||
this._map.on(mars3d__namespace.EventType.cameraMoveEnd, this._onMoveEndEvent, this);
|
||||
|
||||
if (this.options?.methods?.click) {
|
||||
this._map.on(mars3d__namespace.EventType.click, this._onMapClick, this);
|
||||
}
|
||||
if (this.options?.methods?.mousemove) {
|
||||
this._map.on(mars3d__namespace.EventType.mouseMove, this._onMapMouseMove, this);
|
||||
}
|
||||
}
|
||||
|
||||
unbindEvent() {
|
||||
this._map.off(mars3d__namespace.EventType.mouseDown, this._onMoveStartEvent, this); // 按下
|
||||
// this._map.off(mars3d.EventType.mouseUp, this._onMoveEndEvent, this) //释放
|
||||
this._map.off(mars3d__namespace.EventType.cameraMoveStart, this._onMoveStartEvent, this);
|
||||
this._map.off(mars3d__namespace.EventType.cameraMoveEnd, this._onMoveEndEvent, this);
|
||||
|
||||
this._map.off(mars3d__namespace.EventType.postRender, this._reset, this);
|
||||
|
||||
if (this.options?.methods?.click) {
|
||||
this._map.off(mars3d__namespace.EventType.click, this._onMapClick, this);
|
||||
}
|
||||
if (this.options?.methods?.mousemove) {
|
||||
this._map.off(mars3d__namespace.EventType.mouseMove, this._onMapMouseMove, this);
|
||||
}
|
||||
}
|
||||
|
||||
_onMoveStartEvent() {
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.animatorMovestartEvent();
|
||||
|
||||
this._map.off(mars3d__namespace.EventType.postRender, this._reset, this);
|
||||
this._map.on(mars3d__namespace.EventType.postRender, this._reset, this);
|
||||
}
|
||||
}
|
||||
|
||||
_onMoveEndEvent() {
|
||||
if (this._mapVRenderer) {
|
||||
this._map.off(mars3d__namespace.EventType.postRender, this._reset, this);
|
||||
|
||||
this._mapVRenderer.animatorMoveendEvent();
|
||||
this._reset();
|
||||
}
|
||||
}
|
||||
|
||||
_setOptionsHook(options, newOptions) {
|
||||
this._removedHook();
|
||||
this._addedHook();
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增mapv数据
|
||||
* @param {*} dataSet mapv.DataSet数据集,可以参考[ MapV数据集对象说明]{@link https://github.com/huiyan-fe/mapv/blob/master/src/data/DataSet.md}
|
||||
* @returns {void} 无
|
||||
*/
|
||||
addData(dataSet) {
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.addData(dataSet, this.options);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新mapv数据
|
||||
* @param {*} dataSet mapv.DataSet数据集,可以参考[ MapV数据集对象说明]{@link https://github.com/huiyan-fe/mapv/blob/master/src/data/DataSet.md}
|
||||
* @returns {void} 无
|
||||
*/
|
||||
updateData(dataSet) {
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.updateData(dataSet, this.options);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取数据
|
||||
* @return {*} mapv.DataSet数据集,可以参考[ MapV数据集对象说明]{@link https://github.com/huiyan-fe/mapv/blob/master/src/data/DataSet.md}
|
||||
*/
|
||||
getData() {
|
||||
if (this._mapVRenderer) {
|
||||
this.dataSet = this._mapVRenderer.getData();
|
||||
}
|
||||
return this.dataSet
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除指定数据
|
||||
* @param {*} data mapv.DataSet数据集
|
||||
* @returns {void} 无
|
||||
*/
|
||||
removeData(data) {
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.removeData(data);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除所有数据
|
||||
* @returns {void} 无
|
||||
*/
|
||||
removeAllData() {
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.clearData();
|
||||
}
|
||||
}
|
||||
|
||||
_createCanvas() {
|
||||
const container = mars3d__namespace.DomUtil.create("canvas", "mars3d-mapv", this._map.container);
|
||||
container.id = this.options.layerid || "mapv" + divId++;
|
||||
container.style.position = "absolute";
|
||||
container.style.top = "0px";
|
||||
container.style.left = "0px";
|
||||
container.style.pointerEvents = this._pointerEvents ? "auto" : "none"; // auto时可以交互，但是没法放大地球, none没法交互
|
||||
container.style.zIndex = this.options.zIndex || 100;
|
||||
container.width = parseInt(this._map.canvas.width);
|
||||
container.height = parseInt(this._map.canvas.height);
|
||||
container.style.width = this._map.canvas.style.width;
|
||||
container.style.height = this._map.canvas.style.height;
|
||||
|
||||
if (this.options.context === "2d") {
|
||||
const e = this.devicePixelRatio;
|
||||
container.getContext(this.options.context).scale(e, e);
|
||||
}
|
||||
return container
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this.resize();
|
||||
this.render();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重绘图层
|
||||
* @return {void} 无
|
||||
*/
|
||||
draw() {
|
||||
this._reset();
|
||||
}
|
||||
|
||||
remove() {
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.destroy();
|
||||
this._mapVRenderer = null;
|
||||
}
|
||||
this.canvas.parentElement.removeChild(this.canvas);
|
||||
}
|
||||
|
||||
render() {
|
||||
this._mapVRenderer._canvasUpdate();
|
||||
}
|
||||
|
||||
/**
|
||||
* 改变图层canvas容器尺寸
|
||||
* @return {void} 无
|
||||
*/
|
||||
resize() {
|
||||
if (this.canvas) {
|
||||
const container = this.canvas;
|
||||
container.style.position = "absolute";
|
||||
container.style.top = "0px";
|
||||
container.style.left = "0px";
|
||||
container.width = parseInt(this._map.canvas.width);
|
||||
container.height = parseInt(this._map.canvas.height);
|
||||
container.style.width = this._map.canvas.style.width;
|
||||
container.style.height = this._map.canvas.style.height;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图层内所有数据的 矩形边界值
|
||||
* @param {Boolean} [options] 控制参数
|
||||
* @param {Boolean} [options.isFormat=false] 是否格式化，格式化时示例： { xmin: 73.16895, xmax: 134.86816, ymin: 12.2023, ymax: 54.11485 }
|
||||
* @return {Cesium.Rectangle|Object} isFormat：true时，返回格式化对象，isFormat：false时返回Cesium.Rectangle对象
|
||||
*/
|
||||
getRectangle(options) {
|
||||
if (!this.dataSet || !this.dataSet._data) {
|
||||
return
|
||||
}
|
||||
|
||||
const extent = mars3d__namespace.Util.getExtentByGeoJSON({ type: "FeatureCollection", features: this.dataSet._data });
|
||||
if (!extent) {
|
||||
return
|
||||
}
|
||||
|
||||
if (options?.isFormat) {
|
||||
return extent
|
||||
} else {
|
||||
return Cesium.Rectangle.fromDegrees(extent.xmin, extent.ymin, extent.xmax, extent.ymax)
|
||||
}
|
||||
}
|
||||
|
||||
/// /////////////////事件相关//////////////////////
|
||||
_onMapClick(event) {
|
||||
this._cache_event = event;
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.clickEvent(event.windowPosition, event);
|
||||
}
|
||||
}
|
||||
|
||||
_onMapMouseMove(event) {
|
||||
this._cache_event = event;
|
||||
if (this._mapVRenderer) {
|
||||
this._mapVRenderer.mousemoveEvent(event.windowPosition, event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定事件处理函数,
|
||||
*
|
||||
* @param {String} eventName 事件名称，全小写，例如'click'，'mouseMove'
|
||||
* @param {Function} callback 绑定的监听器回调方法
|
||||
* @param {Object} [context] 侦听器的上下文(this关键字将指向的对象)。
|
||||
* @return {EchartsLayer} 当前对象本身,可以链式调用
|
||||
*/
|
||||
on(eventName, callback, context) {
|
||||
this.options.methods = this.options.methods || {};
|
||||
|
||||
if (eventName === mars3d__namespace.EventType.click) {
|
||||
this.options.methods.click = (e) => {
|
||||
if (e) {
|
||||
callback.bind(context)({ ...this._cache_event, layer: this, data: e });
|
||||
}
|
||||
};
|
||||
this._map.on(mars3d__namespace.EventType.click, this._onMapClick, this);
|
||||
} else if (eventName === mars3d__namespace.EventType.mouseMove) {
|
||||
this.options.methods.mousemove = (e) => {
|
||||
if (e) {
|
||||
callback.bind(context)({ ...this._cache_event, layer: this, data: e });
|
||||
}
|
||||
};
|
||||
this._map.on(mars3d__namespace.EventType.mouseMove, this._onMapMouseMove, this);
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* 解除绑定指定类型事件监听器
|
||||
*
|
||||
* @param {String} eventName 事件名称，全小写，例如'click'，'mouseMove'
|
||||
* @param {Function} [callback] 绑定的监听器回调方法,未传值时解绑所有指定类型对应事件
|
||||
* @return {EchartsLayer} 当前对象本身,可以链式调用
|
||||
*/
|
||||
off(eventName, callback) {
|
||||
if (eventName === "click") {
|
||||
this._map.off(eventName, this._onMapClick, this);
|
||||
if (this.options.methods?.mousemove) {
|
||||
delete this.options.methods.click;
|
||||
}
|
||||
} else if (eventName === "mouseMove") {
|
||||
this._map.off(eventName, this._onMapMouseMove, this);
|
||||
if (this.options.methods?.mousemove) {
|
||||
delete this.options.methods.mousemove;
|
||||
}
|
||||
}
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
// 注册下
|
||||
mars3d__namespace.LayerUtil.register("mapv", MapVLayer);
|
||||
|
||||
mars3d__namespace.layer.MapVLayer = MapVLayer;
|
||||
|
||||
exports.MapVLayer = MapVLayer;
|
||||
Object.keys(mapv).forEach(function (k) {
|
||||
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
||||
enumerable: true,
|
||||
get: function () { return mapv[k]; }
|
||||
});
|
||||
});
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
15
public/map/mars3d/plugins/mapv/mars3d-mapv.js
Normal file
15
public/map/mars3d/plugins/mapv/mars3d-mapv.js
Normal file
File diff suppressed because one or more lines are too long
551
public/map/mars3d/plugins/supermap/mars3d-supermap-src.js
Normal file
551
public/map/mars3d/plugins/supermap/mars3d-supermap-src.js
Normal file
@ -0,0 +1,551 @@
|
||||
/**
|
||||
* Mars3D平台插件,结合supermap超图库使用的功能插件 mars3d-supermap
|
||||
*
|
||||
* 版本信息：v3.4.7
|
||||
* 编译日期：2022-09-15 16:25:35
|
||||
* 版权所有：Copyright by 火星科技 http://mars3d.cn
|
||||
* 使用单位：安徽XX有限公司 ，2021-08-18
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, (window.mars3d || require('mars3d'))) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'mars3d'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["mars3d-supermap"] = {}, global.mars3d));
|
||||
})(this, (function (exports, mars3d) { 'use strict';
|
||||
|
||||
function _interopNamespace(e) {
|
||||
if (e && e.__esModule) return e;
|
||||
var n = Object.create(null);
|
||||
if (e) {
|
||||
Object.keys(e).forEach(function (k) {
|
||||
if (k !== 'default') {
|
||||
var d = Object.getOwnPropertyDescriptor(e, k);
|
||||
Object.defineProperty(n, k, d.get ? d : {
|
||||
enumerable: true,
|
||||
get: function () { return e[k]; }
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
n["default"] = e;
|
||||
return n;
|
||||
}
|
||||
|
||||
var mars3d__namespace = /*#__PURE__*/_interopNamespace(mars3d);
|
||||
|
||||
const Cesium$2 = mars3d__namespace.Cesium;
|
||||
|
||||
const BaseLayer$1 = mars3d__namespace.layer.BaseLayer;
|
||||
|
||||
/**
|
||||
* 超图S3M三维模型图层,
|
||||
* 【需要引入 mars3d-supermap 插件库】
|
||||
*
|
||||
* @param {Object} [options] 参数对象，包括以下：
|
||||
* @param {String} options.url supermap的S3M服务地址,示例："url": "http://www.supermapol.com/realspace/services/3D-Olympic/rest/realspace"
|
||||
* @param {String} [options.layername] 指定图层名称,未指定时，打开iserver场景服务下所有图层
|
||||
* @param {String} [options.sceneName] 工作空间中有多个场景，需要指定场景名称；设置为undefined，默认打开第一个
|
||||
* @param {Object} [options.s3mOptions] [S3M支持的参数]{@link http://support.supermap.com.cn:8090/webgl/docs/Documentation/S3MTilesLayer.html?classFilter=S3MTilesLayer} ,示例： {"selectEnabled":false},
|
||||
* @param {Object} [options.position] 模型新的中心点位置（移动模型）
|
||||
* @param {Number} options.position.alt 获取或设置底部高程。（单位：米）
|
||||
*
|
||||
* @param {String|Number} [options.id = createGuid()] 图层id标识
|
||||
* @param {String|Number} [options.pid = -1] 图层父级的id，一般图层管理中使用
|
||||
* @param {String} [options.name = ''] 图层名称
|
||||
* @param {Boolean} [options.show = true] 图层是否显示
|
||||
* @param {BaseClass|Boolean} [options.eventParent] 指定的事件冒泡对象，默认为map对象，false时不冒泡
|
||||
* @param {Object} [options.center] 图层自定义定位视角 {@link Map#setCameraView}
|
||||
* @param {Number} options.center.lng 经度值, 180 - 180
|
||||
* @param {Number} options.center.lat 纬度值, -90 - 90
|
||||
* @param {Number} [options.center.alt] 高度值
|
||||
* @param {Number} [options.center.heading] 方向角度值，绕垂直于地心的轴旋转角度, 0至360
|
||||
* @param {Number} [options.center.pitch] 俯仰角度值，绕纬度线旋转角度, -90至90
|
||||
* @param {Number} [options.center.roll] 翻滚角度值，绕经度线旋转角度, -90至90
|
||||
* @param {Boolean} [options.flyTo] 加载完成数据后是否自动飞行定位到数据所在的区域。
|
||||
* @export
|
||||
* @class S3MLayer
|
||||
* @extends {BaseLayer}
|
||||
*/
|
||||
class S3MLayer extends BaseLayer$1 {
|
||||
/**
|
||||
* 模型对应的Cesium.S3MTilesLayer图层组
|
||||
* @type {Object[]}
|
||||
* @readonly
|
||||
* @see http://support.supermap.com.cn:8090/webgl/docs/Documentation/S3MTilesLayer.html
|
||||
*/
|
||||
get layer() {
|
||||
return this._layerArr
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置S3M图层本身支持的参数
|
||||
* @type {Object}
|
||||
* @see [S3M支持的参数]{@link http://support.supermap.com.cn:8090/webgl/docs/Documentation/S3MTilesLayer.html?classFilter=S3MTilesLayer}
|
||||
*/
|
||||
get s3mOptions() {
|
||||
return this.options.s3mOptions
|
||||
}
|
||||
|
||||
set s3mOptions(value) {
|
||||
for (const key in value) {
|
||||
let val = value[key];
|
||||
this.options.s3mOptions[key] = val;
|
||||
|
||||
if (key === "transparentBackColor") {
|
||||
// 去黑边，与offset互斥，注意别配置offset
|
||||
val = Cesium$2.Color.fromCssColorString(val);
|
||||
} else if (key === "transparentBackColorTolerance") {
|
||||
val = Number(val);
|
||||
}
|
||||
|
||||
for (let i = 0; i < this._layerArr.length; i++) {
|
||||
const layer = this._layerArr[i];
|
||||
if (layer == null) {
|
||||
continue
|
||||
}
|
||||
layer[key] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_showHook(show) {
|
||||
this.eachLayer((layer) => {
|
||||
layer.visible = show; // 不同超图版本，有的是visible，有的是show
|
||||
layer.show = show;
|
||||
}, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图前创建一些对象的钩子方法，
|
||||
* 只会调用一次
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_mountedHook() {
|
||||
if (!this._map.scene.open) {
|
||||
throw new Error("请引入 超图版本Cesium库 或 超图S3M插件 ")
|
||||
}
|
||||
|
||||
// 场景添加S3M图层服务
|
||||
let promise;
|
||||
if (this.options.layername) {
|
||||
promise = this._map.scene.addS3MTilesLayerByScp(this.options.url, {
|
||||
name: this.options.layername,
|
||||
autoSetVie: this.options.flyTo,
|
||||
cullEnabled: this.options.cullEnabled
|
||||
});
|
||||
} else {
|
||||
promise = this._map.scene.open(this.options.url, this.options.sceneName, {
|
||||
autoSetVie: this.options.flyTo
|
||||
});
|
||||
}
|
||||
|
||||
promise.then(
|
||||
(smLayer) => {
|
||||
if (Array.isArray(smLayer)) {
|
||||
this._layerArr = smLayer;
|
||||
} else {
|
||||
this._layerArr = [smLayer];
|
||||
}
|
||||
|
||||
for (let i = 0; i < this._layerArr.length; i++) {
|
||||
const layer = this._layerArr[i];
|
||||
if (!layer) {
|
||||
continue
|
||||
}
|
||||
try {
|
||||
this._initModelItem(layer);
|
||||
} catch (e) {
|
||||
mars3d__namespace.Log.logError("s3m图层初始化出错", e);
|
||||
}
|
||||
}
|
||||
|
||||
this._showHook(this.show);
|
||||
|
||||
if (this.options.flyTo) {
|
||||
this.flyToByAnimationEnd();
|
||||
}
|
||||
this._readyPromise.resolve(this);
|
||||
this.fire(mars3d__namespace.EventType.load, { layers: this._layerArr });
|
||||
},
|
||||
(error) => {
|
||||
this._readyPromise && this._readyPromise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// this._map.viewer.pickEvent.addEventListener(function (feature) {
|
||||
// debugger;
|
||||
// });
|
||||
}
|
||||
|
||||
// 对单个s3m图层处理
|
||||
_initModelItem(layer) {
|
||||
// 图层参数合并
|
||||
if (this.options.s3mOptions) {
|
||||
for (const key in this.options.s3mOptions) {
|
||||
const val = this.options.s3mOptions[key];
|
||||
|
||||
if (key === "transparentBackColor") {
|
||||
layer[key] = Cesium$2.Color.fromCssColorString(val); // 去黑边
|
||||
} else if (key === "transparentBackColorTolerance") {
|
||||
layer[key] = Number(val);
|
||||
} else {
|
||||
layer[key] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中颜色
|
||||
if (this.options.highlight) {
|
||||
layer.selectedColor = mars3d__namespace.Util.getColorByStyle(this.options.highlight);
|
||||
}
|
||||
|
||||
// 高度调整
|
||||
if (this.options?.position?.alt) {
|
||||
layer.style3D.altitudeMode = Cesium$2.HeightReference.NONE;
|
||||
layer.style3D.bottomAltitude = this.options.position.alt;
|
||||
if (layer.refresh) {
|
||||
layer.refresh(); // 设置风格后需刷新
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图上的创建钩子方法，
|
||||
* 每次add时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_addedHook() {
|
||||
this._showHook(this.show);
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象从地图上移除的创建钩子方法，
|
||||
* 每次remove时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_removedHook() {
|
||||
this._showHook(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* 遍历每一个子图层并将其作为参数传递给回调函数
|
||||
*
|
||||
* @param {Function} method 回调方法
|
||||
* @param {Object} [context] 侦听器的上下文(this关键字将指向的对象)。
|
||||
* @return {GroupLayer} 当前对象本身,可以链式调用
|
||||
*/
|
||||
eachLayer(method, context) {
|
||||
if (!this._layerArr) {
|
||||
return
|
||||
}
|
||||
this._layerArr.forEach((layer) => {
|
||||
method.call(context, layer);
|
||||
});
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置透明度
|
||||
* @param {Number} value 透明度
|
||||
* @return {void} 无
|
||||
*/
|
||||
setOpacity(value) {
|
||||
this.eachLayer((layer) => {
|
||||
layer.style3D.fillForeColor.alpha = value;
|
||||
}, this);
|
||||
}
|
||||
|
||||
// 定位至数据区域
|
||||
flyTo(options = {}) {
|
||||
if (this.options.center) {
|
||||
return this._map.setCameraView(this.options.center, options)
|
||||
} else if (this.options.extent) {
|
||||
return this._map.flyToExtent(this.options.extent, options)
|
||||
}
|
||||
}
|
||||
}
|
||||
mars3d__namespace.layer.S3MLayer = S3MLayer;
|
||||
|
||||
// 注册下
|
||||
mars3d__namespace.LayerUtil.register("supermap_s3m", S3MLayer);
|
||||
|
||||
const Cesium$1 = mars3d__namespace.Cesium;
|
||||
|
||||
const BaseTileLayer = mars3d__namespace.layer.BaseTileLayer;
|
||||
|
||||
/**
|
||||
* 超图影像瓦片服务图层,
|
||||
* 【需要引入 mars3d-supermap 插件库】
|
||||
*
|
||||
* @param {Object} [options] 参数对象，包括以下：
|
||||
* @param {String} options.url supermap的影像服务地址
|
||||
* @param {String|String[]} [options.subdomains] URL模板中用于 {s} 占位符的子域。 如果此参数是单个字符串，则字符串中的每个字符都是一个子域。如果是 一个数组，数组中的每个元素都是一个子域。
|
||||
* @param {String} [options.tileFormat] 影像图片格式，默认为png。
|
||||
* @param {Boolean} [options.transparent=true] 设置请求的地图服务的参数是否为transparent。
|
||||
* @param {String|Cesium.Color} [options.transparentBackColor] 设置影像透明色。
|
||||
* @param {Number} [options.transparentBackColorTolerance] 去黑边,设置影像透明色容限，取值范围为0.0~1.0。0.0表示完全透明，1.0表示完全不透明。
|
||||
* @param {String} [options.cacheKey] 影像的三维缓存密钥。
|
||||
*
|
||||
* @param {Number} [options.minimumLevel=0] 瓦片所支持的最低层级，如果数据没有第0层，该参数必须配置,当地图小于该级别时，平台不去请求服务数据。
|
||||
* @param {Number} [options.maximumLevel] 瓦片所支持的最大层级,大于该层级时会显示上一层拉伸后的瓦片，当地图大于该级别时，平台不去请求服务数据。
|
||||
* @param {Number} [options.minimumTerrainLevel] 展示影像图层的最小地形细节级别，小于该级别时，平台不显示影像数据。
|
||||
* @param {Number} [options.maximumTerrainLevel] 展示影像图层的最大地形细节级别，大于该级别时，平台不显示影像数据。
|
||||
* @param {Object} [options.rectangle] 瓦片数据的矩形区域范围
|
||||
* @param {Number} options.rectangle.xmin 最小经度值, -180 至 180
|
||||
* @param {Number} options.rectangle.xmax 最大经度值, -180 至 180
|
||||
* @param {Number} options.rectangle.ymin 最小纬度值, -90 至 90
|
||||
* @param {Number} options.rectangle.ymax 最大纬度值, -90 至 90
|
||||
* @param {Number[]} [options.bbox] bbox规范的瓦片数据的矩形区域范围,与rectangle二选一即可。
|
||||
* @param {Number} [options.zIndex] 控制图层的叠加层次，默认按加载的顺序进行叠加，但也可以自定义叠加顺序，数字大的在上面(只对同类型图层间有效)。
|
||||
* @param {CRS} [options.crs=CRS.EPSG:3857] 瓦片数据的坐标系信息，默认为墨卡托投影
|
||||
* @param {ChinaCRS} [options.chinaCRS] 标识瓦片的国内坐标系（用于自动纠偏或加偏），自动将瓦片转为map对应的chinaCRS类型坐标系。
|
||||
*
|
||||
* @param {String} [options.proxy] 加载资源时要使用的代理服务url。
|
||||
* @param {Object} [options.templateValues] 一个对象，用于替换Url中的模板值的键/值对
|
||||
* @param {Object} [options.queryParameters] 一个对象，其中包含在检索资源时将发送的查询参数。比如：queryParameters: {'access_token': '123-435-456-000'},
|
||||
* @param {Object} [options.headers] 一个对象，将发送的其他HTTP标头。比如：headers: { 'X-My-Header': 'valueOfHeader' },
|
||||
* @param {Boolean} [options.enablePickFeatures=true] 如果为true，则 {@link UrlTemplateImageryProvider#pickFeatures} 请求 pickFeaturesUrl 并尝试解释响应中包含的功能。
|
||||
* 如果为 false{@link UrlTemplateImageryProvider#pickFeatures} 会立即返回未定义（表示没有可拾取的内容） 功能）而无需与服务器通信。如果您知道数据，则将此属性设置为false 源不支持选择功能，或者您不希望该提供程序的功能可供选择。注意 可以通过修改 {@link UriTemplateImageryProvider#enablePickFeatures}来动态覆盖 属性。
|
||||
* @param {Cesium.GetFeatureInfoFormat[]} [options.getFeatureInfoFormats] 在某处获取功能信息的格式 调用 {@link UrlTemplateImageryProvider#pickFeatures} 的特定位置。如果这 参数未指定，功能选择已禁用。
|
||||
*
|
||||
* @param {Number} [options.opacity = 1.0] 透明度，取值范围：0.0-1.0。
|
||||
* @param {Number|Function} [options.alpha=1.0] 同opacity。
|
||||
* @param {Number|Function} [options.nightAlpha=1.0] 当 enableLighting 为 true 时 ，在地球的夜晚区域的透明度，取值范围：0.0-1.0。
|
||||
* @param {Number|Function} [options.dayAlpha=1.0] 当 enableLighting 为 true 时，在地球的白天区域的透明度，取值范围：0.0-1.0。
|
||||
* @param {Number|Function} [options.brightness=1.0] 亮度
|
||||
* @param {Number|Function} [options.contrast=1.0] 对比度。 1.0使用未修改的图像颜色，小于1.0会降低对比度，而大于1.0则会提高对比度。
|
||||
* @param {Number|Function} [options.hue=0.0] 色调。 0.0 时未修改的图像颜色。
|
||||
* @param {Number|Function} [options.saturation=1.0] 饱和度。 1.0使用未修改的图像颜色，小于1.0会降低饱和度，而大于1.0则会增加饱和度。
|
||||
* @param {Number|Function} [options.gamma=1.0] 伽马校正值。 1.0使用未修改的图像颜色。
|
||||
* @param {Number} [options.maximumAnisotropy=maximum supported] 使用的最大各向异性水平 用于纹理过滤。如果未指定此参数，则支持最大各向异性 将使用WebGL堆栈。较大的值可使影像在水平方向上看起来更好 视图。
|
||||
* @param {Cesium.Rectangle} [options.cutoutRectangle] 制图矩形，用于裁剪此ImageryLayer的一部分。
|
||||
* @param {Cesium.Color} [options.colorToAlpha] 用作Alpha的颜色。
|
||||
* @param {Number} [options.colorToAlphaThreshold=0.004] 颜色到Alpha的阈值。
|
||||
* @param {Boolean} [options.hasAlphaChannel=true] 如果此图像提供者提供的图像为真 包括一个Alpha通道；否则为假。如果此属性为false，则为Alpha通道，如果 目前，将被忽略。如果此属性为true，则任何没有Alpha通道的图像都将 它们的alpha随处可见。当此属性为false时，内存使用情况 和纹理上传时间可能会减少。
|
||||
* @param {Number} [options.tileWidth=256] 图像图块的像素宽度。
|
||||
* @param {Number} [options.tileHeight=256] 图像图块的像素高度。
|
||||
* @param {Object} [options.customTags] 允许替换网址模板中的自定义关键字。该对象必须具有字符串作为键，并且必须具有值。
|
||||
*
|
||||
* @param {String|Number} [options.id = createGuid()] 图层id标识
|
||||
* @param {String|Number} [options.pid = -1] 图层父级的id，一般图层管理中使用
|
||||
* @param {String} [options.name = ''] 图层名称
|
||||
* @param {Boolean} [options.show = true] 图层是否显示
|
||||
* @param {BaseClass|Boolean} [options.eventParent] 指定的事件冒泡对象，默认为map对象，false时不冒泡
|
||||
* @param {Object} [options.center] 图层自定义定位视角 {@link Map#setCameraView}
|
||||
* @param {Number} options.center.lng 经度值, 180 - 180
|
||||
* @param {Number} options.center.lat 纬度值, -90 - 90
|
||||
* @param {Number} [options.center.alt] 高度值
|
||||
* @param {Number} [options.center.heading] 方向角度值，绕垂直于地心的轴旋转角度, 0至360
|
||||
* @param {Number} [options.center.pitch] 俯仰角度值，绕纬度线旋转角度, -90至90
|
||||
* @param {Number} [options.center.roll] 翻滚角度值，绕经度线旋转角度, -90至90
|
||||
* @param {Boolean} [options.flyTo] 加载完成数据后是否自动飞行定位到数据所在的区域。
|
||||
* @export
|
||||
* @class SmImgLayer
|
||||
* @extends {BaseTileLayer}
|
||||
*
|
||||
* @see http://support.supermap.com.cn:8090/webgl/docs/Documentation/SuperMapImageryProvider.html?classFilter=SuperMapImageryProvider
|
||||
*/
|
||||
class SmImgLayer extends BaseTileLayer {
|
||||
// 构建ImageryProvider
|
||||
_createImageryProvider(options) {
|
||||
return createImageryProvider(options)
|
||||
}
|
||||
|
||||
// 添加时
|
||||
_addedHook() {
|
||||
super._addedHook();
|
||||
|
||||
if (Cesium$1.defined(this.options.transparentBackColor)) {
|
||||
this._imageryLayer.transparentBackColor = mars3d__namespace.Util.getCesiumColor(this.options.transparentBackColor);
|
||||
this._imageryLayer.transparentBackColorTolerance = this.options.transparentBackColorTolerance; // 去黑边
|
||||
}
|
||||
}
|
||||
}
|
||||
function createImageryProvider(options) {
|
||||
options = mars3d__namespace.LayerUtil.converOptions(options);
|
||||
|
||||
if (options.url instanceof Cesium$1.Resource) {
|
||||
options.url = options.url.url;
|
||||
}
|
||||
|
||||
if (Cesium$1.defined(options.transparentBackColor)) {
|
||||
delete options.transparentBackColor;
|
||||
delete options.transparentBackColorTolerance;
|
||||
}
|
||||
return new Cesium$1.SuperMapImageryProvider(options)
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建用于图层的 ImageryProvider对象
|
||||
*
|
||||
* @param {Object} options Provider参数，同图层构造参数。
|
||||
* @return {Cesium.ImageryProvider} ImageryProvider类
|
||||
* @function
|
||||
*/
|
||||
SmImgLayer.createImageryProvider = createImageryProvider;
|
||||
|
||||
mars3d__namespace.layer.SmImgLayer = SmImgLayer;
|
||||
|
||||
// 注册下
|
||||
const layerType = "supermap_img";
|
||||
mars3d__namespace.LayerUtil.register(layerType, SmImgLayer);
|
||||
mars3d__namespace.LayerUtil.registerImageryProvider(layerType, createImageryProvider);
|
||||
|
||||
const Cesium = mars3d__namespace.Cesium;
|
||||
|
||||
const BaseLayer = mars3d__namespace.layer.BaseLayer;
|
||||
|
||||
/**
|
||||
* 超图MVT矢量瓦片图层,
|
||||
* 【需要引入 mars3d-supermap 插件库】
|
||||
*
|
||||
* @param {Object} [options] 参数对象，包括以下：
|
||||
* @param {String} options.url 适用于通过SuperMap桌面软件生成mvt数据,经iServer发布为rest风格的地图服务，只需提供服务地址。
|
||||
* @param {String} options.layer 图层名称,适用于第三方发布的WMTS服务。
|
||||
* @param {Number} [options.canvasWidth] 用来绘制矢量的纹理边长。默认是512，越大越精细，越小性能越高。
|
||||
* @param {String} [options.format='mvt'] 适用于第三方发布的WMTS服务。
|
||||
* @param {Object} [options.mapboxStyle] 使用的mapBox风格。
|
||||
* @param {Object} [options.多个参数] 参考[supermap官方API]{@link http://support.supermap.com.cn:8090/webgl/docs/Documentation/Scene.html#addVectorTilesLayer}
|
||||
*
|
||||
*
|
||||
* @param {String|Number} [options.id = createGuid()] 图层id标识
|
||||
* @param {String|Number} [options.pid = -1] 图层父级的id，一般图层管理中使用
|
||||
* @param {String} [options.name = ''] 图层名称
|
||||
* @param {Boolean} [options.show = true] 图层是否显示
|
||||
* @param {BaseClass|Boolean} [options.eventParent] 指定的事件冒泡对象，默认为map对象，false时不冒泡
|
||||
* @param {Object} [options.center] 图层自定义定位视角 {@link Map#setCameraView}
|
||||
* @param {Number} options.center.lng 经度值, 180 - 180
|
||||
* @param {Number} options.center.lat 纬度值, -90 - 90
|
||||
* @param {Number} [options.center.alt] 高度值
|
||||
* @param {Number} [options.center.heading] 方向角度值，绕垂直于地心的轴旋转角度, 0至360
|
||||
* @param {Number} [options.center.pitch] 俯仰角度值，绕纬度线旋转角度, -90至90
|
||||
* @param {Number} [options.center.roll] 翻滚角度值，绕经度线旋转角度, -90至90
|
||||
* @param {Boolean} [options.flyTo] 加载完成数据后是否自动飞行定位到数据所在的区域。
|
||||
* @export
|
||||
* @class SmMvtLayer
|
||||
* @extends {BaseLayer}
|
||||
*/
|
||||
class SmMvtLayer extends BaseLayer {
|
||||
/**
|
||||
* 对应的supermap图层 Cesium.VectorTilesLayer
|
||||
* @type {*}
|
||||
* @readonly
|
||||
* @see http://support.supermap.com.cn:8090/webgl/docs/Documentation/VectorTilesLayer.html
|
||||
*/
|
||||
get layer() {
|
||||
return this._mvtLayer
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图前创建一些对象的钩子方法，
|
||||
* 只会调用一次
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_mountedHook() {
|
||||
// options参考API文档：http://support.supermap.com.cn:8090/webgl/docs/Documentation/Scene.html
|
||||
this._mvtLayer = this._map.scene.addVectorTilesMap(this.options);
|
||||
this._mvtLayer.readyPromise.then(function (data) {
|
||||
// setPaintProperty(layerId, name, value, options)
|
||||
// for(var layerId in that.options.style){
|
||||
// that._mvtLayer.setPaintProperty(layerId, "fill-color", "rgba(255,0,0,0.8)");
|
||||
// }
|
||||
});
|
||||
|
||||
const scene = this._map.scene;
|
||||
const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
||||
handler.setInputAction((event) => {
|
||||
if (!this.show) {
|
||||
return
|
||||
}
|
||||
|
||||
const position = mars3d__namespace.PointUtil.getCurrentMousePosition(scene, event.position);
|
||||
|
||||
// 查询出相交图层的feature
|
||||
const features = this._mvtLayer.queryRenderedFeatures([position], {
|
||||
// layers: [selectLayer.id]
|
||||
});
|
||||
|
||||
// eslint-disable-next-line array-callback-return
|
||||
features.reduce((memo, result) => {
|
||||
const attr = result.feature.properties;
|
||||
if (!attr) {
|
||||
// eslint-disable-next-line array-callback-return
|
||||
return
|
||||
}
|
||||
|
||||
const content = mars3d__namespace.Util.getPopupForConfig(this.options, attr);
|
||||
const item = {
|
||||
data: attr,
|
||||
event: event
|
||||
};
|
||||
this._map.openPopup(position, content, item);
|
||||
});
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
||||
this.handler = handler;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象添加到地图上的创建钩子方法，
|
||||
* 每次add时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_addedHook() {
|
||||
this._mvtLayer.show = true;
|
||||
// this._mvtLayer.refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象从地图上移除的创建钩子方法，
|
||||
* 每次remove时都会调用
|
||||
* @return {void} 无
|
||||
* @private
|
||||
*/
|
||||
_removedHook() {
|
||||
if (this._mvtLayer) {
|
||||
this._mvtLayer.show = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置透明度
|
||||
* @param {Number} value 透明度
|
||||
* @return {void} 无
|
||||
*/
|
||||
setOpacity(value) {
|
||||
if (this._mvtLayer) {
|
||||
this._mvtLayer.alpha = parseFloat(value);
|
||||
}
|
||||
}
|
||||
|
||||
// 定位至数据区域
|
||||
flyTo(options = {}) {
|
||||
if (this.options.center) {
|
||||
return this._map.setCameraView(this.options.center, options)
|
||||
} else if (this.options.extent) {
|
||||
return this._map.flyToExtent(this.options.extent, options)
|
||||
} else if (this._mvtLayer) {
|
||||
return this._map.camera.flyTo({
|
||||
...options,
|
||||
destination: this._mvtLayer.rectangle
|
||||
})
|
||||
}
|
||||
return Promise.resolve(false)
|
||||
}
|
||||
}
|
||||
mars3d__namespace.layer.SmMvtLayer = SmMvtLayer;
|
||||
|
||||
// 注册下
|
||||
mars3d__namespace.LayerUtil.register("supermap_mvt", SmMvtLayer);
|
||||
|
||||
exports.S3MLayer = S3MLayer;
|
||||
exports.SmImgLayer = SmImgLayer;
|
||||
exports.SmMvtLayer = SmMvtLayer;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
1
public/map/mars3d/plugins/supermap/mars3d-supermap.js
Normal file
1
public/map/mars3d/plugins/supermap/mars3d-supermap.js
Normal file
File diff suppressed because one or more lines are too long
53670
public/map/mars3d/plugins/tdt/mars3d-tdt-src.js
Normal file
53670
public/map/mars3d/plugins/tdt/mars3d-tdt-src.js
Normal file
File diff suppressed because one or more lines are too long
12
public/map/mars3d/plugins/tdt/mars3d-tdt.js
Normal file
12
public/map/mars3d/plugins/tdt/mars3d-tdt.js
Normal file
File diff suppressed because one or more lines are too long
2043
public/map/mars3d/plugins/widget/mars3d-widget-src.js
Normal file
2043
public/map/mars3d/plugins/widget/mars3d-widget-src.js
Normal file
File diff suppressed because it is too large
Load Diff
1
public/map/mars3d/plugins/widget/mars3d-widget.js
Normal file
1
public/map/mars3d/plugins/widget/mars3d-widget.js
Normal file
File diff suppressed because one or more lines are too long
2116
public/map/mars3d/plugins/wind/mars3d-wind-src.js
Normal file
2116
public/map/mars3d/plugins/wind/mars3d-wind-src.js
Normal file
File diff suppressed because it is too large
Load Diff
15
public/map/mars3d/plugins/wind/mars3d-wind.js
Normal file
15
public/map/mars3d/plugins/wind/mars3d-wind.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user