From b3b5dce6578375de8ff2e8028f8ac22767f6b162 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 25 Apr 2024 15:46:04 +0800 Subject: [PATCH] =?UTF-8?q?[fix]mapboxgl=20l7=E6=94=AF=E6=8C=81=E5=A4=9A?= =?UTF-8?q?=E5=9D=90=E6=A0=87=E7=B3=BB=EF=BC=8ClistLayers=E5=9B=BE?= =?UTF-8?q?=E5=B1=82=E9=A1=BA=E5=BA=8F=20review=20by=20qiw?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/webpack.config.base.js | 2 - build/webpack.config.mapboxgl.js | 3 +- build/webpack.config.maplibregl.js | 3 +- dist/mapboxgl/include-mapboxgl.js | 2 +- dist/maplibregl/include-maplibregl.js | 14 +- examples/mapboxgl/config.js | 14 +- examples/mapboxgl/demo-l7layer.html | 92 ------------ examples/mapboxgl/l7_3d_column.html | 2 +- examples/mapboxgl/l7_3d_geometry.html | 2 +- examples/mapboxgl/l7_3d_honeycomb.html | 2 +- examples/mapboxgl/l7_3d_terrain.html | 2 +- examples/mapboxgl/l7_bar_chart.html | 2 +- examples/mapboxgl/l7_brightness_map.html | 2 +- examples/mapboxgl/l7_bus_line_wall.html | 2 +- .../mapboxgl/l7_circular_sweeping_city.html | 128 ++++++++-------- examples/mapboxgl/l7_cluster.html | 2 +- examples/mapboxgl/l7_continuous_fill.html | 2 +- examples/mapboxgl/l7_contour.html | 2 +- examples/mapboxgl/l7_contour1.html | 2 +- examples/mapboxgl/l7_contour2.html | 2 +- examples/mapboxgl/l7_custom_bubble_chart.html | 2 +- .../mapboxgl/l7_custom_water_level_chart.html | 2 +- examples/mapboxgl/l7_dark_bus_routes.html | 2 +- examples/mapboxgl/l7_extrude.html | 2 +- examples/mapboxgl/l7_flat_layer.html | 2 +- examples/mapboxgl/l7_floating_map.html | 2 +- examples/mapboxgl/l7_grid_map.html | 2 +- examples/mapboxgl/l7_grid_world_map.html | 2 +- examples/mapboxgl/l7_heading_chart.html | 2 +- examples/mapboxgl/l7_heatmap-test.html | 137 ++++++++++++++++++ examples/mapboxgl/l7_heatmap2D.html | 2 +- examples/mapboxgl/l7_heatmap3D.html | 2 +- examples/mapboxgl/l7_heatmap_grid.html | 2 +- examples/mapboxgl/l7_heatmap_grid1.html | 2 +- examples/mapboxgl/l7_heatmap_grid2.html | 2 +- examples/mapboxgl/l7_heatmap_hexagon.html | 2 +- examples/mapboxgl/l7_heatmap_hexagon1.html | 2 +- examples/mapboxgl/l7_heatmap_hexagon2.html | 2 +- examples/mapboxgl/l7_heatmap_hexagon3.html | 2 +- examples/mapboxgl/l7_icon_annotation.html | 2 +- examples/mapboxgl/l7_large_circular_arc.html | 2 +- examples/mapboxgl/l7_light_bus_routes.html | 2 +- examples/mapboxgl/l7_line_altitude.html | 2 +- examples/mapboxgl/l7_line_animation.html | 2 +- examples/mapboxgl/l7_line_arc.html | 2 +- examples/mapboxgl/l7_line_arc3d.html | 2 +- examples/mapboxgl/l7_line_arc3d1.html | 2 +- examples/mapboxgl/l7_line_arc3d2.html | 2 +- .../mapboxgl/l7_line_arc3d_animation.html | 2 +- examples/mapboxgl/l7_line_bus.html | 2 +- examples/mapboxgl/l7_line_wall.html | 2 +- examples/mapboxgl/l7_map_interaction.html | 2 +- examples/mapboxgl/l7_massive_points.html | 2 +- .../mapboxgl/l7_monsoon_distribution.html | 2 +- examples/mapboxgl/l7_path_arrow.html | 2 +- examples/mapboxgl/l7_path_border.html | 2 +- examples/mapboxgl/l7_path_dash.html | 2 +- examples/mapboxgl/l7_path_map.html | 2 +- examples/mapboxgl/l7_pie_chart.html | 2 +- examples/mapboxgl/l7_point_3d.html | 2 +- examples/mapboxgl/l7_point_animate.html | 2 +- examples/mapboxgl/l7_point_annotation.html | 2 +- examples/mapboxgl/l7_point_shape.html | 2 +- examples/mapboxgl/l7_polygon_annotation.html | 2 +- examples/mapboxgl/l7_pop.html | 2 +- examples/mapboxgl/l7_rain_particle.html | 2 +- .../mapboxgl/l7_simple_water_surface.html | 2 +- examples/mapboxgl/l7_snow_particle.html | 2 +- examples/mapboxgl/l7_symbol.html | 2 +- .../l7_temperature_icon_annotation.html | 2 +- examples/mapboxgl/l7_text_dynamic_offset.html | 2 +- .../mapboxgl/l7_trajectory_animation.html | 2 +- examples/mapboxgl/l7_turin_road_map.html | 2 +- examples/mapboxgl/l7_water_surface.html | 2 +- .../mapboxgl/l7_weather_icon_annotation.html | 2 +- examples/mapboxgl/l7_wind.html | 2 +- examples/mapboxgl/l7_wind_animation.html | 2 +- examples/maplibregl/config.js | 14 +- .../maplibregl/l7_circular_sweeping_city.html | 126 ++++++++-------- package.json | 4 +- src/common/overlay/index.js | 4 +- src/common/overlay/l7/L7Extend.js | 17 --- src/common/overlay/l7/L7LayerBase.js | 82 ----------- src/common/overlay/l7/util.js | 12 ++ src/common/package.json | 2 - src/mapboxgl/core/MapExtend.js | 35 ++--- src/mapboxgl/overlay/L7Layer.js | 114 ++++++++++++++- src/mapboxgl/package.json | 1 + src/maplibregl/core/MapExtend.js | 48 +++--- src/maplibregl/overlay/L7Layer.js | 102 ++++++++++++- src/maplibregl/package.json | 1 + test/mapboxgl/core/MapExtendSpec.js | 18 +-- test/mapboxgl/overlay/L7LayerSpec.js | 107 ++++++++++++++ test/maplibregl/core/MapExtendSpec.js | 16 +- test/maplibregl/overlay/L7LayerSpec.js | 49 +++++++ 95 files changed, 783 insertions(+), 500 deletions(-) delete mode 100644 examples/mapboxgl/demo-l7layer.html create mode 100644 examples/mapboxgl/l7_heatmap-test.html delete mode 100644 src/common/overlay/l7/L7Extend.js delete mode 100644 src/common/overlay/l7/L7LayerBase.js create mode 100644 src/common/overlay/l7/util.js diff --git a/build/webpack.config.base.js b/build/webpack.config.base.js index 2b6bb8b9d..41ad8c4ce 100644 --- a/build/webpack.config.base.js +++ b/build/webpack.config.base.js @@ -65,8 +65,6 @@ module.exports = { echarts: 'function(){try{return echarts}catch(e){return {}}}()', mapv: 'function(){try{return mapv}catch(e){return {}}}()', '@antv/g6': 'function(){try{return G6}catch(e){return {}}}()', - '@antv/l7': 'function(){try{return L7}catch(e){return {}}}()', - '@antv/l7-three': 'function(){try{return window}catch(e){return {}}}()', '@tensorflow/tfjs': 'function(){try{return tf}catch(e){return {}}}()' }, diff --git a/build/webpack.config.mapboxgl.js b/build/webpack.config.mapboxgl.js index 7716e8c41..b18cbbc81 100644 --- a/build/webpack.config.mapboxgl.js +++ b/build/webpack.config.mapboxgl.js @@ -29,7 +29,8 @@ module.exports = { 'webgl-debug': '(function(){try{return webgl-debug}catch(e){return {}}})()', xlsx: 'function(){try{return XLSX}catch(e){return {}}}()', canvg: 'function(){try{return canvg}catch(e){return {}}}()', - jsonsql: 'function(){try{return jsonsql}catch(e){return {}}}()' + jsonsql: 'function(){try{return jsonsql}catch(e){return {}}}()', + '@supermap/mapboxgl-l7-render': 'function(){try{return L7}catch(e){return {}}}()' }) ], diff --git a/build/webpack.config.maplibregl.js b/build/webpack.config.maplibregl.js index 9eae4e0f2..e403d7025 100644 --- a/build/webpack.config.maplibregl.js +++ b/build/webpack.config.maplibregl.js @@ -29,7 +29,8 @@ module.exports = { xlsx: 'function(){try{return XLSX}catch(e){return {}}}()', canvg: 'function(){try{return canvg}catch(e){return {}}}()', jsonsql: 'function(){try{return jsonsql}catch(e){return {}}}()', - 'xml-js': 'function(){try{return convert}catch(e){return {}}}()' + 'xml-js': 'function(){try{return convert}catch(e){return {}}}()', + '@supermap/maplibregl-l7-render': 'function(){try{return L7}catch(e){return {}}}()' }), module: { diff --git a/dist/mapboxgl/include-mapboxgl.js b/dist/mapboxgl/include-mapboxgl.js index 264172cf1..cbb96f1bc 100644 --- a/dist/mapboxgl/include-mapboxgl.js +++ b/dist/mapboxgl/include-mapboxgl.js @@ -63,7 +63,7 @@ inputScript(libsurl + '/mapbox-gl-js-enhance/1.12.1-3/mapbox-gl-enhance.js'); } if (inArray(includes, 'L7')) { - inputScript(disturl + '/mapboxgl/l7-dev.js'); + inputScript(libsurl+ '/mapboxgl-l7-render/index.js'); } if (inArray(includes, 'g2')) { inputScript('https://cdnjs.cloudflare.com/ajax/libs/antv-g2/4.2.8/g2.min.js'); diff --git a/dist/maplibregl/include-maplibregl.js b/dist/maplibregl/include-maplibregl.js index 940ea327b..a602a0764 100644 --- a/dist/maplibregl/include-maplibregl.js +++ b/dist/maplibregl/include-maplibregl.js @@ -54,23 +54,15 @@ var includes = (targetScript.getAttribute('include') || '').split(','); var excludes = (targetScript.getAttribute('exclude') || '').split(','); if (!inArray(excludes, 'maplibregl')) { - // inputCSS(libsurl + '/maplibre-gl-js/3.1.0/maplibre-gl.css'); - // inputScript(libsurl + '/maplibre-gl-js/3.1.0/maplibre-gl.js'); - inputCSS('https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css'); - inputScript('https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'); + inputCSS(libsurl + '/maplibre-gl-js/3.1.0/maplibre-gl.css'); + inputScript(libsurl + '/maplibre-gl-js/3.1.0/maplibre-gl.js'); } if (inArray(includes, 'L7')) { - inputScript('../../dist/maplibregl/l7-dev.js'); + inputScript(libsurl + '/maplibregl-l7-render/index.js'); } if (inArray(includes, 'g2')) { inputScript('https://cdnjs.cloudflare.com/ajax/libs/antv-g2/4.2.8/g2.min.js'); } - if (inArray(includes, 'L7Three')) { - // inputScript('https://cdnjs.cloudflare.com/ajax/libs/three.js/r115/three.min.js'); - inputScript(libsurl + '/three/0.115.0/three.min.js'); - inputScript(libsurl + '/three/0.115.0/examples/js/loaders/GLTFLoader.js'); - inputScript('../../dist/maplibregl/l7-three.min.js'); - } if (inArray(includes, 'turf')) { inputScript(libsurl + '/turf/6.5.0/turf.min.js'); } diff --git a/examples/mapboxgl/config.js b/examples/mapboxgl/config.js index 0c8842af5..5ee1ba124 100644 --- a/examples/mapboxgl/config.js +++ b/examples/mapboxgl/config.js @@ -1249,7 +1249,7 @@ var exampleConfig = { L7: { name: 'L7', name_en: 'L7', - version: '11.1.1', + version: '11.2.0', content: [ { name: '网格地图', @@ -1623,12 +1623,12 @@ var exampleConfig = { thumbnail: 'l7_heatmap_hexagon3.png', fileName: 'l7_heatmap_hexagon3' }, - { - name: '平面图层', - name_en: 'Flat layer', - thumbnail: 'l7_flat_layer.png', - fileName: 'l7_flat_layer' - }, + // { + // name: '平面图层', + // name_en: 'Flat layer', + // thumbnail: 'l7_flat_layer.png', + // fileName: 'l7_flat_layer' + // }, // { // name: '自定义3D地形（LOD）', // name_en: 'Customize 3D Terrain (LOD)', diff --git a/examples/mapboxgl/demo-l7layer.html b/examples/mapboxgl/demo-l7layer.html deleted file mode 100644 index 46a0b0bb9..000000000 --- a/examples/mapboxgl/demo-l7layer.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - - - -
- - - - diff --git a/examples/mapboxgl/l7_3d_column.html b/examples/mapboxgl/l7_3d_column.html index 2c0ec1204..da12a8e75 100644 --- a/examples/mapboxgl/l7_3d_column.html +++ b/examples/mapboxgl/l7_3d_column.html @@ -29,7 +29,7 @@
- + + + + + + + + diff --git a/examples/mapboxgl/l7_cluster.html b/examples/mapboxgl/l7_cluster.html index 3bc8c7498..80859282e 100644 --- a/examples/mapboxgl/l7_cluster.html +++ b/examples/mapboxgl/l7_cluster.html @@ -29,7 +29,7 @@
- + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + + + diff --git a/examples/mapboxgl/l7_heatmap2D.html b/examples/mapboxgl/l7_heatmap2D.html index c67e59990..08762d79c 100644 --- a/examples/mapboxgl/l7_heatmap2D.html +++ b/examples/mapboxgl/l7_heatmap2D.html @@ -29,7 +29,7 @@
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index 37db0e218..8cd1e2698 100644 --- a/package.json +++ b/package.json @@ -129,12 +129,12 @@ }, "dependencies": { "@antv/g6": "^4.8.14", - "@antv/l7": "2.17.7", - "@antv/l7-three": "2.17.7", "@elastic/elasticsearch": "^5.6.22", "@mapbox/vector-tile": "1.3.1", "@sinonjs/text-encoding": "^0.7.2", "@supermap/iclient-common": "file:src/common", + "@supermap/mapboxgl-l7-render": "^0.0.1", + "@supermap/maplibregl-l7-render": "^0.0.1", "@tensorflow/tfjs": "^3.9.0", "@turf/turf": "6.5.0", "canvg": "3.0.10", diff --git a/src/common/overlay/index.js b/src/common/overlay/index.js index 857fa070c..c4624d011 100644 --- a/src/common/overlay/index.js +++ b/src/common/overlay/index.js @@ -26,7 +26,6 @@ import { } from './feature'; import {LevelRenderer} from './levelRenderer'; import { Transform } from './threejs/Transform' -import { L7LayerBase } from './l7/L7LayerBase'; export { FeatureThemeBar }; export { FeatureThemeBar3D }; @@ -49,8 +48,7 @@ export { ShapeParametersPolygon, ShapeParametersRectangle, ShapeParametersSector, - FeatureTheme, - L7LayerBase + FeatureTheme }; export { LevelRenderer }; export { Transform }; diff --git a/src/common/overlay/l7/L7Extend.js b/src/common/overlay/l7/L7Extend.js deleted file mode 100644 index 8be87eaee..000000000 --- a/src/common/overlay/l7/L7Extend.js +++ /dev/null @@ -1,17 +0,0 @@ -import * as L7 from '@antv/l7'; -import { ThreeLayer } from '@antv/l7-three'; - -export function getL7Scene(map, type = 'Maplibre') { - if (!map) { - return null; - } - return new L7.Scene({ - id: map.getContainer().id, - pickBufferScale: 1.0, - map: new L7[type]({ - mapInstance: map - }) - }); -} -export default L7; -export { ThreeLayer }; diff --git a/src/common/overlay/l7/L7LayerBase.js b/src/common/overlay/l7/L7LayerBase.js deleted file mode 100644 index be195179e..000000000 --- a/src/common/overlay/l7/L7LayerBase.js +++ /dev/null @@ -1,82 +0,0 @@ -import L7, { ThreeLayer } from './L7Extend'; -import { Util as CommonUtil } from '../../commontypes/Util'; - -export class L7LayerBase { - constructor({ type, options }) { - this.type = 'custom'; - this.id = options && options.layerID ? options.layerID : CommonUtil.createUniqueID('l7Layer_'); - const _options = { ...(options || {}) }; - if (type === 'ThreeLayer') { - this.l7layer = new ThreeLayer({ ..._options, name: this.id }); - } else { - this.l7layer = new L7[type]({ ..._options, name: this.id }); - } - } - /** - * @function L7Layer.prototype.getL7Layer - * @description 获取@antv/L7的layer实例。 - * @returns {Object} @antv/L7的layer实例。 - */ - getL7Layer() { - return this.l7layer; - } - - onAdd(map) { - this.map = map; - const scene = map.$l7scene; - if (scene) { - this.scene = scene; - this.scene.addLayer(this.l7layer); - // this.l7layer.hooks.beforeHighlight.tap('PixelPickingPlugin', () => { - // this.map.triggerRepaint(); - // }); - } - } - remove() { - this.scene && this.scene.removeLayer(this.l7layer); - } - onRemove() { - this.scene && this.scene.layerService.stopAnimate(); - this.scene && this.scene.removeLayer(this.l7layer); - } - render() { - if (this.scene && this.scene.getLayer(this.l7layer.id)) { - this.scene.layerService.renderLayer(this.l7layer.id); - // console.log(this.l7layer.id, '---------customlayer render', counts); - // const config = this.l7layer.getLayerConfig(); - // if (config && config.enableHighlight && config.pickedFeatureID !== null && config.pickedFeatureID > -1) { - // this.map.triggerRepaint(); - // } - // console.log(this.l7layer.id, this.l7layer); - if (this.l7layer.animateStatus || (this.l7layer.layerModel && this.l7layer.layerModel.spriteAnimate)) { - if (!this.l7layer.hasOwnProperty('threeRenderService')) { - this.scene.layerService.stopAnimate(); - } - this.scene.layerService.startAnimate(this.l7layer.id); - this.map.triggerRepaint(); - } - } - } -} - -// function L7Layers({ type, options }) { -// const layer = new L7Layer({ type, options }); -// const obj = new Proxy(layer, { -// get: function (target, propKey, receiver) { -// console.log(`getting ${propKey}!`); -// return Reflect.get(target, propKey, receiver); -// }, -// set: function (target, propKey, value, receiver) { -// console.log(`setting ${propKey}!`); -// return Reflect.set(target, propKey, value, receiver); -// }, -// apply: function (target, propKey, value, receiver) { -// console.log(`apply ${propKey}!`); -// return Reflect.apply(target, propKey, value, receiver); -// } -// }); -// return obj; -// } -// function proxy(target, prop) { - -// } diff --git a/src/common/overlay/l7/util.js b/src/common/overlay/l7/util.js new file mode 100644 index 000000000..739313ba1 --- /dev/null +++ b/src/common/overlay/l7/util.js @@ -0,0 +1,12 @@ +export function getL7Scene(L7Scene, L7Map, map) { + if (!map) { + return null; + } + return new L7Scene({ + id: map.getContainer().id, + pickBufferScale: 1.0, + map: new L7Map({ + mapInstance: map + }) + }); +} diff --git a/src/common/package.json b/src/common/package.json index 37125e87b..952dcef94 100644 --- a/src/common/package.json +++ b/src/common/package.json @@ -14,8 +14,6 @@ "author": "SuperMap", "license": "Apache-2.0", "dependencies": { - "@antv/l7": "2.17.7", - "@antv/l7-three": "2.17.7", "@antv/g6": "^4.8.14", "echarts": "5.4.3", "fetch-ie8": "1.5.0", diff --git a/src/mapboxgl/core/MapExtend.js b/src/mapboxgl/core/MapExtend.js index 8317918fa..f1dd73965 100644 --- a/src/mapboxgl/core/MapExtend.js +++ b/src/mapboxgl/core/MapExtend.js @@ -2,7 +2,6 @@ * This program are made available under the terms of the Apache License, Version 2.0 * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/ import mapboxgl from 'mapbox-gl'; -import { getL7Scene } from '@supermap/iclient-common/overlay/l7/L7Extend'; /** * @function MapExtend @@ -14,11 +13,9 @@ export var MapExtend = (function () { if (mapboxgl.Map.prototype.addLayerBak === undefined) { mapboxgl.Map.prototype.addLayerBak = mapboxgl.Map.prototype.addLayer; mapboxgl.Map.prototype.addLayer = function (layer, before) { - if (!mapboxgl.Map.prototype.$l7scene && layer.hasOwnProperty('l7layer')) { - mapboxgl.Map.prototype.$l7scene = getL7Scene(this, 'Mapbox'); - } if (layer.source || layer.type === 'custom' || layer.type === 'background') { this.addLayerBak(layer, before); + // overlay文件夹下的图层基本都是自定义图层， 除去几个专题图 if (layer.overlay && !this.overlayLayersManager[layer.id]) { this.overlayLayersManager[layer.id] = layer; } @@ -36,24 +33,24 @@ export var MapExtend = (function () { }; } /** - * @function getL7Scene + * @function listLayers * @category BaseTypes MapExtend - * @description 扩展mapboxgl.Map， 获取@antv/L7的scene实例。使用方法： map.getL7Scene().then(scene => { console.log(scene) }); - * @returns {Promise} @antv/L7的scene实例。 + * @version 11.2.0 + * @description 扩展mapboxgl.Map， 获取所有叠加图层; + * @returns {Array} 图层数组。 */ - mapboxgl.Map.prototype.getL7Scene = function () { - return new Promise((resolve) => { - if (mapboxgl.Map.prototype.$l7scene) { - resolve(mapboxgl.Map.prototype.$l7scene); - return mapboxgl.Map.prototype.$l7scene; + mapboxgl.Map.prototype.listLayers = function () { + const layerList = []; + const originLayers = this.style._order || []; + layerList.push(...originLayers); + for (let key in this.overlayLayersManager) { + const layer = this.overlayLayersManager[key]; + const layerId = layer.id; + if (!layerList.includes(layerId)) { + layerList.push(layerId); } - const scene = getL7Scene(this, 'Mapbox'); - scene.on('loaded', () => { - mapboxgl.Map.prototype.$l7scene = scene; - resolve(scene); - return scene; - }); - }); + } + return layerList; }; mapboxgl.Map.prototype.getLayer = function (id) { diff --git a/src/mapboxgl/overlay/L7Layer.js b/src/mapboxgl/overlay/L7Layer.js index 353853715..6c7c413e8 100644 --- a/src/mapboxgl/overlay/L7Layer.js +++ b/src/mapboxgl/overlay/L7Layer.js @@ -1,18 +1,120 @@ import '../core/Base'; -import { L7LayerBase } from '@supermap/iclient-common/overlay/l7/L7LayerBase'; +import { Util as CommonUtil } from '@supermap/iclient-common/commontypes/Util'; +import { getL7Scene } from '@supermap/iclient-common/overlay/l7/util'; +import mapboxgl from 'mapbox-gl'; +import * as L7 from '@supermap/mapboxgl-l7-render'; +import { Scene, Mapbox } from '@supermap/mapboxgl-l7-render'; /** * @class L7Layer * @category Visualization L7 + * @version 11.2.0 * @classdesc L7Layer对接了@antv/L7的图层类型，能够通过mapbox-gl操作@antv/L7的图层。 * @param {Object} options - 图层配置项，包括以下参数： * @param {string} options.type - @antv/L7的图层类型，详情参见: {@link https://l7.antv.antgroup.com/api/point_layer/pointlayer}。 * @param {Object} options.options - @antv/L7图层的配置项，详情参见: {@link https://l7.antv.antgroup.com/api/point_layer/options}。 - * @param {string} [options.layerID] - 图层 ID。默认使用 CommonUtil.createUniqueID("l7Layer_") 创建图层 ID。 + * @param {string} [options.layerID] - 图层 ID。默认使用 CommonUtil.createUniqueID("l7_layer_") 创建图层 ID。 * @usage */ -export class L7Layer extends L7LayerBase { - constructor(options) { - super(options); + +export class L7Layer { + constructor({ type, options }) { + this.preBuild(); + this.type = 'custom'; + this.id = options && options.layerID ? options.layerID : CommonUtil.createUniqueID('l7_layer_'); + const _options = { ...(options || {}) }; + if (type !== 'ThreeLayer') { + this.l7layer = new L7[type]({ ..._options, name: this.id }); + } + this.overlay = true; + } + preBuild() { + if (!mapboxgl.Map.prototype.mapExtendAddLayerBak) { + mapboxgl.Map.prototype.mapExtendAddLayerBak = mapboxgl.Map.prototype.addLayer; + mapboxgl.Map.prototype.addLayer = function (layer, before) { + if(!mapboxgl.Map.prototype.$l7scene) { + mapboxgl.Map.prototype.$l7scene = getL7Scene(Scene, Mapbox, this); + } + this.mapExtendAddLayerBak(layer, before); + return this; + }; + } + } + /** + * @function L7Layer.prototype.getL7Layer + * @description 获取@antv/L7的layer实例。 + * @returns {Object} @antv/L7的layer实例。 + */ + getL7Layer() { + return this.l7layer; + } + + /** + * @function L7Layer.prototype.reRender + * @description 当修改@antv/L7的layer的配置时，重新渲染。 + */ + reRender() { + if (this.scene && this.scene.getLayer(this.l7layer.id)) { + this.scene.layerService.renderLayer(this.l7layer.id); + } + this.map && this.map.triggerRepaint(); + } + + moveLayer(id, beforeId) { + this.map.style.moveLayer(id, beforeId); + } + + setVisibility(visibility) { + visibility ? this.l7layer.show() : this.l7layer.hide(); + this.map.style.setLayoutProperty(this.id, 'visibility', visibility ? 'visible' : 'none'); } -} \ No newline at end of file + + onAdd(map) { + this.map = map; + const scene = map.$l7scene; + if (scene) { + this.scene = scene; + this.scene.addLayer(this.l7layer); + } + } + remove() { + this.scene && this.scene.removeLayer(this.l7layer); + } + onRemove() { + this.scene && this.scene.layerService.stopAnimate(); + this.scene && this.scene.removeLayer(this.l7layer); + } + + render() { + if (this.scene && this.scene.getLayer(this.l7layer.id)) { + if (this.l7layer.animateStatus || (this.l7layer.layerModel && this.l7layer.layerModel.spriteAnimate)) { + this.scene.layerService.startAnimate(this.l7layer.id); + this.map.triggerRepaint(); + } else { + this.scene.layerService.renderLayer(this.l7layer.id); + } + } + } +} + +/** + * @function getL7Scene + * @category BaseTypes MapExtend + * @version 11.2.0 + * @description 扩展mapboxgl.Map， 获取@antv/L7的scene实例。使用方法： map.getL7Scene().then(scene => { console.log(scene) }); + * @returns {Promise} @antv/L7的scene实例。 + */ +mapboxgl.Map.prototype.getL7Scene = function () { + return new Promise((resolve) => { + if (mapboxgl.Map.prototype.$l7scene) { + resolve(mapboxgl.Map.prototype.$l7scene); + return mapboxgl.Map.prototype.$l7scene; + } + const scene = getL7Scene(Scene, Mapbox, this); + scene.on('loaded', () => { + mapboxgl.Map.prototype.$l7scene = scene; + resolve(scene); + return scene; + }); + }); +}; diff --git a/src/mapboxgl/package.json b/src/mapboxgl/package.json index b8bf90a52..045354c64 100644 --- a/src/mapboxgl/package.json +++ b/src/mapboxgl/package.json @@ -19,6 +19,7 @@ "mapbox-gl": "1.13.2", "three": "0.150.1", "@supermap/iclient-common": "11.2.0-dev", + "@supermap/mapboxgl-l7-render": "^0.0.1", "canvg": "3.0.10", "fast-xml-parser": "^4.2.7", "flatgeobuf": "3.23.1", diff --git a/src/maplibregl/core/MapExtend.js b/src/maplibregl/core/MapExtend.js index 0b90c6234..db1a33e37 100644 --- a/src/maplibregl/core/MapExtend.js +++ b/src/maplibregl/core/MapExtend.js @@ -2,10 +2,7 @@ * This program are made available under the terms of the Apache License, Version 2.0 * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/ import maplibregl from 'maplibre-gl'; -import { getL7Scene } from '@supermap/iclient-common/overlay/l7/L7Extend'; - - /** * @function MapExtend * @description 扩展 maplibregl.Map。 @@ -16,9 +13,6 @@ import { getL7Scene } from '@supermap/iclient-common/overlay/l7/L7Extend'; if (maplibregl.Map.prototype.addLayerBak === undefined) { maplibregl.Map.prototype.addLayerBak = maplibregl.Map.prototype.addLayer; maplibregl.Map.prototype.addLayer = function (layer, before) { - if (!maplibregl.Map.prototype.$l7scene && layer.hasOwnProperty('l7layer')) { - maplibregl.Map.prototype.$l7scene = getL7Scene(this); - } if (layer.source || layer.type === 'custom' || layer.type === 'background') { this.addLayerBak(layer, before); if (layer.overlay && !this.overlayLayersManager[layer.id]) { @@ -37,27 +31,27 @@ import { getL7Scene } from '@supermap/iclient-common/overlay/l7/L7Extend'; return this; }; } - - /** - * @function getL7Scene - * @category BaseTypes MapExtend - * @description 扩展maplibregl.Map， 获取@antv/L7的scene实例。使用方法： map.getL7Scene().then(scene => { console.log(scene) }); - * @returns {Promise} @antv/L7的scene实例。 - */ - maplibregl.Map.prototype.getL7Scene = function () { - return new Promise((resolve) => { - if (maplibregl.Map.prototype.$l7scene) { - resolve(maplibregl.Map.prototype.$l7scene); - return maplibregl.Map.prototype.$l7scene; - } - const scene = getL7Scene(this); - scene.on('loaded', () => { - maplibregl.Map.prototype.$l7scene = scene; - resolve(scene); - return maplibregl.Map.prototype.$l7scene; - }); - }); - }; + /** + * @function listLayers + * @category BaseTypes MapExtend + * @version 11.2.0 + * @description 扩展mapboxgl.Map， 获取所有叠加图层; + * @returns {Array} 图层数组。 + */ + maplibregl.Map.prototype.listLayers = function () { + const layerList = []; + const originLayers = this.style._order || []; + layerList.push(...originLayers); + for (let key in this.overlayLayersManager) { + const layer = this.overlayLayersManager[key]; + const layerId = layer.id; + if (!layerList.includes(layerId)) { + layerList.push(layerId); + } + } + return layerList; + }; + maplibregl.Map.prototype.getLayer = function (id) { if (this.overlayLayersManager[id]) { diff --git a/src/maplibregl/overlay/L7Layer.js b/src/maplibregl/overlay/L7Layer.js index 5121f077a..44f73edf1 100644 --- a/src/maplibregl/overlay/L7Layer.js +++ b/src/maplibregl/overlay/L7Layer.js @@ -1,19 +1,42 @@ import '../core/Base'; -import { L7LayerBase } from '@supermap/iclient-common/overlay/l7/L7LayerBase'; +import { Util as CommonUtil } from '@supermap/iclient-common/commontypes/Util'; +import * as L7 from '@supermap/maplibregl-l7-render'; +import { Scene, Maplibre } from '@supermap/maplibregl-l7-render'; +import { getL7Scene } from '@supermap/iclient-common/overlay/l7/util'; +import maplibregl from 'maplibre-gl'; /** * @class L7Layer * @category Visualization L7 - * @classdesc L7Layer对接了@antv/L7的图层类型，能够通过maplibre操作@antv/L7的图层。 + * @version 11.2.0 + * @classdesc L7Layer对接了@antv/L7的图层类型，能够通过maplibre-gl操作@antv/L7的图层。 * @param {Object} options - 图层配置项，包括以下参数： * @param {string} options.type - @antv/L7的图层类型，详情参见: {@link https://l7.antv.antgroup.com/api/point_layer/pointlayer}。 * @param {Object} options.options - @antv/L7图层的配置项，详情参见: {@link https://l7.antv.antgroup.com/api/point_layer/options}。 - * @param {string} [options.layerID] - 图层 ID。默认使用 CommonUtil.createUniqueID("l7Layer_") 创建图层 ID。 + * @param {string} [options.layerID] - 图层 ID。默认使用 CommonUtil.createUniqueID("l7_layer_") 创建图层 ID。 * @usage */ -export class L7Layer extends L7LayerBase { - constructor(options) { - super(options); + +export class L7Layer { + constructor({ type, options }) { + this.type = 'custom'; + this.id = options && options.layerID ? options.layerID : CommonUtil.createUniqueID('l7_layer_'); + const _options = { ...(options || {}) }; + if (type !== 'ThreeLayer') { + this.l7layer = new L7[type]({ ..._options, name: this.id }); + } + } + preBuild() { + if (!maplibregl.Map.prototype.mapExtendAddLayerBak) { + maplibregl.Map.prototype.mapExtendAddLayerBak = maplibregl.Map.prototype.addLayer; + maplibregl.Map.prototype.addLayer = function (layer, before) { + if (!maplibregl.Map.prototype.$l7scene && layer.hasOwnProperty('l7layer')) { + maplibregl.Map.prototype.$l7scene = getL7Scene(Scene, Maplibre, this); + } + this.mapExtendAddLayerBak(layer, before); + return this; + }; + } } /** * @function L7Layer.prototype.getL7Layer @@ -23,4 +46,71 @@ export class L7Layer extends L7LayerBase { getL7Layer() { return this.l7layer; } + + /** + * @function L7Layer.prototype.reRender + * @description 当修改@antv/L7的layer的配置时，重新渲染。 + */ + reRender() { + if (this.scene && this.scene.getLayer(this.l7layer.id)) { + this.scene.layerService.renderLayer(this.l7layer.id); + } + this.map && this.map.triggerRepaint(); + } + + moveLayer(id, beforeId) { + this.map.style.moveLayer(id, beforeId); + } + + setVisibility(visibility) { + visibility ? this.l7layer.show() : this.l7layer.hide(); + this.map.style.setLayoutProperty(this.id, 'visibility', visibility ? 'visible' : 'none'); + } + + onAdd(map) { + this.map = map; + const scene = map.$l7scene; + if (scene) { + this.scene = scene; + this.scene.addLayer(this.l7layer); + } + } + remove() { + this.scene && this.scene.removeLayer(this.l7layer); + } + onRemove() { + this.scene && this.scene.layerService.stopAnimate(); + this.scene && this.scene.removeLayer(this.l7layer); + } + render() { + if (this.scene && this.scene.getLayer(this.l7layer.id)) { + if (this.l7layer.animateStatus || (this.l7layer.layerModel && this.l7layer.layerModel.spriteAnimate)) { + this.scene.layerService.startAnimate(this.l7layer.id); + this.map.triggerRepaint(); + } else { + this.scene.layerService.renderLayer(this.l7layer.id); + } + } + } } +/** + * @function getL7Scene + * @category BaseTypes MapExtend + * @version 11.2.0 + * @description 扩展maplibregl.Map， 获取@antv/L7的scene实例。使用方法： map.getL7Scene().then(scene => { console.log(scene) }); + * @returns {Promise} @antv/L7的scene实例。 + */ +maplibregl.Map.prototype.getL7Scene = function () { + return new Promise((resolve) => { + if (maplibregl.Map.prototype.$l7scene) { + resolve(maplibregl.Map.prototype.$l7scene); + return maplibregl.Map.prototype.$l7scene; + } + const scene = getL7Scene(Scene, Maplibre, this); + scene.on('loaded', () => { + maplibregl.Map.prototype.$l7scene = scene; + resolve(scene); + return maplibregl.Map.prototype.$l7scene; + }); + }); +}; diff --git a/src/maplibregl/package.json b/src/maplibregl/package.json index 8893a8e45..32870af04 100644 --- a/src/maplibregl/package.json +++ b/src/maplibregl/package.json @@ -21,6 +21,7 @@ "canvg": "3.0.10", "proj4": "2.9.0", "@supermap/iclient-common": "11.2.0-dev", + "@supermap/maplibregl-l7-render": "^0.0.1", "rbush": "^2.0.2" } } diff --git a/test/mapboxgl/core/MapExtendSpec.js b/test/mapboxgl/core/MapExtendSpec.js index c95b2e4d6..162eb4c8a 100644 --- a/test/mapboxgl/core/MapExtendSpec.js +++ b/test/mapboxgl/core/MapExtendSpec.js @@ -1,5 +1,6 @@ -import '../../../src/mapboxgl/core/MapExtend'; import mapboxgl from 'mapbox-gl'; +import '../../../src/mapboxgl/core/MapExtend'; +import { L7Layer } from '../../../src/mapboxgl/overlay'; describe('MapExtend', () => { var url = 'http://supermapiserver:8090/iserver/services/map-china400/rest/maps/China'; @@ -43,14 +44,11 @@ describe('MapExtend', () => { map && map.remove(); }); - it('getL7Scene init', async () => { - map.addLayer({ l7layer: {} }); - expect(mapboxgl.Map.prototype.$l7scene).not.toBeNull(); - const scene = await map.getL7Scene(); - expect(scene).not.toBeNull(); - }); - it('getL7Scene', async () => { - const scene = await map.getL7Scene(); - expect(scene).not.toBeNull(); + it('listLayers', (done) => { + map.style._order = ['raster', 'fill-1', 'circle-1', 'l7_layer_1']; + map.overlayLayersManager = { l7_layer_1: { id: 'l7_layer_1' }, heatmap_1: { id: 'heatmap_1' } }; + const layers = map.listLayers(); + expect(layers).toEqual(['raster', 'fill-1', 'circle-1', 'l7_layer_1', 'heatmap_1']); + done(); }); }); diff --git a/test/mapboxgl/overlay/L7LayerSpec.js b/test/mapboxgl/overlay/L7LayerSpec.js index 6fc688e82..63bd3d661 100644 --- a/test/mapboxgl/overlay/L7LayerSpec.js +++ b/test/mapboxgl/overlay/L7LayerSpec.js @@ -67,6 +67,33 @@ describe('L7Layer', () => { map = null; }); + it('getL7Scene', async () => { + const scene = await map.getL7Scene(); + expect(scene).not.toBeNull(); + }); + + it('getL7Scene init', async () => { + var layer = new L7Layer({ type: 'PointLayer' }); + var l7Layer = layer.getL7Layer(); + l7Layer + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('circle') + .active(true) + .animate(true) + .size(56) + .color('#4cfd47'); + map.addLayer(layer); + expect(mapboxgl.Map.prototype.$l7scene).not.toBeNull(); + const scene = await map.getL7Scene(); + expect(scene).not.toBeNull(); + }); + it('PointLayer', (done) => { var layer = new L7Layer({ type: 'PointLayer' }); var l7Layer = layer.getL7Layer(); @@ -146,4 +173,84 @@ describe('L7Layer', () => { map.removeLayer(layer.id); done(); }); + + it('PointLayer rerender', (done) => { + var layer = new L7Layer({ type: 'PointLayer' }); + var l7Layer = layer.getL7Layer(); + l7Layer + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('circle') + .active(true) + .animate(true) + .size(56) + .color('#4cfd47'); + map.addLayer(layer); + expect(l7Layer).not.toBeNull(); + expect(layer.type).toBe('custom'); + layer.reRender(); + done(); + }); + + it('PointLayer removeLayer', (done) => { + var layer = new L7Layer({ type: 'PointLayer' }); + var l7Layer = layer.getL7Layer(); + l7Layer + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('circle') + .active(true) + .animate(true) + .size(56) + .color('#4cfd47'); + map.addLayer(layer); + expect(l7Layer).not.toBeNull(); + expect(layer.type).toBe('custom'); + map.removeLayer(layer.id); + done(); + }); + + it('PointLayer setVisibility', (done) => { + var layer = new L7Layer({ type: 'PointLayer' }); + var l7Layer = layer.getL7Layer(); + l7Layer + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('circle') + .active(true) + .animate(true) + .size(56) + .color('#4cfd47'); + map.addLayer(layer); + expect(l7Layer).not.toBeNull(); + + spyOn(l7Layer, 'show'); + spyOn(l7Layer, 'hide'); + spyOn(map.style, 'setLayoutProperty'); + + map.setVisibility(layer.id, false); + expect(l7Layer.hide).toHaveBeenCalled(); + expect(map.style.setLayoutProperty).toHaveBeenCalled(); + + map.setVisibility(layer.id, true); + expect(l7Layer.show).toHaveBeenCalled(); + expect(map.style.setLayoutProperty).toHaveBeenCalled(); + + done(); + }); }); diff --git a/test/maplibregl/core/MapExtendSpec.js b/test/maplibregl/core/MapExtendSpec.js index db0271eb0..cf65a7fea 100644 --- a/test/maplibregl/core/MapExtendSpec.js +++ b/test/maplibregl/core/MapExtendSpec.js @@ -1,5 +1,6 @@ import '../../../src/maplibregl/core/MapExtend'; import maplibregl from 'maplibre-gl'; +import { L7Layer } from '../../../src/maplibregl/overlay'; describe('MapExtend', () => { var url = 'http://supermapiserver:8090/iserver/services/map-china400/rest/maps/China'; @@ -43,14 +44,11 @@ describe('MapExtend', () => { map && map.remove(); }); - it('getL7Scene init', async () => { - map.addLayer({ l7layer: {} }); - expect(maplibregl.Map.prototype.$l7scene).not.toBeNull(); - const scene = await map.getL7Scene(); - expect(scene).not.toBeNull(); - }); - it('getL7Scene', async () => { - const scene = await map.getL7Scene(); - expect(scene).not.toBeNull(); + it('listLayers', (done) => { + map.style._order = ['raster', 'fill-1', 'circle-1', 'l7_layer_1']; + map.overlayLayersManager = { l7_layer_1: { id: 'l7_layer_1' }, heatmap_1: { id: 'heatmap_1' } }; + const layers = map.listLayers(); + expect(layers).toEqual(['raster', 'fill-1', 'circle-1', 'l7_layer_1', 'heatmap_1']); + done(); }); }); diff --git a/test/maplibregl/overlay/L7LayerSpec.js b/test/maplibregl/overlay/L7LayerSpec.js index bf4dddae7..a7de9b46b 100644 --- a/test/maplibregl/overlay/L7LayerSpec.js +++ b/test/maplibregl/overlay/L7LayerSpec.js @@ -65,6 +65,33 @@ describe('L7Layer', () => { map = null; }); + it('getL7Scene', async () => { + const scene = await map.getL7Scene(); + expect(scene).not.toBeNull(); + }); + + it('getL7Scene init', async () => { + var layer = new L7Layer({ type: 'PointLayer' }); + var l7Layer = layer.getL7Layer(); + l7Layer + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('circle') + .active(true) + .animate(true) + .size(56) + .color('#4cfd47'); + map.addLayer(layer); + expect(maplibregl.Map.prototype.$l7scene).not.toBeNull(); + const scene = await map.getL7Scene(); + expect(scene).not.toBeNull(); + }); + it('PointLayer', (done) => { var layer = new L7Layer({ type: 'PointLayer' }); var l7Layer = layer.getL7Layer(); @@ -144,4 +171,26 @@ describe('L7Layer', () => { map.removeLayer(layer.id); done(); }); + it('PointLayer rerender', (done) => { + var layer = new L7Layer({ type: 'PointLayer' }); + var l7Layer = layer.getL7Layer(); + l7Layer + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('circle') + .active(true) + .animate(true) + .size(56) + .color('#4cfd47'); + map.addLayer(layer); + expect(l7Layer).not.toBeNull(); + expect(layer.type).toBe('custom'); + layer.reRender(); + done(); + }); });