Skip to content

Commit 0295d2f

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
2 parents f6bb40d + b2266f4 commit 0295d2f

File tree

11 files changed

+2376
-2131
lines changed

11 files changed

+2376
-2131
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@
99
/web/
1010
/package-lock.json
1111
.npmrc
12-
/dist/mapboxgl/resources/
12+
/dist/mapboxgl/resources/
13+
/dist/maplibregl/resources/

‎dist/mapboxgl/include-mapboxgl.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
inputScript(libsurl + '/mapbox-gl-js/1.13.2/mapbox-gl.js');
6060
}
6161
if (inArray(includes, 'mapbox-gl-enhance')) {
62-
inputCSS(libsurl + '/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.css');
63-
inputScript(libsurl + '/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.js');
62+
inputCSS(libsurl + '/mapbox-gl-js-enhance/1.12.1-8/mapbox-gl-enhance.css');
63+
inputScript(libsurl + '/mapbox-gl-js-enhance/1.12.1-8/mapbox-gl-enhance.js');
6464
}
6565
if (inArray(includes, 'L7')) {
6666
inputScript(libsurl + '/mapboxgl-l7-render/0.0.2/mapboxgl-l7-render.js');

‎src/common/mapping/WebMapBase.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const WORLD_WIDTH = 360;
4949
* @fires WebMapBase#mapbeforeremove
5050
* @fires WebMapBase#getmapfailed
5151
* @fires WebMapBase#getlayersfailed
52+
* @fires WebMapBase#xyztilelayernotsupport
5253
* @usage
5354
*/
5455
export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
@@ -160,6 +161,11 @@ export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
160161
* @description 底图投影与底图投影不匹配。
161162
*/
162163
'projectionnotmatch',
164+
/**
165+
* @event WebMapBase#xyztilelayernotsupport
166+
* @description XYZ TILE图层与底图的分辨率或原点不匹配。
167+
*/
168+
'xyztilelayernotsupport',
163169
'layeraddchanged',
164170
'layerupdatechanged',
165171
/**

‎src/common/mapping/WebMapV2.js

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -688,12 +688,50 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
688688
}
689689

690690
_createZXYLayer(layerInfo, addedCallback) {
691-
const { url, subdomains, layerID, name, visible } = layerInfo;
691+
const { url, subdomains, layerID, name, visible, tileSize, resolutions, origin, minZoom: minzoom, maxZoom: maxzoom } = layerInfo;
692692
const urls = (subdomains && subdomains.length) ? subdomains.map(item => url.replace('{s}', item)) : [url];
693693
const layerId = layerID || name;
694-
this._addBaselayer({ url: urls, layerID: layerId, visibility: visible });
694+
const isSupport = this._isSupportZXYTileLayer({ resolutions, tileSize, origin });
695+
if (isSupport) {
696+
this._addBaselayer({ url: urls, layerID: layerId, visibility: visible, minzoom, maxzoom, isIserver: false, tileSize });
697+
} else {
698+
this.fire('xyztilelayernotsupport', { error: `The resolutions or origin of layer ${name} on XYZ Tile does not match the map`, error_code: 'XYZ_TILE_LAYER_NOT_SUPPORTED', layer: layerInfo});
699+
}
695700
addedCallback && addedCallback();
696701
}
702+
_isSupportZXYTileLayer({ resolutions, tileSize, origin }) {
703+
const isOldWebMecartor = origin === undefined && resolutions === undefined;
704+
if (isOldWebMecartor) {
705+
return true;
706+
}
707+
return this._isSameOrigin(origin) && this._isSameResolutions(resolutions, tileSize);
708+
}
709+
numberEqual(num1, num2, precision = 10E-6) {
710+
return Math.abs(+num1 - +num2) <= precision;
711+
}
712+
_isSameOrigin(origin) {
713+
const extent = this.map.getCRS().getExtent();
714+
return this.numberEqual(origin[0], extent[0]) && this.numberEqual(origin[1], extent[3]);
715+
}
716+
_isSameResolutions(resolutions, tileSize, mapTileSize = 512) {
717+
const mapResolutions = this._getMapResolutions();
718+
const conversion = mapTileSize / tileSize;
719+
return resolutions.every((item, i) => this.numberEqual(item, conversion * mapResolutions[i]));
720+
}
721+
_getMapResolutions() {
722+
return this._getResolutionsByExtent({extent: this.map.getCRS().getExtent(), tileSize: 512})
723+
}
724+
_getResolutionsByExtent({ extent, maxZoom = 24, tileSize }) {
725+
const width = extent[2] - extent[0];
726+
const height = extent[3] - extent[1];
727+
const size = width >= height ? width : height;
728+
const maxReolution = size / tileSize;
729+
const resolutions = [];
730+
for (let i = 0; i <= maxZoom; i++) {
731+
resolutions.push(maxReolution / Math.pow(2, i));
732+
}
733+
return resolutions;
734+
}
697735

698736
_createDynamicTiledLayer(layerInfo, addedCallback) {
699737
const url = layerInfo.url;
@@ -2425,14 +2463,15 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
24252463
minzoom = 0,
24262464
maxzoom = 22,
24272465
isIserver = false,
2466+
tileSize = 256,
24282467
bounds
24292468
}) {
24302469
const source = {
24312470
type: 'raster',
24322471
tiles: url,
24332472
minzoom: minzoom || 0,
24342473
maxzoom: maxzoom || 22,
2435-
tileSize: isIserver ? this.rasterTileSize : 256,
2474+
tileSize: isIserver ? this.rasterTileSize : tileSize,
24362475
rasterSource: isIserver ? 'iserver' : '',
24372476
prjCoordSys:
24382477
isIserver && !this.isOnlineBaseLayer(url[0], this.baseProjection) && +this.baseProjection.split(':')[1] > 0

‎src/mapboxgl/mapping/WebMap.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { GraticuleLayer } from '../overlay/GraticuleLayer';
3131
* <p style="font-size: 13px"><a href="https://iclient.supermap.io/web/libs/antv/g2/4.2.8/g2.min.js">G2: </a>&lt;script type="text/javascript" src="https://iclient.supermap.io/web/libs/antv/g2/4.2.8/g2.min.js"&gt;&lt;/script&gt;</p>
3232
* <p style="font-size: 13px"><a href="https://iclient.supermap.io/web/libs/antv/g6/4.3.2/g6.min.js">G6: </a>&lt;script type="text/javascript" src="https://iclient.supermap.io/web/libs/antv/g6/4.3.2/g6.min.js"&gt;&lt;/script&gt;</p>
3333
* <p style="font-size: 13px"><a href="https://iclient.supermap.io/web/libs/fast-xml-parser/4.2.7/fxparser.min.js">fast-xml-parser: </a>&lt;script type="text/javascript" src="https://iclient.supermap.io/web/libs/fast-xml-parser/4.2.7/fxparser.min.js"&gt;&lt;/script&gt;</p>
34-
* <p style="font-size: 13px"><a href="https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.jss">mapbox-gl-js-enhance: </a>&lt;script type="text/javascript" src="https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.js"&gt;&lt;/script&gt;</p>
34+
* <p style="font-size: 13px"><a href="https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-8/mapbox-gl-enhance.jss">mapbox-gl-js-enhance: </a>&lt;script type="text/javascript" src="https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-8/mapbox-gl-enhance.js"&gt;&lt;/script&gt;</p>
3535
* </div>
3636
* @modulecategory Mapping
3737
* @param {number} id - iPortal|Online 地图 ID。
@@ -68,6 +68,7 @@ import { GraticuleLayer } from '../overlay/GraticuleLayer';
6868
* @fires WebMap#dataflowfeatureupdated
6969
* @fires WebMap#projectionnotmatch
7070
* @fires WebMap#mapbeforeremove
71+
* @fires WebMap#xyztilelayernotsupport
7172
* @fires WebMap#getmapfailed
7273
* @fires WebMap#getlayersfailed
7374
* @usage

‎src/maplibregl/mapping/WebMap.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import { GraticuleLayer } from '../overlay/GraticuleLayer';
7070
* @fires WebMap#mapbeforeremove
7171
* @fires WebMap#getmapfailed
7272
* @fires WebMap#getlayersfailed
73+
* @fires WebMap#xyztilelayernotsupport
7374
* @usage
7475
*/
7576
export class WebMap extends createWebMapBaseExtending(maplibregl.Evented, { mapRepo: maplibregl }) {

‎src/openlayers/mapping/WebMap.js

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import * as olLayer from 'ol/layer';
3232
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
3333
import WMSCapabilities from 'ol/format/WMSCapabilities';
3434
import TileGrid from 'ol/tilegrid/TileGrid';
35+
import * as olTilegrid from 'ol/tilegrid';
3536
import WMTSTileGrid from 'ol/tilegrid/WMTS';
3637
import * as olGeometry from 'ol/geom';
3738
import Vector from 'ol/source/Vector';
@@ -988,7 +989,8 @@ export class WebMap extends Observable {
988989
var layer = new olLayer.Tile({
989990
source: source,
990991
zIndex: layerInfo.zIndex || 1,
991-
visible: layerInfo.visible
992+
visible: layerInfo.visible,
993+
...this.getLayerOtherOptions(layerInfo)
992994
});
993995
var layerID = Util.newGuid(8);
994996
if (layerInfo.name) {
@@ -1324,6 +1326,33 @@ export class WebMap extends Observable {
13241326
});
13251327
}
13261328

1329+
getLayerOtherOptions(layerInfo) {
1330+
const { layerType, extent, minZoom, maxZoom } = layerInfo;
1331+
const extentVal = layerType === 'ZXY_TILE' ? this._getZXYTileMapBounds(layerInfo) : extent;
1332+
const options = { extent: extentVal };
1333+
if (typeof minZoom === 'number') {
1334+
options.minZoom = minZoom;
1335+
}
1336+
if (typeof maxZoom === 'number') {
1337+
options.maxZoom = maxZoom;
1338+
}
1339+
return options;
1340+
}
1341+
_getZXYTileMapBounds(layerInfo) {
1342+
const { mapBounds, tileSize = 256, resolutions, origin } = layerInfo;
1343+
if (mapBounds) {
1344+
return mapBounds;
1345+
}
1346+
if (resolutions) {
1347+
const maxResolution = resolutions.sort((a, b) => b - a)[0];
1348+
const size = maxResolution * tileSize;
1349+
return [origin[0], origin[1] - size, origin[0] + size, origin[1]];
1350+
}
1351+
// 兼容之前的3857全球剖分
1352+
if (this.baseProjection == 'EPSG:3857') {
1353+
return [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
1354+
}
1355+
}
13271356
/**
13281357
* @private
13291358
* @function WebMap.prototype.createXYZTileSource
@@ -1332,17 +1361,26 @@ export class WebMap extends Observable {
13321361
* @returns {ol.source.XYZ} xyz的source
13331362
*/
13341363
createXYZTileSource(layerInfo) {
1335-
const { url, subdomains } = layerInfo;
1336-
const urls = (subdomains && subdomains.length) ? subdomains.map(item => url.replace('{s}', item)) : [url];
1337-
const tileGrid = TileSuperMapRest.createTileGrid([-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892]);
1338-
return new XYZ({
1364+
const { url, subdomains, origin, resolutions, tileSize } = layerInfo;
1365+
const urls = subdomains && subdomains.length ? subdomains.map((item) => url.replace('{s}', item)) : [url];
1366+
const options = {
13391367
urls,
13401368
wrapX: false,
13411369
crossOrigin: 'anonymous',
1342-
tileGrid
1343-
});
1370+
tileGrid: this._getTileGrid({ origin, resolutions, tileSize }),
1371+
projection: this.baseProjection
1372+
};
1373+
return new XYZ(options);
1374+
}
1375+
_getTileGrid({ origin, resolutions, tileSize }) {
1376+
if (origin === undefined && resolutions === undefined) {
1377+
// 兼容上一版webMercator全球剖分
1378+
const extent = [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
1379+
return olTilegrid.createXYZ({ extent });
1380+
} else {
1381+
return new TileGrid({ origin, resolutions, tileSize });
1382+
}
13441383
}
1345-
13461384
/**
13471385
* @private
13481386
* @function WebMap.prototype.createWMSSource

‎test/mapboxgl/mapping/WebMapV2Spec.js

Lines changed: 110 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1382,8 +1382,6 @@ describe('mapboxgl_WebMapV2', () => {
13821382
datavizWebmap.on('mapcreatesucceeded', callback);
13831383
});
13841384

1385-
1386-
13871385
it('updateOverlayLayer unique', (done) => {
13881386
spyOn(FetchRequest, 'get').and.callFake((url) => {
13891387
if (url.indexOf('portal.json') > -1) {
@@ -1492,7 +1490,7 @@ describe('mapboxgl_WebMapV2', () => {
14921490
});
14931491
});
14941492

1495-
it('add zxytile layer', (done) => {
1493+
it('add zxytile layer 3857全球剖分', (done) => {
14961494
spyOn(FetchRequest, 'get').and.callFake((url) => {
14971495
if (url.indexOf('portal.json') > -1) {
14981496
return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
@@ -1522,6 +1520,49 @@ describe('mapboxgl_WebMapV2', () => {
15221520
});
15231521
});
15241522

1523+
it('add zxytile layer 4326 world', (done) => {
1524+
spyOn(FetchRequest, 'get').and.callFake((url) => {
1525+
if (url.indexOf('portal.json') > -1) {
1526+
return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
1527+
} else if (url.indexOf('/map.json') > -1) {
1528+
return Promise.resolve(new Response(datavizWebmap_ZXYTILE_4326));
1529+
}
1530+
return Promise.resolve(new Response(JSON.stringify({})));
1531+
});
1532+
const map = {
1533+
...commonMap,
1534+
getCRS: () => {
1535+
return {
1536+
epsgCode: 'EPSG:4326',
1537+
unit: 'degrees',
1538+
getExtent: () => [-180, -90, 180, 90]
1539+
};
1540+
}
1541+
};
1542+
datavizWebmap = new WebMap(
1543+
'test',
1544+
{
1545+
target: 'map',
1546+
serverUrl: 'http://fake/fakeiportal',
1547+
withCredentials: false
1548+
},
1549+
{
1550+
style: {
1551+
version: 8,
1552+
sources: {},
1553+
layers: []
1554+
}
1555+
},
1556+
{
1557+
map
1558+
}
1559+
);
1560+
datavizWebmap.on('mapcreatesucceeded', ({ layers }) => {
1561+
expect(layers.length).toBe(2);
1562+
done();
1563+
});
1564+
});
1565+
15251566
it('isvj-5215', (done) => {
15261567
spyOn(FetchRequest, 'get').and.callFake((url) => {
15271568
if (url.indexOf('portal.json') > -1) {
@@ -2683,28 +2724,90 @@ describe('mapboxgl_WebMapV2', () => {
26832724
});
26842725
});
26852726

2686-
it('initial_xyzLayer', (done) => {
2727+
it('initial_xyzLayer 3857全球剖分', (done) => {
26872728
spyOn(FetchRequest, 'get').and.callFake((url) => {
26882729
if (url.indexOf('map.json') > -1) {
26892730
return Promise.resolve(new Response(JSON.stringify(xyzLayer)));
26902731
} else if (url.indexOf('portal.json') > -1) {
26912732
return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
26922733
}
2693-
return Promise.resolve();
2734+
return Promise.resolve(new Response(JSON.stringify({})));
26942735
});
26952736
datavizWebmap = new WebMap(id, {
26962737
server: server
26972738
});
26982739
datavizWebmap.on('mapcreatesucceeded', ({ map }) => {
26992740
const layers = map.getStyle().layers;
2700-
expect(layers.length).toBe(1);
2741+
expect(layers.length).toBe(2);
27012742
const xyzLayer = layers[0];
27022743
expect(xyzLayer.id).toBe('OpenStreetMap');
27032744
expect(xyzLayer.type).toBe('raster');
2745+
const xyzLayer1 = layers[1];
2746+
expect(xyzLayer1.id).toBe('xyz');
2747+
expect(xyzLayer1.type).toBe('raster');
2748+
done();
2749+
});
2750+
});
2751+
it('initial_xyzLayer world 4326', (done) => {
2752+
spyOn(FetchRequest, 'get').and.callFake((url) => {
2753+
if (url.indexOf('map.json') > -1) {
2754+
return Promise.resolve(new Response(JSON.stringify(xyzLayer4326)));
2755+
} else if (url.indexOf('portal.json') > -1) {
2756+
return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
2757+
}
2758+
return Promise.resolve(new Response(JSON.stringify({})));
2759+
});
2760+
const map = {
2761+
...commonMap,
2762+
getCRS: () => {
2763+
return {
2764+
epsgCode: 'EPSG:4326',
2765+
unit: 'degrees',
2766+
getExtent: () => [-180, -90, 180, 90]
2767+
};
2768+
}
2769+
};
2770+
datavizWebmap = new WebMap(id, {
2771+
server: server
2772+
});
2773+
datavizWebmap.on('mapcreatesucceeded', ({ map }) => {
2774+
const layers = map.getStyle().layers;
2775+
expect(layers.length).toBe(2);
2776+
const xyzLayer = layers[1];
2777+
expect(xyzLayer.id).toBe('mapboxgl-256x2');
2778+
expect(xyzLayer.type).toBe('raster');
2779+
done();
2780+
});
2781+
});
2782+
it('initial_xyzLayer jingjin 4326', (done) => {
2783+
spyOn(FetchRequest, 'get').and.callFake((url) => {
2784+
if (url.indexOf('map.json') > -1) {
2785+
return Promise.resolve(new Response(JSON.stringify(xyzLayerjingjin4326)));
2786+
} else if (url.indexOf('portal.json') > -1) {
2787+
return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
2788+
}
2789+
return Promise.resolve(new Response(JSON.stringify({})));
2790+
});
2791+
const map = {
2792+
...commonMap,
2793+
getCRS: () => {
2794+
return {
2795+
epsgCode: 'EPSG:4326',
2796+
unit: 'degrees',
2797+
getExtent: () => [-180, -90, 180, 90]
2798+
};
2799+
}
2800+
};
2801+
datavizWebmap = new WebMap(id, {
2802+
server: server,
2803+
map
2804+
});
2805+
datavizWebmap.on('xyztilelayernotsupport', (e) => {
2806+
expect(e.error).toBe(`The resolutions or origin of layer jingjin on XYZ Tile does not match the map`);
2807+
expect(e.error_code).toBe(`XYZ_TILE_LAYER_NOT_SUPPORTED`);
27042808
done();
27052809
});
27062810
});
2707-
27082811
it('initial_mapboxstyleLayer', (done) => {
27092812
spyOn(FetchRequest, 'get').and.callFake((url) => {
27102813
if (url.indexOf('map.json') > -1) {

‎test/maplibregl/mapping/WebMapV2Spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2646,7 +2646,7 @@ describe('maplibregl_WebMapV2', () => {
26462646
});
26472647
datavizWebmap.on('mapcreatesucceeded', ({ map }) => {
26482648
const layers = map.getStyle().layers;
2649-
expect(layers.length).toBe(1);
2649+
expect(layers.length).toBe(2);
26502650
const xyzLayer = layers[0];
26512651
expect(xyzLayer.id).toBe('OpenStreetMap');
26522652
expect(xyzLayer.type).toBe('raster');

0 commit comments

Comments
 (0)