@sl-utils/map 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sl-utils/map",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "main": "index.cjs",
   "module": "./src/sl-utils-map.ts",
@@ -10,6 +10,7 @@
     "build:cjs": "tsc -p tsconfig.cjs.json"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "leaflet": "^1.9.4",
     "rbush": "^4.0.1"
   },
@@ -23,7 +24,7 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./src/sl-utils-map.d.ts",
-      "import": "./src/sl-utils-map.js"
+      "import": "./src/sl-utils-map.ts"
     }
   },
   "repository": {

package/src/leaflet/index.ts

@@ -0,0 +1,2 @@
+export * from "./leaflet-tilelayer-wmts";
+export * from "./slu-leaflet-net-map";

package/src/leaflet/leaflet-tilelayer-wmts.ts

@@ -0,0 +1,98 @@
+export function LeafletTilelayersWMTS(L: any) {
+    const LeafletTileLayerWMTS = L.TileLayer.extend({
+        defaultWmtsParams: {
+            service: 'wmts',
+            request: 'gettile',
+            version: '1.0.0',
+            layer: 'default',
+            style: 'default',
+            tilematrixset: 'basicsearoad',
+            // format: 'image/png'
+            // service: "WMTS",
+            // request: "GetTile",
+            // version: "1.0.0",
+            // layer: "",
+            // style: "default",
+            // tileMatrixSet: "",
+            // format: "image/jpeg",
+        },
+
+        initialize: function (url:any, options:any) { // (String, Object)
+            this._url = url;
+            var lOptions: any = {};
+            var cOptions = Object.keys(options);
+            cOptions.forEach(element => {
+                lOptions[element.toLowerCase()] = options[element];
+            });
+            var wmtsParams = L.extend({}, this.defaultWmtsParams);
+            var tileSize = lOptions.tileSize || this.options.tileSize;
+            if (lOptions.detectRetina && L.Browser.retina) {
+                wmtsParams.width = wmtsParams.height = tileSize * 2;
+            } else {
+                wmtsParams.width = wmtsParams.height = tileSize;
+            }
+            for (var i in lOptions) {
+                // all keys that are in defaultWmtsParams options go to WMTS params
+                if (wmtsParams.hasOwnProperty(i) && i != "matrixIds") {
+                    wmtsParams[i] = lOptions[i];
+                }
+            }
+            this.wmtsParams = wmtsParams;
+            this.matrixIds = options.matrixIds || this.getDefaultMatrix();
+            L.setOptions(this, options);
+        },
+
+        onAdd: function (map:any) {
+            this._crs = this.options.crs || map.options.crs;
+            L.TileLayer.prototype.onAdd.call(this, map);
+        },
+
+        getTileUrl: function (coords:any) { // (Point, Number) -> String
+            var tileSize = this.options.tileSize;
+            var nwPoint = coords.multiplyBy(tileSize);
+            nwPoint.x += 1;
+            nwPoint.y -= 1;
+            var sePoint = nwPoint.add(new L.Point(tileSize, tileSize));
+            var zoom = this._tileZoom;
+            var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
+            var se = this._crs.project(this._map.unproject(sePoint, zoom));
+            var tilewidth = se.x - nw.x;
+            var ident = this.matrixIds[zoom].identifier;
+            // var tilematrix =  this.wmtsParams.tilematrixset + ":" + ident;
+            var tilematrix = ident;
+            var X0 = this.matrixIds[zoom].topLeftCorner.lng;
+            var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
+            var tilecol = Math.floor((nw.x - X0) / tilewidth);
+            var tilerow = -Math.floor((nw.y - Y0) / tilewidth);
+            var url = L.Util.template(this._url, { s: this._getSubdomain(coords) });
+            return url + L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow + "&tilecol=" + tilecol;
+        },
+
+        setParams: function (params:any, noRedraw:any) {
+            L.extend(this.wmtsParams, params);
+            if (!noRedraw) {
+                this.redraw();
+            }
+            return this;
+        },
+
+        getDefaultMatrix: function () {
+            /**
+             * the matrix3857 represents the projection 
+             * for in the IGN WMTS for the google coordinates.
+             */
+            var matrixIds3857 = new Array(22);
+            for (var i = 0; i < 22; i++) {
+                matrixIds3857[i] = {
+                    identifier: "" + i,
+                    topLeftCorner: new L.LatLng(20037508.3428, -20037508.3428)
+                };
+            }
+            return matrixIds3857;
+        }
+    });
+
+    return function (url: string, options: any) {
+        return new LeafletTileLayerWMTS(url, options);
+    };
+}

package/src/leaflet/slu-leaflet-net-map.ts

@@ -0,0 +1,232 @@
+import * as L from "leaflet";
+import 'proj4leaflet';
+import { u_mapTogps84bd09, u_mapTogps84gcj02 } from "../utils/slu-map";
+'use strict';
+/**坐标转换关键代码(加载后GridLayer自行转换) */
+(function (window, document) {
+    L.GridLayer.include({
+        _setZoomTransform: function (level: any, _center: { lng: number, lat: number }, zoom: number) {
+            var center = _center;
+            if (center != undefined && this.options) {
+                if (this.options.corrdType == 'gcj02') {
+                    center = u_mapTogps84gcj02(_center.lng, _center.lat);
+                } else if (this.options.corrdType == 'bd09') {
+                    center = u_mapTogps84bd09(_center.lng, _center.lat);
+                }
+            }
+            var scale = this._map.getZoomScale(zoom, level.zoom),
+                translate = level.origin.multiplyBy(scale)
+                    .subtract(this._map._getNewPixelOrigin(center, zoom)).round();
+
+            if (L.Browser.any3d) {
+                L.DomUtil.setTransform(level.el, translate, scale);
+            } else {
+                L.DomUtil.setPosition(level.el, translate);
+            }
+        },
+        _getTiledPixelBounds: function (_center: { lng: number, lat: number }) {
+            var center = _center;
+            if (center != undefined && this.options) {
+                if (this.options.corrdType == 'gcj02') {
+                    center = u_mapTogps84gcj02(_center.lng, _center.lat);
+                } else if (this.options.corrdType == 'bd09') {
+                    center = u_mapTogps84bd09(_center.lng, _center.lat);
+                }
+            }
+            var map = this._map,
+                mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(),
+                scale = map.getZoomScale(mapZoom, this._tileZoom),
+                pixelCenter = map.project(center, this._tileZoom).floor(),
+                halfSize = map.getSize().divideBy(scale * 2);
+            return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize));
+        }
+    })
+}(this, document))
+/**地图的名称
+ * tianDiTu 天地图 gaoDe 高德 baiDu 百度 google 谷歌 
+ * Normal 矢量地图 Satellite 卫星图
+ * Map地图 Annotion地名
+ */
+export enum SLEMap {
+    tianDiTuNormalMap = 'TianDiTu.Normal.Map',
+    tianDiTuNormalAnnotion = 'TianDiTu.Normal.Annotion',
+    tianDiTuSatelliteMap = 'TianDiTu.Satellite.Map',
+    tianDiTuSatelliteAnnotion = 'TianDiTu.Satellite.Annotion',
+    tianDiTuTerrainMap = 'TianDiTu.Terrain.Map',
+    tianDiTuTerrainAnnotion = 'TianDiTu.Terrain.Annotion',
+    /**gaoDe 高德*/
+    gaoDeNormalMap = 'GaoDe.Normal.Map',
+    gaoDeSatelliteMap = 'GaoDe.Satellite.Map',
+    gaoDeSatelliteAnnotion = 'GaoDe.Satellite.Annotion',
+    /**百度 */
+    baiDuNormalMap = 'Baidu.Normal.Map',
+    baiDuSatelliteMap = 'Baidu.Satellite.Map',
+    baiDuSatelliteAnnotion = 'Baidu.Satellite.Annotion',
+    /**谷歌 */
+    googleNormalMap = 'Google.Normal.Map',
+    googleSatelliteMap = 'Google.Satellite.Map',
+    googleSatelliteAnnotion = 'Google.Satellite.Annotion',
+
+    geoqNormalMap = 'Geoq.Normal.Map',
+    geoqNormalPurplishBlue = 'Geoq.Normal.PurplishBlue',
+    geoqNormalGray = 'Geoq.Normal.Gray',
+    geoqNormalWarm = 'Geoq.Normal.Warm',
+    geoqThemeHydro = 'Geoq.Theme.Hydro',
+
+    oSMNormalMap = 'OSM.Normal.Map',
+}
+/**网络地图图层配置项 */
+export interface SLPMapLeafletLayer extends L.TileLayerOptions {
+    /**个人地图凭证token */
+    key?: string;
+    /**地图采用的坐标系信息(根据地图名称自动匹配) */
+    corrdType?: string;
+}
+/**加载网络地图 并通过坐标转换使瓦片偏移解决地图偏移问题 
+ * @param name 网络地图名称SLEMap
+ * @param options 地图配置
+ */
+export class SLULeafletNetMap {
+    constructor(name: SLEMap, options?: SLPMapLeafletLayer) {
+        this.setMapProvider(name, options);
+    }
+    private map!: L.Map;
+    /**地图图层 */
+    private mapLayer!: L.Layer;
+    /**将图层添加到map显示在页面 */
+    public addTo(map: L.Map) {
+        if (!map) return this;
+        this.map = map;
+        this.mapLayer?.addTo(this.map)
+        return this;
+    }
+    /**从map中移除当前图层 */
+    public remove() {
+        this.mapLayer?.remove();
+        return this;
+    }
+    /**变更当前图层并添加到map中 */
+    public changeMap(name: SLEMap, options?: SLPMapLeafletLayer) {
+        this.remove();
+        this.setMapProvider(name, options);
+        this.addTo(this.map);
+        return this;
+    }
+    /**设置map的地图来源，名称，类型 */
+    private setMapProvider(name: SLEMap, options?: SLPMapLeafletLayer) { // (type, Object)
+        options = options || {}
+        let parts = name.split('.'), mapSource = parts[0], mapName = parts[1], mapType = parts[2];
+        let url = MAPINFO[mapSource][mapName][mapType];
+        options.subdomains = MAPINFO[mapSource].Subdomains;
+        options.key = options.key || MAPINFO[mapSource].key;
+        options.corrdType = this.getCorrdType(mapSource);
+        if ('tms' in MAPINFO[mapSource]) {
+            options.tms = MAPINFO[mapSource]['tms']
+        }
+        this.mapLayer = new L.TileLayer(url, options);
+    }
+    /**获取坐标转换类型*/
+    private getCorrdType(name: string) {
+        var zbName = "wgs84"
+        switch (name) {
+            case "Geoq":
+            case "GaoDe":
+            case "Google":
+                zbName = "gcj02";
+                break;
+            case "Baidu":
+                zbName = "bd09";
+                break;
+            case "OSM":
+            case "TianDiTu":
+                zbName = "wgs84";
+                break;
+        }
+        return zbName;
+    }
+}
+/**地图信息 S子域 X经度 Y纬度 Z层级 */
+const MAPINFO: any = {
+    TianDiTu: {
+        Normal: {
+            Map: "//t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "//t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}",
+            AnnotionEn: "//t{s}.tianditu.com/DataServer?T=eva_w&X={x}&Y={y}&L={z}&tk={key}"
+        },
+        Satellite: {
+            Map: "//t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "//t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
+        },
+        Terrain: {
+            Map: "//t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "//t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
+        },
+        // Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        Subdomains: ['1'],
+        key: "a9e2dd65c94fab979c9d897ff7098a4c"
+    },
+    GaoDe: {
+        Normal: {
+            Map: '//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        },
+        Satellite: {
+            Map: '//webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+            Annotion: '//webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
+        },
+        Subdomains: ["1", "2", "3", "4"]
+    },
+    Google: {
+        Normal: {
+            Map: "//www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
+        },
+        Satellite: {
+            Map: "//www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
+            Annotion: "//www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
+        },
+        Subdomains: []
+    },
+    Geoq: {
+        Normal: {
+            Map: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
+            PurplishBlue: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+            Gray: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
+            Warm: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
+        },
+        Theme: {
+            Hydro: "//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
+        },
+        Subdomains: []
+    },
+    OSM: {
+        Normal: {
+            Map: "//{s}.tile.osm.org/{z}/{x}/{y}.png",
+        },
+        Subdomains: ['a', 'b', 'c']
+    },
+    Baidu: {
+        Normal: {
+            Map: '//online{s}.map.bdimg.com/onlinelabel/qt=tile&x={x}&y={y}&z={z}'
+        },
+        Satellite: {
+            Map: '//online{s}.map.bdimg.com/starpic/?qt=satepc&u=x={x}&y={y}&z={z};v=009;type=sate&fm=46&app=webearth2&v=009&udt=20231212',
+            Annotion: '//online{s}.map.bdimg.com/starpic/?qt=satepc&u=x={x}&y={y}&z={z};v=009;type=sate&fm=46&app=webearth2&v=009&udt=20231212'
+        },
+        Subdomains: '0123456789',
+        tms: true
+    }
+}
+export const SLCRS = {
+    "Baidu": new (L as any).Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
+        resolutions: function () {
+            let level = 18
+            let res: number[] = [];
+            res[0] = Math.pow(2, 18);
+            for (var i = 1; i < level; i++) {
+                res[i] = Math.pow(2, (18 - i))
+            }
+            return res;
+        }(),
+        origin: [0, 0],
+        bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
+    })
+}

package/src/sl-utils-map.ts

@@ -1 +1,127 @@
-export { MapCanvasDraw } from './map/canvas-draw'
+export { MapCanvasDraw } from './map/canvas-draw'
+import { CRS, Map, latLng } from "leaflet";
+import * as AMapLoader from '@amap/amap-jsapi-loader';
+import { SLCRS, SLEMap, SLULeafletNetMap } from './leaflet';
+declare var AMap: any;
+
+export class SLUMap {
+    constructor(ele: string)
+    constructor(ele: string)
+    constructor(ele: string, options: Partial<SLSMapOpt> = {}) {
+        this.createMap(ele, options)
+    }
+
+    private map: L.Map | AMAP.Map;
+    /**当前正在显示的网络图层 */
+    private curs: Partial<{ [key in SLEMap]: SLULeafletNetMap | undefined }> = Object.create(null);
+
+    /**显示指定的网络图层 */
+    public showMap(names: Array<SLEMap> = []): this {
+        const { map, curs } = this;
+        if (map && map instanceof Map) {
+            let mapSource: string = names[0].split('.')[0]
+            let center = map.getCenter();
+            let zoom = map.getZoom();
+            map.options.crs = mapSource === 'Baidu' ? SLCRS.Baidu : CRS.EPSG3857; // 根据图层坐标系设置
+            (map as any)._resetView(center, zoom, true);
+            names?.forEach(name => {
+                if (curs[name]) return;
+                let net = new SLULeafletNetMap(name)
+                net.addTo(map);
+                curs[name] = net;
+            });
+            for (const key in curs) {
+                let name:SLEMap = key as SLEMap;
+                let flag = names.includes(name);
+                if (flag) continue;
+                curs[name].remove();
+                Reflect.deleteProperty(curs, key)
+            }
+        }
+        return this
+    }
+    private async createMap(ele: string, options: Partial<SLSMapOpt>) {
+        const { type } = options;
+        let map: L.Map | AMAP.Map;
+        switch (type) {
+            case "A": this.map = await this.initAmap(ele, options); break;
+            default: this.map = await this.initLeaflet(ele, options);
+                this.showMap([SLEMap.tianDiTuNormalMap, SLEMap.tianDiTuNormalAnnotion]);
+                break;
+        }
+    }
+    /**---------------leaflet地图的相关方法------------------- */
+    private initLeaflet(ele: string, opt: Partial<SLSMapOpt>) {
+        const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false } = opt;
+        let param: L.MapOptions = {
+            dragging,
+            zoomControl,
+            zoom,
+            minZoom,
+            maxZoom,
+            center: latLng(lat, lng),
+            attributionControl,
+            doubleClickZoom,
+            crs: CRS.EPSG3857,
+            closePopupOnClick,//点击地图不关闭弹出层
+        };
+        let map = new Map(ele, param);
+        return Promise.resolve(map)
+    }
+    /**---------------高德地图的相关方法------------------- */
+    private async initAmap(ele: string, opt: Partial<SLSMapOpt>) {
+        const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false, showLabel = true } = opt;
+        return AMapLoader.load({
+            "key": "87e1b1e9aa88724f69208972546fdd57",   // 申请好的Web端开发者Key，首次调用 load 时必填
+            "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+            "plugins": ["Map3D"]  //插件列表
+        }).then(() => {
+            // initAMapUI();
+            let map = new AMap.Map(ele, {
+                // mask: mask,
+                center: [lng, lat],
+                disableSocket: true,
+                viewMode: '2D',
+                mapStyle: 'amap://styles/dfd45346264e1fa2bb3b796f36cab42a',
+                skyColor: "#A3CCFF",
+                lang: 'zh_cn',  //设置地图语言类型
+                labelzIndex: 130,
+                pitch: 40,
+                zoom: zoom,
+                zooms: [minZoom, maxZoom],
+                dragEnable: dragging,
+                doubleClickZoom: doubleClickZoom,
+                keyboardEnable: false,
+                isHotspot: false,
+                showLabel,
+                layers: [],
+            });
+            return map;
+        })
+    }
+}
+
+interface SLSMapOpt {
+    /**地图的类型 @param L leaflet插件 @param A 高德地图 @param B 百度地图  @default L*/
+    type: 'L' | 'A' | 'B',
+    /**地图中心点 [lat,lng] @default [22.68471,114.12027] */
+    center: [number, number],
+    /**地图初始层级 @default 11*/
+    zoom: number,
+    /**最小层级 @default 2*/
+    minZoom: number,
+    /**最大层级 @default 20*/
+    maxZoom: number,
+    /**拖拽功能 @default true */
+    dragging: boolean,
+    /**显示层级控制器 @default false */
+    zoomControl: boolean,
+    /**显示属性控制器 @default false */
+    attributionControl: boolean,
+    /**双击放大层级 @default false */
+    doubleClickZoom: boolean,
+    /**点击关闭弹窗 @default false */
+    closePopupOnClick: boolean,
+    /**显示标签(省会、地名等) @param AMap @default true  */
+    showLabel: boolean,
+}