ol initmap 支持 tileset review by luox

Author: xilanhuaweidapao

src/common/iServer/InitMapServiceBase.js

@@ -114,6 +114,38 @@ export function getEpsgCode(prjCoordSys) {
   return 'EPSG:' + epsgCode;
 }
 
+/**
+ * @private
+ * @function getTileFormat
+ * @description 获取瓦片格式。
+ * @returns {string} 瓦片格式
+ */
+
+export function getTileFormat(tileset) {
+  if (tileset.tileFormat) {
+    const format = tileset.tileFormat.toLowerCase();
+    if (['jpg_png', 'default', 'png8'].includes(format)) {
+      return 'png';
+    }
+    return format;
+  }
+  return 'png';
+}
+
+/**
+ * @private
+ * @function getTileset
+ * @description 获取 tilseset
+ * @returns {Object}
+ */
+
+export function getTileset(tilesets = [], targets) {
+  const imageTilesets = tilesets.filter((i) => {
+    return i.metaData.tileType === targets.tileType || 'Image' && getEpsgCode(i.metaData.prjCoordSys) === getEpsgCode(targets.prjCoordSys);
+  });
+  return imageTilesets[0] && imageTilesets[0].metaData;
+}
+
 
 /**
  * @private

src/leaflet/mapping/initMap.js

@@ -10,7 +10,9 @@ import { MapService } from '../services/MapService';
 import {
     InitMapServiceBase,
     isPlaneProjection,
-    getEpsgCode
+    getEpsgCode,
+    getTileFormat,
+    getTileset
 } from '@supermap/iclient-common/iServer/InitMapServiceBase';
 import proj4 from 'proj4';
 
@@ -73,19 +75,20 @@ export async function initMap(url, options) {
         const origin = [tileset.originalPoint.x, tileset.originalPoint.y]
         const resolutions = tileset.resolutions;
         const scaleDenominators = tileset.scaleDenominators
+        const coordUnit = mapObject.coordUnit;
         maxZoom = resolutions.length - 1;
-        crs = crsFromMapJSON({ prjCoordSys, bounds, resolutions, origin, dpi: getDpi(1.0 / scaleDenominators[0], resolutions[0]) }, { maxZoom });
+        crs = crsFromMapJSON({ prjCoordSys, bounds, resolutions, origin, dpi: getDpi(1.0 / scaleDenominators[0], resolutions[0], coordUnit) }, { maxZoom });
         zoom = getZoomByResolution(1.0 / scale, scaleDenominators);
     } else {
         tileFormat = 'webp';
         tileSize = 256;
         transparent = true;
         const { scale, dpi, coordUnit } = mapObject;
         const origin = [bounds.left, bounds.top];
-        const resolutions = scalesToResolutions(mapObject.visibleScales, bounds, dpi, coordUnit, scale);
+        const resolutions = scalesToResolutions(mapObject.visibleScales, bounds, dpi, coordUnit, mapOptions.maxZoom, scale);
         maxZoom = resolutions.length - 1;
         crs = crsFromMapJSON({ prjCoordSys, bounds, resolutions, origin, dpi }, { maxZoom });
-        zoom = getZoomByScale({ scale, dpi, coordUnit }, resolutions)
+        zoom = getZoomByScale({ scale, dpi, coordUnit }, resolutions);
     }
 
     const mapInfoOptions = {   
@@ -240,12 +243,6 @@ function getNonEarthCRS(bounds, origin, resolutions) {
     };
     return new NonEarthCRS(options);
 }
-function getTileset(tilesets = [], targets) {
-    const imageTilesets = tilesets.filter((i) => {
-        return i.metaData.tileType === targets.tileType || 'Image' && getEpsgCode(i.metaData.prjCoordSys) === getEpsgCode(targets.prjCoordSys);
-    });
-    return imageTilesets[0] ? imageTilesets[0].metaData : {};
-}
 
 function getCRS(epsgCodeStr, { bounds, origin, dpi, resolutions }) {
     const wrapLngLeft = proj4(epsgCodeStr, 'EPSG:4326').forward([bounds.left, 0], true);
@@ -262,13 +259,3 @@ function getCRS(epsgCodeStr, { bounds, origin, dpi, resolutions }) {
     }
     return new CRS(epsgCodeStr, options);
 }
-function getTileFormat(tileset) {
-    if (tileset.tileFormat) {
-        const format = tileset.tileFormat.toLowerCase();
-        if (['jpg_png', 'default', 'png8'].includes(format)) {
-            return 'png';
-        }
-        return format;
-    }
-    return 'png';
-}

src/openlayers/core/Util.js

@@ -3,7 +3,7 @@
  * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
  import { Bounds } from '@supermap/iclient-common/commontypes/Bounds';
  import { GeoJSON as GeoJSONFormat } from '@supermap/iclient-common/format/GeoJSON';
- import { getMeterPerMapUnit, scalesToResolutions, getZoomByResolution } from '@supermap/iclient-common/util/MapCalculateUtil';
+ import { getMeterPerMapUnit, scalesToResolutions, getZoomByResolution, getDpi } from '@supermap/iclient-common/util/MapCalculateUtil';
  import * as olUtil from 'ol/util';
  import Geometry from 'ol/geom/Geometry';
  import { getVectorContext } from 'ol/render';
@@ -426,6 +426,7 @@
    scalesToResolutions(scales, bounds, dpi, unit, mapobj, level) {
     return scalesToResolutions(scales, bounds, dpi, unit, mapobj, level);
    },
+   getDpi,
    getProjection(prjCoordSys, extent) {
     let projection = get(`EPSG:${prjCoordSys.epsgCode}`);
     if (prjCoordSys.type == 'PCS_NON_EARTH') {

src/openlayers/mapping/InitMap.js

@@ -1,5 +1,5 @@
 import { MapService } from '../services/MapService';
-import { InitMapServiceBase, isPlaneProjection } from '@supermap/iclient-common/iServer/InitMapServiceBase';
+import { InitMapServiceBase, isPlaneProjection, getTileFormat, getTileset } from '@supermap/iclient-common/iServer/InitMapServiceBase';
 import olMap from 'ol/Map';
 import View from 'ol/View';
 import Tile from 'ol/layer/Tile';
@@ -41,29 +41,53 @@ window.proj4 = proj4;
  * initMap(url, { mapOptions, viewOptions, layerOptions, sourceOptions })
  * ```
  * */
-export function initMap(url, options = {}) {
+export async function initMap(url, options = {}) {
   const { mapOptions, viewOptions, layerOptions, sourceOptions } = options;
   const initMapService = new InitMapServiceBase(MapService, url, options);
-  return initMapService.getMapInfo(async function (serviceResult, resolve, reject) {
-    if (!serviceResult || !serviceResult.result) {
-      reject('service is not work!');
-      return;
-    }
-    let { prjCoordSys, bounds } = serviceResult.result;
-    if (!get(`EPSG:${prjCoordSys.epsgCode}`) && !isPlaneProjection(prjCoordSys.type)) {
-      const wkt = await initMapService.getWKT();
-      registerProj(prjCoordSys.epsgCode, wkt, bounds);
-    }
+  const tilesets = await initMapService.getTilesets();
+  const result = await initMapService.getMapInfo();
+  if (!result || !result.result) {
+    return 'service is not work!';
+  }
+  const mapObject = result.result;
+  const { prjCoordSys, bounds, center, visibleScales, coordUnit, scale, dpi } = mapObject;
+  // tileset和地图不同投影，优先使用地图
+  const tileset = getTileset(tilesets.result, { prjCoordSys, tileType: 'Image' });
 
-    let map = createMap(serviceResult.result, mapOptions, viewOptions);
-    let { layer, source } = createLayer(url, serviceResult.result, sourceOptions, layerOptions);
-    map.addLayer(layer);
-    resolve({
-      map,
-      source,
-      layer
-    });
-  });
+  const config = {
+    center,
+    bounds,
+    dpi,
+    visibleScales,
+    scale,
+    prjCoordSys,
+    coordUnit,
+    tileFormat: 'webp',
+    tileSize: 256
+  };
+  if (tileset) {
+    config.tileFormat = getTileFormat(tileset);
+    config.tileSize = tileset.tileWidth || 256;
+    config.transparent = tileset.transparent || true;
+    config.origin = [tileset.originalPoint.x, tileset.originalPoint.y];
+    config.resolutions = tileset.resolutions;
+    config.scaleDenominators = tileset.scaleDenominators;
+    config.dpi = Util.getDpi(1.0 / tileset.scaleDenominators[0], tileset.resolutions[0], coordUnit);
+  }
+
+  if (!get(`EPSG:${prjCoordSys.epsgCode}`) && !isPlaneProjection(prjCoordSys.type)) {
+    const wkt = await initMapService.getWKT();
+    registerProj(prjCoordSys.epsgCode, wkt, bounds);
+  }
+
+  let map = createMap(config, mapOptions, viewOptions);
+  let { layer, source } = createLayer(url, config, sourceOptions, layerOptions);
+  map.addLayer(layer);
+  return {
+    map,
+    source,
+    layer
+  };
 }
 
 /**
@@ -77,13 +101,14 @@ export function initMap(url, options = {}) {
  */
 
 export function viewOptionsFromMapJSON(mapJSONObj, level = 22) {
-  let { bounds, dpi, center, visibleScales, scale, coordUnit, prjCoordSys } = mapJSONObj;
+  let { bounds, dpi, center, visibleScales, scale, coordUnit, prjCoordSys, scaleDenominators, resolutions } = mapJSONObj;
   const mapCenter =
     center.x && center.y ? [center.x, center.y] : [(bounds.left + bounds.right) / 2, (bounds.bottom + bounds.top) / 2];
   const extent = [bounds.left, bounds.bottom, bounds.right, bounds.top];
   let projection = Util.getProjection(prjCoordSys, extent);
-  var resolutions = Util.scalesToResolutions(visibleScales, bounds, dpi, coordUnit, level);
-  const zoom = Util.getZoomByResolution(Util.scaleToResolution(scale, dpi, coordUnit), resolutions);
+  resolutions = resolutions || Util.scalesToResolutions(visibleScales, bounds, dpi, coordUnit, level);
+  const resolution = scaleDenominators ? (1.0 / scale) : Util.scaleToResolution(scale, dpi, coordUnit);
+  const zoom = Util.getZoomByResolution(resolution, resolutions);
   return {
     center: mapCenter,
     projection,

src/openlayers/mapping/TileSuperMapRest.js

@@ -322,15 +322,23 @@ export class TileSuperMapRest extends TileImage {
      * @param {Object} mapJSONObj - 地图 JSON 对象。
      */
     static optionsFromMapJSON(url, mapJSONObj) {
-        var options = {};
+        var options = {
+        };
+        if (mapJSONObj.tileFormat) {
+          options.format = mapJSONObj.tileFormat;
+        }
+        if (mapJSONObj.origin) {
+          options.origin = mapJSONObj.origin;
+        }
         options.url = url;
         options.crossOrigin = 'anonymous';
         var extent = [mapJSONObj.bounds.left, mapJSONObj.bounds.bottom, mapJSONObj.bounds.right, mapJSONObj.bounds.top];
         const { visibleScales, bounds, dpi, coordUnit } = mapJSONObj;
         var resolutions = Util.scalesToResolutions(visibleScales, bounds, dpi, coordUnit);
         options.tileGrid = new TileGrid({
             extent: extent,
-            resolutions: resolutions
+            resolutions: resolutions,
+            tileSize: mapJSONObj.tileSize || 256
         });
         return options;
     }