diff --git a/dev-demos/features/fix/demos/fix.tsx b/dev-demos/features/fix/demos/fix.tsx index 187def650b..158b310ecd 100644 --- a/dev-demos/features/fix/demos/fix.tsx +++ b/dev-demos/features/fix/demos/fix.tsx @@ -1,20 +1,28 @@ -import { Scene } from "@antv/l7"; +import { Scene, PointLayer, LineLayer, Source } from "@antv/l7"; // import { DrawEvent, DrawLine } from "@antv/l7-draw"; import { GaodeMapV2, GaodeMap, Map, Mapbox } from "@antv/l7-maps"; -import { LineLayer } from "@antv/l7"; -import { coordAll, Feature, featureCollection, LineString } from "@turf/turf"; -import { debounce } from "lodash"; +import { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf"; +import { debounce, throttle } from "lodash"; import React, { useEffect } from 'react'; -export const lineList: Feature[] = [ +const lineList: Feature[] = [ { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: [ - [120, 30.25], - [120, 30.2], + [119.988511, 30.269614], + [119.9851, 30.269323], + [119.985438, 30.267852], + [119.990291, 30.267257], + [119.991454, 30.261762], + [119.994974, 30.256115], + [119.983641, 30.246146], + [119.985286, 30.241228], + [119.983351, 30.224089], + [119.985473, 30.221814], + [119.99271, 30.22088], ], }, }, @@ -24,20 +32,88 @@ export const lineList: Feature[] = [ geometry: { type: 'LineString', coordinates: [ - [120.1, 30.25], - [120.1, 30.2], + [120.075427, 30.147148], + [120.073659, 30.147609], + [120.074996, 30.154115], + [120.070946, 30.160916], + [120.074171, 30.161745], + [120.075425, 30.158086], + [120.081662, 30.159401], + [120.084335, 30.163868], + [120.112648, 30.17977], + [120.119262, 30.186753], + [120.137108, 30.198481], + [120.137962, 30.202496], + [120.135039, 30.208876], + [120.135625, 30.216541], + [120.138548, 30.225005], + [120.145412, 30.229088], + [120.155609, 30.230104], + [120.158572, 30.241788], + [120.160816, 30.245725], + [120.16441, 30.245929], + [120.164401, 30.247589], + [120.165608, 30.247515], + [120.166546, 30.254134], + ], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [120.216401, 30.291456], + [120.217689, 30.289456], + [120.218912, 30.28995], + [120.216862, 30.292565], + [120.221055, 30.293611], + [120.221909, 30.291061], + [120.211464, 30.28603], + [120.207209, 30.278355], + [120.207448, 30.270482], + [120.199987, 30.270352], + [120.200252, 30.247617], + [120.210037, 30.243515], + [120.204483, 30.237082], + [120.224585, 30.222153], + [120.213219, 30.213984], + [120.216402, 30.20977], + [120.194058, 30.196853], + [120.17329, 30.188212], + [120.174223, 30.181411], + [120.16777, 30.181168], + [120.167244, 30.173706], + [120.147426, 30.172062], + [120.146042, 30.176801], + [120.135382, 30.17619], ], }, }, ]; +const getPointFeatureCollection = (lineList: Feature[]) => { + const data = featureCollection( + coordAll(featureCollection([...lineList])).map((item) => point(item)) + ); + // console.log(data) + return data + // return {type: 'FeatureCollection', features: [ + // { + // type: "Feature", + // properties: {}, + // geometry: {type: 'Point', coordinates: lineList[0].geometry.coordinates[0]} + // } + // ]} +}; + export default () => { useEffect(() => { const scene = new Scene({ id: 'map', map: new GaodeMapV2({ center: [120.151634, 30.244831], - pitch: 0, style: "dark", zoom: 10 }) @@ -57,7 +133,18 @@ export default () => { ) .size(4) .color("#f00"); + const pointLayer = new PointLayer({}); + pointLayer + .source(getPointFeatureCollection(lineList)) + .size(6) + .shape("circle") + .style({ + stroke: "#00f", + strokeWidth: 3 + }); + scene.addLayer(lineLayer); + scene.addLayer(pointLayer); let isDrag = false; let dragFeature: Feature | null = null; @@ -68,57 +155,50 @@ export default () => { prePosition = [lng, lat]; isDrag = true; - scene.setMapStatus({ - dragEnable: false - }); + // scene.setMapStatus({ + // dragEnable: false + // }); dragFeature = e.feature; }); - scene.on( - "mousemove", - debounce( - (e) => { - if (isDrag) { - const { lng, lat } = e.lnglat; - const [lastLng, lastLat] = prePosition; - if (dragFeature) { - // lineList[0].geometry.coordinates[0][0] += 0.001 - // lineList[0].geometry.coordinates[1][0] += 0.001 + scene.setMapStatus({ + dragEnable: false + }); - // lineList[1].geometry.coordinates[0][0] += 0.001 - // lineList[1].geometry.coordinates[1][0] += 0.001 + scene.on("mousemove", (e) => { + + if (isDrag && lineLayer.modelLoaded && pointLayer.modelLoaded) { + // if (isDrag ) { + // requestAnimationFrame(() => { + + const { lng, lat } = e.lnglat; + const [lastLng, lastLat] = prePosition; + if (dragFeature) { + const positions = coordAll(dragFeature); + positions.forEach((position) => { + position[0] += lng - lastLng; + position[1] += lat - lastLat; + }); + dragFeature.geometry.coordinates = positions; + lineList[dragFeature.properties?.index] = dragFeature; + } + prePosition = [lng, lat]; + const lineData = featureCollection([...lineList]); + const pointData = getPointFeatureCollection([...lineList]); - const positions = coordAll(dragFeature); - positions.forEach((position) => { - // console.log( - // position[0], - // lng - lastLng, - // position[0] + lng - lastLng - // ); - position[0] += lng - lastLng; - position[1] += lat - lastLat; - }); - dragFeature.geometry.coordinates = positions; - lineList[dragFeature.properties?.index] = dragFeature; - } - prePosition = [lng, lat]; - - // lineLayer.center = undefined - lineLayer.setData(featureCollection(lineList)); - } - }, - 0, - { - maxWait: 100 - } - ) - ); + + lineLayer.setData(lineData); + pointLayer.setData(pointData); + + // }) + } + } ); scene.on("mouseup", (e) => { isDrag = false; - scene.setMapStatus({ - dragEnable: true - }); + // scene.setMapStatus({ + // dragEnable: true + // }); }); }); }, []); diff --git a/dev-demos/features/fix/demos/fix2.tsx b/dev-demos/features/fix/demos/fix2.tsx new file mode 100644 index 0000000000..7f3600bf2a --- /dev/null +++ b/dev-demos/features/fix/demos/fix2.tsx @@ -0,0 +1,135 @@ +import { Scene, PointLayer, LineLayer, Source } from "@antv/l7"; +// import { DrawEvent, DrawLine } from "@antv/l7-draw"; +import { GaodeMapV2, GaodeMap, Map, Mapbox } from "@antv/l7-maps"; +import { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf"; +import React, { useEffect } from 'react'; + +const lineList: Feature[] = [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [119.988511, 30.269614], + [119.9851, 30.269323], + [119.985438, 30.267852], + [119.990291, 30.267257], + [119.991454, 30.261762], + [119.994974, 30.256115], + [119.983641, 30.246146], + [119.985286, 30.241228], + [119.983351, 30.224089], + [119.985473, 30.221814], + [119.99271, 30.22088], + ], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [120.075427, 30.147148], + [120.073659, 30.147609], + [120.074996, 30.154115], + [120.070946, 30.160916], + [120.074171, 30.161745], + [120.075425, 30.158086], + [120.081662, 30.159401], + [120.084335, 30.163868], + [120.112648, 30.17977], + [120.119262, 30.186753], + [120.137108, 30.198481], + [120.137962, 30.202496], + [120.135039, 30.208876], + [120.135625, 30.216541], + [120.138548, 30.225005], + [120.145412, 30.229088], + [120.155609, 30.230104], + [120.158572, 30.241788], + [120.160816, 30.245725], + [120.16441, 30.245929], + [120.164401, 30.247589], + [120.165608, 30.247515], + [120.166546, 30.254134], + ], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [ + [120.216401, 30.291456], + [120.217689, 30.289456], + [120.218912, 30.28995], + [120.216862, 30.292565], + [120.221055, 30.293611], + [120.221909, 30.291061], + [120.211464, 30.28603], + [120.207209, 30.278355], + [120.207448, 30.270482], + [120.199987, 30.270352], + [120.200252, 30.247617], + [120.210037, 30.243515], + [120.204483, 30.237082], + [120.224585, 30.222153], + [120.213219, 30.213984], + [120.216402, 30.20977], + [120.194058, 30.196853], + [120.17329, 30.188212], + [120.174223, 30.181411], + [120.16777, 30.181168], + [120.167244, 30.173706], + [120.147426, 30.172062], + [120.146042, 30.176801], + [120.135382, 30.17619], + ], + }, + }, +]; + + +export default () => { + useEffect(() => { + const scene = new Scene({ + id: 'map', + map: new GaodeMapV2({ + center: [120.151634, 30.244831], + style: "dark", + zoom: 10 + }) + }); + + const source = new Source(featureCollection( + lineList.map((item, index) => { + item.properties = { + index + }; + return item; + }) + )) + scene.on("loaded", () => { + const lineLayer = new LineLayer(); + lineLayer + .source(source) + .size(4) + .color("#f00"); + + + scene.addLayer(lineLayer); + }); + }, []); + return ( +
+ ); +}; diff --git a/dev-demos/features/fix/fix2.md b/dev-demos/features/fix/fix2.md new file mode 100644 index 0000000000..804a084ae0 --- /dev/null +++ b/dev-demos/features/fix/fix2.md @@ -0,0 +1,2 @@ +### fix2 feature + \ No newline at end of file diff --git a/dev-demos/features/tile/mask.md b/dev-demos/features/tile/mask.md new file mode 100644 index 0000000000..4e06a423d6 --- /dev/null +++ b/dev-demos/features/tile/mask.md @@ -0,0 +1,5 @@ +### Vector - Mask + +#### vector mask +mask 掩模瓦片图层 + \ No newline at end of file diff --git a/dev-demos/features/tile/vector/mask.tsx b/dev-demos/features/tile/vector/mask.tsx new file mode 100644 index 0000000000..f72b250dec --- /dev/null +++ b/dev-demos/features/tile/vector/mask.tsx @@ -0,0 +1,63 @@ +// @ts-ignore +import { Scene, RasterLayer, MaskLayer } from '@antv/l7'; +// @ts-ignore +import { Map } from '@antv/l7-maps'; +import React, { useEffect } from 'react'; + +export default () => { + useEffect(() => { + const scene = new Scene({ + id: 'line', + stencil: true, + map: new Map({ + center: [121.268, 30.3628], + pitch: 0, + style: 'blank', + zoom: 4, + }), + }); + + const layer = new MaskLayer({ + sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city + }).source( + 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', + { + parser: { + type: 'mvt', + tileSize: 256, + maxZoom: 9, + extent: [-180, -85.051129, 179, 85.051129], + }, + }, + ) + + const satellite = new RasterLayer({ + mask: true + }) + .source( + 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', + { + parser: { + type: 'rasterTile', + tileSize: 256, + zoomOffset: 0, + updateStrategy: 'overlap', + }, + }, + ) + + scene.on('loaded', () => { + scene.addLayer(layer); + scene.addLayer(satellite); + }); + }, []); + return ( +
+ ); +}; diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 3083fa450c..4d08efc5f8 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -1387,7 +1387,12 @@ export default class BaseLayer this.models = models; this.emit('modelLoaded', null); this.modelLoaded = true; - this.layerService.throttleRenderLayers(); + + // Tip: setTimeout 用于延迟绘制，可以让拖动图层时连续的 setData 更加平滑 - L7Draw + setTimeout(() => { + // Tip: 使用 renderLayers 而不是 throttleRenderLayers，让图层之间的 setData 更新绘制不存在延迟 + this.layerService.renderLayers(); + }, 32); } protected reRender() { diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index 93ea2d217d..83f35a45af 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -164,6 +164,7 @@ export interface IMaskLayerStyleOptions extends IBaseLayerStyleOptions { // define opacity: number; color: string; + sourceLayer?: string; } export interface IWindLayerStyleOptions extends IBaseLayerStyleOptions { diff --git a/packages/layers/src/mask/index.ts b/packages/layers/src/mask/index.ts index 8bf40e20d9..4801ab50ad 100644 --- a/packages/layers/src/mask/index.ts +++ b/packages/layers/src/mask/index.ts @@ -1,6 +1,7 @@ import BaseLayer from '../core/BaseLayer'; import { IMaskLayerStyleOptions } from '../core/interface'; import MaskModels, { MaskModelType } from './models'; +import { isVectorTile } from '../tile/utils'; import { TYPES, ICameraService, @@ -125,6 +126,10 @@ export default class MaskLayer extends BaseLayer { } protected getModelType(): MaskModelType { + const parserType = this.layerSource.getParserType(); + if (isVectorTile(parserType)) { + return 'vectorMask'; + } return 'fill'; } } diff --git a/packages/layers/src/mask/models/index.ts b/packages/layers/src/mask/models/index.ts index d90ca5c11b..f65adca07d 100644 --- a/packages/layers/src/mask/models/index.ts +++ b/packages/layers/src/mask/models/index.ts @@ -1,8 +1,10 @@ +import MaskTileModel from '../../tile/models/tileModel'; import FillModel from './fill'; -export type MaskModelType = 'fill'; +export type MaskModelType = 'fill' | 'vectorMask'; const MaskModels: { [key in MaskModelType]: any } = { fill: FillModel, + vectorMask: MaskTileModel, }; export default MaskModels; diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 9f127fb63e..615cbfdda3 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -281,7 +281,7 @@ export default class DataMappingPlugin implements ILayerPlugin { mappedData.length > 0 && this.mapService.version === Version['GAODE2.x'] ) { - const layerCenter = layer.coordCenter; + const layerCenter = layer.coordCenter || layer.getSource().center; if (typeof mappedData[0].coordinates[0] === 'number') { // 单个的点数据 // @ts-ignore diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts index 9a3fb70c9b..86cbc3aed7 100644 --- a/packages/layers/src/plugins/ShaderUniformPlugin.ts +++ b/packages/layers/src/plugins/ShaderUniformPlugin.ts @@ -46,6 +46,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin { this.coordinateSystemService.refresh(offset); if (version === 'GAODE2.x') { + this.setLayerCenter(layer); // @ts-ignore mvp = this.mapService.map.customCoords.getMVPMatrix(); // mvp = amapCustomCoords.getMVPMatrix() @@ -89,8 +90,14 @@ export default class ShaderUniformPlugin implements ILayerPlugin { }); } - private getLayerCenter(layer: ILayer) { - const source = layer.getSource(); - return source.center; + /** + * 对于每个 layer 都有不同的几何中心点，因此在绘制每个 layer 的时候都需要重新设置 + * @param layer + */ + private setLayerCenter(layer: ILayer) { + if (layer.coordCenter === undefined) + layer.coordCenter = layer.getSource().center; + this.mapService.setCoordCenter && + this.mapService.setCoordCenter(layer.coordCenter); } } diff --git a/packages/layers/src/tile/tileFactory/base.ts b/packages/layers/src/tile/tileFactory/base.ts index 44c0b11060..051a1a6ec7 100644 --- a/packages/layers/src/tile/tileFactory/base.ts +++ b/packages/layers/src/tile/tileFactory/base.ts @@ -9,7 +9,7 @@ import { } from '@antv/l7-core'; import Source from '@antv/l7-source'; import { osmLonLat2TileXY, Tile, TilesetManager } from '@antv/l7-utils'; -import MaskLayer from '../../mask'; + import { getLayerShape, readRasterValue, @@ -175,7 +175,7 @@ export default class TileFactory implements ITileFactory { // set mask const layers = [layer]; if (mask && layer.isVector) { - const masklayer = new MaskLayer() + const masklayer = new VectorLayer({layerType: "MaskLayer"}) .source({ type: 'FeatureCollection', features: [tile.bboxPolygon], @@ -198,11 +198,12 @@ export default class TileFactory implements ITileFactory { return layer; } + // eslint-disable-next-line @typescript-eslint/no-unused-vars public updateStyle(styles: ITileStyles) { return ''; } - public getDefautStyleAttributeField(layer: ILayer, type: string) { + public getDefaultStyleAttributeField(layer: ILayer, type: string) { switch (type) { case 'size': return 1; @@ -229,7 +230,7 @@ export default class TileFactory implements ITileFactory { layer[type](value); return; } - const defaultValue = this.getDefautStyleAttributeField(layer, type); + const defaultValue = this.getDefaultStyleAttributeField(layer, type); if (!value) { layer[type](defaultValue); return layer; diff --git a/packages/layers/src/tile/tileFactory/index.ts b/packages/layers/src/tile/tileFactory/index.ts index 8e6e68ea7b..898e4fd2a4 100644 --- a/packages/layers/src/tile/tileFactory/index.ts +++ b/packages/layers/src/tile/tileFactory/index.ts @@ -3,6 +3,7 @@ import { rasterDataTypes } from '@antv/l7-source'; import VectorLineTile from './line'; import VectorPointLayer from './point'; import VectorPolygonTile from './polygon'; +import VectorMask from './mask' import RasterTileFactory from './raster'; import RasterDataFactory from './rasterData'; import TestTile from './test'; @@ -12,6 +13,7 @@ export type TileType = | 'PointLayer' | 'LineLayer' | 'RasterLayer' + | 'MaskLayer' | 'TileDebugLayer'; export function getTileFactory(tileType: TileType, parser: IParserCfg) { @@ -22,6 +24,8 @@ export function getTileFactory(tileType: TileType, parser: IParserCfg) { return VectorLineTile; case 'PointLayer': return VectorPointLayer; + case 'MaskLayer': + return VectorMask; case 'TileDebugLayer': return TestTile; case 'RasterLayer': diff --git a/packages/layers/src/tile/tileFactory/line.ts b/packages/layers/src/tile/tileFactory/line.ts index 389a5763de..8ed68ba8ef 100644 --- a/packages/layers/src/tile/tileFactory/line.ts +++ b/packages/layers/src/tile/tileFactory/line.ts @@ -3,7 +3,7 @@ import Source from '@antv/l7-source'; import { Tile } from '@antv/l7-utils'; import { ITileFactoryOptions } from '../interface'; import TileFactory from './base'; -export default class VectorPolygonTile extends TileFactory { +export default class VectorLineTile extends TileFactory { public parentLayer: ILayer; constructor(option: ITileFactoryOptions) { diff --git a/packages/layers/src/tile/tileFactory/mask.ts b/packages/layers/src/tile/tileFactory/mask.ts new file mode 100644 index 0000000000..45b452e709 --- /dev/null +++ b/packages/layers/src/tile/tileFactory/mask.ts @@ -0,0 +1,41 @@ +import { ILayer, ISubLayerInitOptions } from '@antv/l7-core'; +import Source from '@antv/l7-source'; +import { Tile } from '@antv/l7-utils'; +import { ITileFactoryOptions } from '../interface'; +import TileFactory from './base'; + +export default class VectorMaskTile extends TileFactory { + public parentLayer: ILayer; + + constructor(option: ITileFactoryOptions) { + super(option); + this.parentLayer = option.parent; + } + + public createTile(tile: Tile, initOptions: ISubLayerInitOptions) { + const { features, vectorTileLayer, source } = this.getFeatureData( + tile, + initOptions, + ); + if (features.length === 0) { + return { + layers: [], + layerIDList: [], + }; + } + const layer = this.createLayer({ + tile, + initOptions, + vectorTileLayer, + source: source as Source, + needListen: false + }); + layer.once('modelLoaded', () => { + tile.layerLoad(); + }) + return { + layers: [layer], + layerIDList: [layer.id], + }; + } +} diff --git a/packages/layers/src/tile/tileFactory/point.ts b/packages/layers/src/tile/tileFactory/point.ts index e51f257317..fd9066975a 100644 --- a/packages/layers/src/tile/tileFactory/point.ts +++ b/packages/layers/src/tile/tileFactory/point.ts @@ -4,7 +4,7 @@ import { Tile } from '@antv/l7-utils'; import { ITileFactoryOptions } from '../interface'; import TileFactory from './base'; -export default class VectorPolygonTile extends TileFactory { +export default class VectorPointTile extends TileFactory { public parentLayer: ILayer; constructor(option: ITileFactoryOptions) { diff --git a/packages/layers/src/tile/tileFactory/vectorLayer.ts b/packages/layers/src/tile/tileFactory/vectorLayer.ts index 994c187fe4..cf0fede28e 100644 --- a/packages/layers/src/tile/tileFactory/vectorLayer.ts +++ b/packages/layers/src/tile/tileFactory/vectorLayer.ts @@ -17,6 +17,7 @@ import { ILineLayerStyleOptions, IPointLayerStyleOptions, IPolygonLayerStyleOptions, + IMaskLayerStyleOptions, } from '../../core/interface'; import lineFillModel from '../../line/models/tile'; import lineSimpleModel from '../../line/models/simpleTileLine'; @@ -25,9 +26,13 @@ import pointTextModel from '../../point/models/tileText'; import pointFillModel from '../../point/models/tile'; import polygonFillModel from '../../polygon/models/tile'; +import maskModel from '../../mask/models/fill'; + +type ILayerStyleOptions = IPolygonLayerStyleOptions & ILineLayerStyleOptions & IPointLayerStyleOptions & IMaskLayerStyleOptions; + export default class VectorLayer extends BaseLayer< Partial< - IPolygonLayerStyleOptions & ILineLayerStyleOptions & IPointLayerStyleOptions & {needListen: boolean;} + ILayerStyleOptions & {needListen: boolean;} > > { public needListen: boolean = true; @@ -167,6 +172,8 @@ export default class VectorLayer extends BaseLayer< return this.getLineModel(); case 'PointLayer': return this.getPointModel(); + case 'MaskLayer': + return maskModel; default: return pointFillModel; } diff --git a/packages/layers/src/utils/layerData.ts b/packages/layers/src/utils/layerData.ts index bf4559db26..c5585e9a57 100644 --- a/packages/layers/src/utils/layerData.ts +++ b/packages/layers/src/utils/layerData.ts @@ -13,6 +13,7 @@ import { Version } from '@antv/l7-maps'; import Source from '@antv/l7-source'; import { isColor, normalize, rgb2arr } from '@antv/l7-utils'; import { ILineLayerStyleOptions } from '../core/interface'; +import { cloneDeep } from 'lodash'; function getArrowPoints(p1: Position, p2: Position) { const dir = [p2[0] - p1[0], p2[1] - p1[1]]; @@ -27,9 +28,11 @@ function getArrowPoints(p1: Position, p2: Position) { 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 @@ -41,7 +44,11 @@ function adjustData2Amap2Coordinates( // @ts-ignore d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据） // @ts-ignore - d.coordinates = this.mapService.lngLatToCoord(d.coordinates); + // d.coordinates = mapService.lngLatToCoord(d.coordinates); + d.coordinates = mapService.lngLatToCoordByLayer( + d.coordinates, + layerCenter, + ); }); } else { // 连续的线、面数据 @@ -54,7 +61,11 @@ function adjustData2Amap2Coordinates( // @ts-ignore d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据） // @ts-ignore - d.coordinates = this.mapService.lngLatToCoords(d.coordinates); + // d.coordinates = mapService.lngLatToCoords(d.coordinates); + d.coordinates = mapService.lngLatToCoordsByLayer( + d.coordinates, + layerCenter, + ); }); } } @@ -185,7 +196,7 @@ function mapping( return encodeRecord; }) as IEncodeFeature[]; // 调整数据兼容 Amap2.0 - adjustData2Amap2Coordinates(mappedData, mapService); + adjustData2Amap2Coordinates(mappedData, mapService, layer as ILayer); // 调整数据兼容 SimpleCoordinates adjustData2SimpleCoordinates(mappedData, mapService); diff --git a/packages/map/.fatherrc.ts b/packages/map/.fatherrc.ts index 1bb7f40993..586f65b4c4 100644 --- a/packages/map/.fatherrc.ts +++ b/packages/map/.fatherrc.ts @@ -6,6 +6,7 @@ export default { cjs: { output:'lib' }, + platform:'browser', autoprefixer: { browsers: ['IE 11', 'last 2 versions'], }, diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index 9752042430..3ae4cd6b06 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -68,7 +68,8 @@ export default class AMapService extends AMapBaseService { lnglat: [number, number], layerCenter: [number, number], ) { - const layerCenterFlat = amap2Project(...layerCenter); + const center = layerCenter || this.sceneCenter; + const layerCenterFlat = amap2Project(...center); return this._sub(amap2Project(lnglat[0], lnglat[1]), layerCenterFlat); }