From 282f3a97294f2a91ae1363272c31eca26952dc02 Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Thu, 9 Nov 2023 17:52:07 +0800 Subject: [PATCH] Chore maplibre (#2013) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: map version * docs: 添加 maplibre demo --- .../core/src/services/layer/ILayerService.ts | 1 - packages/layers/src/core/BaseLayer.ts | 36 --- packages/layers/src/geometry/models/plane.ts | 3 +- packages/layers/src/geometry/models/sprite.ts | 3 +- .../layers/src/plugins/DataMappingPlugin.ts | 7 +- packages/layers/src/polygon/models/ocean.ts | 3 +- packages/layers/src/polygon/models/water.ts | 3 +- packages/layers/src/utils/layerData.ts | 224 ------------------ packages/maps/src/amap/map.ts | 3 +- packages/maps/src/amap2/map.ts | 3 +- packages/maps/src/earth/map.ts | 3 +- packages/maps/src/index.ts | 4 +- packages/maps/src/map/map.ts | 6 +- packages/maps/src/mapbox/map.ts | 3 +- packages/maps/src/maplibre/map.ts | 5 +- packages/maps/src/utils/BaseMapService.ts | 5 +- .../maps/src/utils/amap/AMapBaseService.ts | 5 +- packages/maps/src/version.ts | 11 - packages/site/examples/map/map/demo/mapbox.js | 51 ++++ .../site/examples/map/map/demo/maplibre.js | 53 +++++ packages/site/examples/map/map/demo/meta.json | 12 + packages/utils/__tests__/lineAtOffset.spec.ts | 16 +- packages/utils/src/index.ts | 1 + packages/utils/src/interface/map.ts | 2 +- packages/utils/src/lineAtOffset/arc.ts | 8 +- .../utils/src/lineAtOffset/greatCircle.ts | 4 +- packages/utils/src/lineAtOffset/interface.ts | 4 +- 27 files changed, 157 insertions(+), 322 deletions(-) delete mode 100644 packages/layers/src/utils/layerData.ts delete mode 100644 packages/maps/src/version.ts create mode 100644 packages/site/examples/map/map/demo/mapbox.js diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index ad65e0eed3..19084f3785 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -104,7 +104,6 @@ export interface ILayerModel { // earth mode setEarthTime?(time: number): void; - createModelData?(options?: any): any; } export interface ILayerAttributesOption { diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 4206870154..42f8539b48 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -62,7 +62,6 @@ import { encodePickingColor, lodashUtil } from '@antv/l7-utils'; import { EventEmitter } from 'eventemitter3'; import { Container } from 'inversify'; import { BlendTypes } from '../utils/blend'; -import { calculateData } from '../utils/layerData'; import { createMultiPassRenderer, normalizePasses, @@ -497,45 +496,10 @@ export default class BaseLayer } } - public createModelData(data: any, option?: ISourceCFG) { - if (this.layerModel?.createModelData) { - // 在某些特殊图层中单独构建 attribute & elements - return this.layerModel.createModelData(option); - } - const calEncodeData = this.calculateEncodeData(data, option); - const triangulation = this.triangulation; - if (calEncodeData && triangulation) { - return this.styleAttributeService.createAttributesAndIndices( - calEncodeData, - triangulation, - ); - } else { - return { - attributes: undefined, - elements: undefined, - }; - } - } public setLayerPickService(layerPickService: ILayerPickService): void { this.layerPickService = layerPickService; } - - public calculateEncodeData(data: any, option?: ISourceCFG) { - if (this.inited) { - return calculateData( - this, - this.fontService, - this.mapService, - this.styleAttributeService, - data, - option, - ); - } else { - console.warn('layer not inited!'); - return null; - } - } /** * Model初始化前需要更新Model样式 */ diff --git a/packages/layers/src/geometry/models/plane.ts b/packages/layers/src/geometry/models/plane.ts index c12fd7d5b8..17beecbc45 100644 --- a/packages/layers/src/geometry/models/plane.ts +++ b/packages/layers/src/geometry/models/plane.ts @@ -7,7 +7,6 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { Version } from '@antv/l7-maps'; // import { mat4, vec3 } from 'gl-matrix'; import BaseModel from '../../core/BaseModel'; import { IGeometryLayerStyleOptions } from '../../core/interface'; @@ -49,7 +48,7 @@ export default class PlaneModel extends BaseModel { for (let ix = 0; ix < gridX1; ix++) { const x = ix * segmentWidth - widthHalf; - if (this.mapService.version === Version['GAODE2.x']) { + if (this.mapService.version === 'GAODE2.x') { // @ts-ignore const [a, b] = this.mapService.lngLatToCoord([x + lng, -y + lat]) as [ number, diff --git a/packages/layers/src/geometry/models/sprite.ts b/packages/layers/src/geometry/models/sprite.ts index bde579616f..abee8f3c5d 100644 --- a/packages/layers/src/geometry/models/sprite.ts +++ b/packages/layers/src/geometry/models/sprite.ts @@ -1,5 +1,4 @@ import { gl, IModel, IModelUniform, ITexture2D } from '@antv/l7-core'; -import { Version } from '@antv/l7-maps'; import BaseModel from '../../core/BaseModel'; import { IGeometryLayerStyleOptions } from '../../core/interface'; @@ -42,7 +41,7 @@ export default class SpriteModel extends BaseModel { const randomY = radius * Math.random(); const x = -radius / 2 + randomX; const y = -radius / 2 + randomY; - if (mapService.version === Version['GAODE2.x']) { + if (mapService.version === 'GAODE2.x') { // @ts-ignore const [a, b] = mapService.lngLatToCoord([x + lng, -y + lat]) as [ number, diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 2df309bade..cc244f891e 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -12,7 +12,6 @@ import { Position, TYPES, } from '@antv/l7-core'; -import { Version } from '@antv/l7-maps'; import { lodashUtil, normalize, rgb2arr } from '@antv/l7-utils'; import { inject, injectable } from 'inversify'; import 'reflect-metadata'; @@ -205,7 +204,7 @@ export default class DataMappingPlugin implements ILayerPlugin { // 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移 if ( mappedData.length > 0 && - this.mapService.version === Version['GAODE2.x'] + this.mapService.version === 'GAODE2.x' ) { const layerCenter = layer.coordCenter || layer.getSource().center; // 单个的点数据 @@ -214,7 +213,7 @@ export default class DataMappingPlugin implements ILayerPlugin { // TODO: 避免经纬度被重复计算导致坐标位置偏移 .filter((d) => !d.originCoordinates) .map((d) => { - d.version = Version['GAODE2.x']; + d.version = 'GAODE2.x'; // @ts-ignore d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据） // @ts-ignore @@ -228,7 +227,7 @@ export default class DataMappingPlugin implements ILayerPlugin { } private adjustData2SimpleCoordinates(mappedData: IEncodeFeature[]) { - if (mappedData.length > 0 && this.mapService.version === Version.SIMPLE) { + if (mappedData.length > 0 && this.mapService.version === 'SIMPLE') { mappedData.map((d) => { if (!d.simpleCoordinate) { d.coordinates = this.unProjectCoordinates(d.coordinates); diff --git a/packages/layers/src/polygon/models/ocean.ts b/packages/layers/src/polygon/models/ocean.ts index d5e13965c6..069f3ab97c 100644 --- a/packages/layers/src/polygon/models/ocean.ts +++ b/packages/layers/src/polygon/models/ocean.ts @@ -6,7 +6,6 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { Version } from '@antv/l7-maps'; import { lodashUtil, rgb2arr } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IPolygonLayerStyleOptions } from '../../core/interface'; @@ -89,7 +88,7 @@ export default class OceanModel extends BaseModel { attributeIdx: number, ) => { const v = - feature.version === Version['GAODE2.x'] + feature.version === 'GAODE2.x' ? feature.originCoordinates[0][attributeIdx] : vertex; const [lng, lat] = v; diff --git a/packages/layers/src/polygon/models/water.ts b/packages/layers/src/polygon/models/water.ts index 456b8b3119..a0c46902d9 100644 --- a/packages/layers/src/polygon/models/water.ts +++ b/packages/layers/src/polygon/models/water.ts @@ -6,7 +6,6 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { Version } from '@antv/l7-maps'; import { lodashUtil } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IPolygonLayerStyleOptions } from '../../core/interface'; @@ -78,7 +77,7 @@ export default class WaterModel extends BaseModel { attributeIdx: number, ) => { const v = - feature.version === Version['GAODE2.x'] + feature.version === 'GAODE2.x' ? feature.originCoordinates[0][attributeIdx] : vertex; const [lng, lat] = v; diff --git a/packages/layers/src/utils/layerData.ts b/packages/layers/src/utils/layerData.ts deleted file mode 100644 index fa3ba974b3..0000000000 --- a/packages/layers/src/utils/layerData.ts +++ /dev/null @@ -1,224 +0,0 @@ -import { - IEncodeFeature, - IFontService, - ILayer, - IMapService, - IParseDataItem, - ISourceCFG, - IStyleAttribute, - IStyleAttributeService, - Position, -} from '@antv/l7-core'; -import { Version } from '@antv/l7-maps'; -import Source from '@antv/l7-source'; -import { lodashUtil, normalize, rgb2arr } from '@antv/l7-utils'; -import { ILineLayerStyleOptions } from '../core/interface'; -const { cloneDeep } = lodashUtil; -function getArrowPoints(p1: Position, p2: Position) { - const dir = [p2[0] - p1[0], p2[1] - p1[1]]; - const normalizeDir = normalize(dir); - const arrowPoint = [ - p1[0] + normalizeDir[0] * 0.0001, - p1[1] + normalizeDir[1] * 0.0001, - ]; - return arrowPoint; -} - -function adjustData2Amap2Coordinates( - mappedData: IEncodeFeature[], - mapService: IMapService, - layer: ILayer, -) { - // 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移 - if (mappedData.length > 0 && mapService.version === Version['GAODE2.x']) { - const layerCenter = layer.coordCenter; - if (typeof mappedData[0].coordinates[0] === 'number') { - // 单个的点数据 - // @ts-ignore - mappedData - // 避免经纬度被重复计算导致坐标位置偏移 - .filter((d) => !d.originCoordinates) - .map((d) => { - d.version = Version['GAODE2.x']; - // @ts-ignore - d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据） - // @ts-ignore - // d.coordinates = mapService.lngLatToCoord(d.coordinates); - d.coordinates = mapService.coordToAMap2RelativeCoordinates( - d.coordinates, - layerCenter, - ); - }); - } else { - // 连续的线、面数据 - // @ts-ignore - mappedData - // 避免经纬度被重复计算导致坐标位置偏移 - .filter((d) => !d.originCoordinates) - .map((d) => { - d.version = Version['GAODE2.x']; - // @ts-ignore - d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据） - // @ts-ignore - // d.coordinates = mapService.lngLatToCoords(d.coordinates); - d.coordinates = mapService.coordToAMap2RelativeCoordinates( - d.coordinates, - layerCenter, - ); - }); - } - } -} - -function adjustData2SimpleCoordinates( - mappedData: IEncodeFeature[], - mapService: IMapService, -) { - if (mappedData.length > 0 && mapService.version === Version.SIMPLE) { - mappedData.map((d) => { - if (!d.simpleCoordinate) { - d.coordinates = unProjectCoordinates(d.coordinates, mapService); - d.simpleCoordinate = true; - } - }); - } -} - -function unProjectCoordinates(coordinates: any, mapService: IMapService) { - if (typeof coordinates[0] === 'number') { - return mapService.simpleMapCoord.unproject(coordinates as [number, number]); - } - - if (coordinates[0] && coordinates[0][0] instanceof Array) { - // @ts-ignore - const coords = []; - coordinates.map((coord: any) => { - // @ts-ignore - const c1 = []; - coord.map((co: any) => { - c1.push(mapService.simpleMapCoord.unproject(co as [number, number])); - }); - // @ts-ignore - coords.push(c1); - }); - // @ts-ignore - return coords; - } else { - // @ts-ignore - const coords = []; - // @ts-ignore - coordinates.map((coord) => { - coords.push( - mapService.simpleMapCoord.unproject(coord as [number, number]), - ); - }); - // @ts-ignore - return coords; - } -} - -function applyAttributeMapping( - attribute: IStyleAttribute, - record: { [key: string]: unknown }, -) { - if (!attribute.scale) { - return []; - } - const scalers = attribute?.scale?.scalers || []; - const params: unknown[] = []; - - scalers.forEach(({ field }) => { - if (record.hasOwnProperty(field) || attribute.scale?.type === 'variable') { - // TODO:多字段，常量 - params.push(record[field]); - } - }); - - const mappingResult = attribute.mapping ? attribute.mapping(params) : []; - - return mappingResult; -} - -function mapping( - attributes: IStyleAttribute[], - data: IParseDataItem[], - fontService: IFontService, - mapService: IMapService, - layer?: ILayer, -): IEncodeFeature[] { - const { - arrow = { - enable: false, - }, - } = layer?.getLayerConfig() as ILineLayerStyleOptions; - const mappedData = data.map((record: IParseDataItem) => { - const encodeRecord: IEncodeFeature = { - id: record._id, - coordinates: record.coordinates, - }; - - attributes - .filter((attribute) => attribute.scale !== undefined) - .forEach((attribute: IStyleAttribute) => { - let values = applyAttributeMapping(attribute, record); - - attribute.needRemapping = false; - - // TODO: 支持每个属性配置 postprocess - if (attribute.name === 'color') { - values = values.map((c: unknown) => { - return rgb2arr(c as string); - }); - } - // @ts-ignore - encodeRecord[attribute.name] = - Array.isArray(values) && values.length === 1 ? values[0] : values; - - // 增加对 layer/text/iconfont unicode 映射的解析 - if (attribute.name === 'shape') { - encodeRecord.shape = fontService.getIconFontKey( - encodeRecord[attribute.name] as string, - ); - } - }); - - if (encodeRecord.shape === 'line' && arrow.enable) { - // 只有在线图层且支持配置箭头的时候进行插入顶点的处理 - const coords = encodeRecord.coordinates as Position[]; - const arrowPoint = getArrowPoints(coords[0], coords[1]); - encodeRecord.coordinates.splice(1, 0, arrowPoint, arrowPoint); - } - return encodeRecord; - }) as IEncodeFeature[]; - // 调整数据兼容 Amap2.0 - adjustData2Amap2Coordinates(mappedData, mapService, layer as ILayer); - - // 调整数据兼容 SimpleCoordinates - adjustData2SimpleCoordinates(mappedData, mapService); - - return mappedData; -} - -export function calculateData( - layer: ILayer, - fontService: IFontService, - mapService: IMapService, - styleAttributeService: IStyleAttributeService, - data: any, - options: ISourceCFG | undefined, -): IEncodeFeature[] { - const source = new Source(data, options); - const attributes = styleAttributeService.getLayerStyleAttributes() || []; - const { dataArray } = source.data; - const filterData = dataArray; - - const mappedEncodeData = mapping( - attributes, - filterData, - fontService, - mapService, - layer, - ); - source.destroy(); - return mappedEncodeData; -} diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index d88a915f92..ac021dbe4a 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -14,7 +14,6 @@ import 'reflect-metadata'; import { IAMapEvent, IAMapInstance } from '../../typings/index'; import AMapBaseService from '../utils/amap/AMapBaseService'; import AMapLoader from '../utils/amaploader'; -import { Version } from '../version'; import Viewport from './Viewport'; // @ts-ignore window.forceWebGL = true; @@ -40,7 +39,7 @@ export default class AMapService extends AMapBaseService implements IMapService { - public version: string = Version['GAODE1.x']; + public version: string = 'GAODE1.x'; protected viewport: IViewport; public getModelMatrix( diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index 5e3f73342e..968566d900 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -17,7 +17,6 @@ import { injectable } from 'inversify'; import 'reflect-metadata'; import { IAMapInstance } from '../../typings/index'; import AMapBaseService from '../utils/amap/AMapBaseService'; -import { Version } from '../version'; import Viewport from './Viewport'; import './logo.css'; const DEFAULTMAPCENTER = [108.92361, 34.54083]; @@ -42,7 +41,7 @@ const pendingResolveQueue: Array<() => void> = []; */ @injectable() export default class AMapService extends AMapBaseService { - public version: string = Version['GAODE2.x']; + public version: string = 'GAODE2.x'; /** * 用于 customCooords 数据的计算 diff --git a/packages/maps/src/earth/map.ts b/packages/maps/src/earth/map.ts index d8a0e7e6f8..d03a0b5e46 100644 --- a/packages/maps/src/earth/map.ts +++ b/packages/maps/src/earth/map.ts @@ -13,7 +13,6 @@ import { EarthMap, Map } from '@antv/l7-map'; import { injectable } from 'inversify'; import 'reflect-metadata'; import BaseMapService from '../utils/BaseMapService'; -import { Version } from '../version'; import Viewport from './Viewport'; const EventMap: { [key: string]: any; @@ -48,7 +47,7 @@ export default class L7EarthService ): number[] { throw new Error('Method not implemented.'); } - public version: string = Version.GLOBEL; + public version: string = 'GLOBEL'; // TODO: 判断地图是否正在拖拽 public dragging: boolean = false; public viewport: Viewport; diff --git a/packages/maps/src/index.ts b/packages/maps/src/index.ts index 180171b6a9..ad6b9f50e2 100644 --- a/packages/maps/src/index.ts +++ b/packages/maps/src/index.ts @@ -1,12 +1,12 @@ import GaodeMapV1 from './amap/'; import { default as GaodeMap, default as GaodeMapV2 } from './amap2/'; +import { MapType } from '@antv/l7-utils' import BaiduMap from './bmap/'; import Earth from './earth/'; import Map from './map/'; import Mapbox from './mapbox/'; import MapLibre from './maplibre'; import TencentMap from './tmap'; -import { Version } from './version'; export * from './utils'; export { BaiduMap, @@ -18,5 +18,5 @@ export { MapLibre, Mapbox, TencentMap, - Version, + MapType, }; diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts index 965e539873..b04d217562 100644 --- a/packages/maps/src/map/map.ts +++ b/packages/maps/src/map/map.ts @@ -9,7 +9,7 @@ import { injectable } from 'inversify'; import 'reflect-metadata'; import BaseMapService from '../utils/BaseMapService'; import Viewport from '../utils/Viewport'; -import { Version } from '../version'; +import { MapType } from '@antv/l7-utils'; const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; /** @@ -17,7 +17,7 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; */ @injectable() export default class DefaultMapService extends BaseMapService { - public version: string = Version.DEFUALT; + public version: string = MapType.DEFAULT; /** * 将经纬度转成墨卡托坐标 * @param lnglat @@ -99,7 +99,7 @@ export default class DefaultMapService extends BaseMapService { this.version = version; this.simpleMapCoord.setSize(mapSize); - if (version === Version.SIMPLE && rest.center) { + if (version === 'SIMPLE' && rest.center) { rest.center = this.simpleMapCoord.unproject( rest.center as [number, number], ); diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index 161229669d..d1b7f4c5ef 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -10,7 +10,6 @@ import 'mapbox-gl/dist/mapbox-gl.css'; import 'reflect-metadata'; import { IMapboxInstance } from '../../typings/index'; import BaseMapService from '../utils/BaseMapService'; -import { Version } from '../version'; import Viewport from './Viewport'; window.mapboxgl = mapboxgl; @@ -24,7 +23,7 @@ const MAPBOX_API_KEY = export default class MapboxService extends BaseMapService< Map & IMapboxInstance > { - public version: string = Version.MAPBOX; + public version: string = 'MAPBOX'; // get mapStatus method public viewport: Viewport; diff --git a/packages/maps/src/maplibre/map.ts b/packages/maps/src/maplibre/map.ts index 4d25abd62c..a6fa1ea557 100644 --- a/packages/maps/src/maplibre/map.ts +++ b/packages/maps/src/maplibre/map.ts @@ -5,13 +5,14 @@ import { IMercator } from '@antv/l7-core'; import { mat4, vec3 } from 'gl-matrix'; import { injectable } from 'inversify'; import maplibregl, { Map } from 'maplibre-gl'; +import { MapType } from '@antv/l7-utils' // tslint:disable-next-line:no-submodule-imports import 'maplibre-gl/dist/maplibre-gl.css'; import 'reflect-metadata'; import { IMapboxInstance } from '../../typings/index'; import Viewport from '../mapbox/Viewport'; import BaseMapService from '../utils/BaseMapService'; -import { Version } from '../version'; + // @ts-ignore window.maplibregl = maplibregl; @@ -21,7 +22,7 @@ let mapdivCount = 0; */ @injectable() export default class Service extends BaseMapService { - public version: string = Version.MAPBOX; + public version: string = MapType.MAPBOX; // get mapStatus method public viewport: Viewport; diff --git a/packages/maps/src/utils/BaseMapService.ts b/packages/maps/src/utils/BaseMapService.ts index 274f8b74f0..1615222ccd 100644 --- a/packages/maps/src/utils/BaseMapService.ts +++ b/packages/maps/src/utils/BaseMapService.ts @@ -23,7 +23,6 @@ import { Map } from '@antv/l7-map'; import { DOM } from '@antv/l7-utils'; import { inject, injectable } from 'inversify'; import 'reflect-metadata'; -import { Version } from '../version'; import { ISimpleMapCoord, SimpleMapCoord } from './simpleMapCoord'; import { MapTheme } from './theme'; const EventMap: { @@ -43,7 +42,7 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; export default abstract class BaseMapService implements IMapService { - public version: string = Version.DEFUALT; + public version: string = 'DEFAUlTMAP'; public map: Map & T; public simpleMapCoord: ISimpleMapCoord = new SimpleMapCoord(); // 背景色 @@ -106,7 +105,7 @@ export default abstract class BaseMapService } public getSize(): [number, number] { - if (this.version === Version.SIMPLE) { + if (this.version === 'SIMPLE') { return this.simpleMapCoord.getSize(); } const size = this.map.transform; diff --git a/packages/maps/src/utils/amap/AMapBaseService.ts b/packages/maps/src/utils/amap/AMapBaseService.ts index f6f232dc88..36b13a92fe 100644 --- a/packages/maps/src/utils/amap/AMapBaseService.ts +++ b/packages/maps/src/utils/amap/AMapBaseService.ts @@ -21,12 +21,11 @@ import { MapStyleName, TYPES, } from '@antv/l7-core'; -import { DOM } from '@antv/l7-utils'; +import { DOM,MapType } from '@antv/l7-utils'; import { mat4, vec3 } from 'gl-matrix'; import { inject, injectable } from 'inversify'; import 'reflect-metadata'; import { IAMapEvent, IAMapInstance } from '../../../typings/index'; -import { Version } from '../../version'; import Viewport from '../Viewport'; import { ISimpleMapCoord, SimpleMapCoord } from '../simpleMapCoord'; import { toPaddingOptions } from '../utils'; @@ -79,7 +78,7 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; // 暂时关闭 fix 统一不同坐标 export default abstract class AMapBaseService implements IMapService { - public version: string = Version['GAODE1.x']; + public version: string = MapType['GAODE1.x']; public simpleMapCoord: ISimpleMapCoord = new SimpleMapCoord(); /** * 原始地图实例 diff --git a/packages/maps/src/version.ts b/packages/maps/src/version.ts deleted file mode 100644 index bfa918a58d..0000000000 --- a/packages/maps/src/version.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * 当前 L7 内部存在的地图版本 - */ -export enum Version { - 'GAODE1.x' = 'GAODE1.x', - 'GAODE2.x' = 'GAODE2.x', - 'MAPBOX' = 'MAPBOX', - 'DEFUALT' = 'DEFUALTMAP', - 'SIMPLE' = 'SIMPLE', - 'GLOBEL' = 'GLOBEL', -} diff --git a/packages/site/examples/map/map/demo/mapbox.js b/packages/site/examples/map/map/demo/mapbox.js new file mode 100644 index 0000000000..0d74841155 --- /dev/null +++ b/packages/site/examples/map/map/demo/mapbox.js @@ -0,0 +1,51 @@ +import { Scene, PointLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +function initMap() { + const scene = new Scene({ + id: 'map', + map: new Mapbox({ + zoom: 10, + minZoom: 0, + maxZoom: 18, + token:"pk.eyJ1Ijoic2tvcm5vdXMiLCJhIjoiY2s4dDBkNjY1MG13ZTNzcWEyZDYycGkzMyJ9.tjfwvJ8G_VDmXoClOyxufg", + }) + }); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + ) + .then(res => res.json()) + .then(data => { + const pointLayer = new PointLayer({ + autoFit: true + }) + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('name', [ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica' + ]) + .size('unit_price', [10, 25]) + .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']) + .style({ + opacity: 1, + strokeWidth: 2 + }); + scene.addLayer(pointLayer); + }); + }); +} +initMap(); diff --git a/packages/site/examples/map/map/demo/maplibre.js b/packages/site/examples/map/map/demo/maplibre.js index e69de29bb2..0c57b99745 100644 --- a/packages/site/examples/map/map/demo/maplibre.js +++ b/packages/site/examples/map/map/demo/maplibre.js @@ -0,0 +1,53 @@ +import { Scene, PointLayer } from '@antv/l7'; +import { MapLibre } from '@antv/l7-maps'; + +function initMap() { + const scene = new Scene({ + id: 'map', + map: new MapLibre({ + zoom: 10, + style: "https://api.maptiler.com/maps/streets/style.json?key=YbCPLULzWdf1NplssEIc", // style URL + minZoom: 0, + maxZoom: 18 + }) + }); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + ) + .then(res => res.json({ + autoFit: true + })) + .then(data => { + const pointLayer = new PointLayer({ + autoFit: true + }) + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('name', [ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica' + ]) + .size('unit_price', [10, 25]) + .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']) + .style({ + opacity: 1, + strokeWidth: 2 + }); + scene.addLayer(pointLayer); + }); + }); +} +initMap(); diff --git a/packages/site/examples/map/map/demo/meta.json b/packages/site/examples/map/map/demo/meta.json index e90f8dc219..98c9476873 100644 --- a/packages/site/examples/map/map/demo/meta.json +++ b/packages/site/examples/map/map/demo/meta.json @@ -37,6 +37,18 @@ "title": "腾讯地图实例化", "new": true, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2v8KSpMdVK0AAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "mapbox.js", + "title": "Mapbox 地图", + "new": true, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*twTiRJv0c5EAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "maplibre.js", + "title": "MapLibre 地图", + "new": true, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tTFVRbgUdfMAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/packages/utils/__tests__/lineAtOffset.spec.ts b/packages/utils/__tests__/lineAtOffset.spec.ts index 68d7a3a51e..08ecfdfb35 100644 --- a/packages/utils/__tests__/lineAtOffset.spec.ts +++ b/packages/utils/__tests__/lineAtOffset.spec.ts @@ -1,5 +1,5 @@ -import { Version } from '../src/interface/map'; -import { lineAtOffset, lineAtOffsetAsyc } from '../src/lineAtOffset/index'; +import { MapType } from '../src/interface/map'; +import { lineAtOffset } from '../src/lineAtOffset/index'; const arcSource = { inited: true, data: { @@ -42,20 +42,20 @@ describe('lineAtOffset', () => { const arcOffsetPoint = lineAtOffset(arcSource, { shape: 'arc', offset: 0.1, - mapVersion: Version['GAODE1.x'], + mapVersion: MapType['GAODE1.x'], }); const arcOffsetPoint2 = lineAtOffset(arcSource, { shape: 'arc', offset: 0.1, - mapVersion: Version['GAODE2.x'], + mapVersion: MapType['GAODE2.x'], thetaOffset: 0.314, }); const arcOffsetPoint3 = lineAtOffset(arcSource, { shape: 'arc', offset: 0.1, - mapVersion: Version['GAODE2.x'], + mapVersion: MapType['GAODE2.x'], thetaOffset: 0.314, featureId: 0, }); @@ -63,19 +63,19 @@ describe('lineAtOffset', () => { const greatCircleOffsetPoint = lineAtOffset(arcSource, { shape: 'greatcircle', offset: 0.1, - mapVersion: Version['GAODE1.x'], + mapVersion: MapType['GAODE1.x'], }); const greatCircleOffsetPoint2 = lineAtOffset(arcSource, { shape: 'greatcircle', offset: 0.1, - mapVersion: Version['GAODE2.x'], + mapVersion: MapType['GAODE2.x'], }); const lineOffsetPoint = lineAtOffset(arcSource, { shape: 'line', offset: 0.1, - mapVersion: Version['GAODE1.x'], + mapVersion: MapType['GAODE1.x'], }); it('arcOffsetPoint', () => { diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 7f5bef0d30..742af53229 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -17,3 +17,4 @@ export * as Satistics from './statistics'; export * from './tileset-manager'; export * from './worker-helper'; export * from './workers/triangulation'; +export * from './interface/map' \ No newline at end of file diff --git a/packages/utils/src/interface/map.ts b/packages/utils/src/interface/map.ts index 0303501bef..f0fffec64f 100644 --- a/packages/utils/src/interface/map.ts +++ b/packages/utils/src/interface/map.ts @@ -1,4 +1,4 @@ -export enum Version { +export enum MapType { 'GAODE1.x' = 'GAODE1.x', 'GAODE2.x' = 'GAODE2.x', 'MAPBOX' = 'MAPBOX', diff --git a/packages/utils/src/lineAtOffset/arc.ts b/packages/utils/src/lineAtOffset/arc.ts index 8452823285..9a27831dfa 100644 --- a/packages/utils/src/lineAtOffset/arc.ts +++ b/packages/utils/src/lineAtOffset/arc.ts @@ -1,5 +1,5 @@ import { amap2Project, amap2UnProject } from '../geo'; -import { Version } from '../interface/map'; +import { MapType } from '../interface/map'; import { Point } from './interface'; // arc export function arcLineAtOffset( @@ -7,7 +7,7 @@ export function arcLineAtOffset( target: Point, offset: number, thetaOffset: number | undefined, - mapVersion: Version | undefined, + mapVersion: MapType | undefined, segmentNumber: number = 30, autoFit: boolean, ) { @@ -53,9 +53,9 @@ function interpolate( target: Point, offset: number, thetaOffset: number, - mapVersion?: Version, + mapVersion?: MapType, ) { - if (mapVersion === Version['GAODE2.x']) { + if (mapVersion === MapType['GAODE2.x']) { // amap2 const sourceFlat = amap2Project(source[0], source[1]); const targetFlat = amap2Project(target[0], target[1]); diff --git a/packages/utils/src/lineAtOffset/greatCircle.ts b/packages/utils/src/lineAtOffset/greatCircle.ts index 0eca00458f..c9c6e3b5ae 100644 --- a/packages/utils/src/lineAtOffset/greatCircle.ts +++ b/packages/utils/src/lineAtOffset/greatCircle.ts @@ -1,6 +1,6 @@ import { degreesToRadians, radiansToDegrees } from '@turf/helpers'; import { calDistance } from '../geo'; -import { Version } from '../interface/map'; +import { MapType } from '../interface/map'; import { Point } from './interface'; // arc export function greatCircleLineAtOffset( @@ -8,7 +8,7 @@ export function greatCircleLineAtOffset( target: Point, offset: number, thetaOffset: number | undefined, - mapVersion: Version | undefined, + mapVersion: MapType | undefined, // eslint-disable-next-line @typescript-eslint/no-unused-vars segmentNumber: number = 30, autoFit: boolean, diff --git a/packages/utils/src/lineAtOffset/interface.ts b/packages/utils/src/lineAtOffset/interface.ts index fd369bd3b8..59398c19b7 100644 --- a/packages/utils/src/lineAtOffset/interface.ts +++ b/packages/utils/src/lineAtOffset/interface.ts @@ -1,4 +1,4 @@ -import { Version } from '../interface/map'; +import { MapType } from '../interface/map'; export type Source = any; export type ILineShape = 'line' | 'arc' | 'arc3d' | 'greatcircle'; export type IThetaOffset = string | number | undefined; @@ -7,7 +7,7 @@ export type Point = number[]; export interface ILineAtOffset { offset: number; shape: ILineShape; - mapVersion: Version; + mapVersion: MapType; thetaOffset?: IThetaOffset; featureId?: number | undefined; segmentNumber?: number;