mirror of https://gitee.com/antv-l7/antv-l7
fix: 修复设置地图中心点引发的问题 (#1386)
* fix: 修复设置地图中心点引发的问题 * style: lint style * feat: 补充空值时图层绘制采用默认地图中心点 Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
parent
55835ff9b9
commit
cab8e69804
|
@ -112,7 +112,7 @@ export default () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new GaodeMap({
|
map: new GaodeMapV2({
|
||||||
center: [120.151634, 30.244831],
|
center: [120.151634, 30.244831],
|
||||||
style: "dark",
|
style: "dark",
|
||||||
zoom: 10
|
zoom: 10
|
||||||
|
|
|
@ -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<LineString>[] = [
|
||||||
|
{
|
||||||
|
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 (
|
||||||
|
<div
|
||||||
|
id="map"
|
||||||
|
style={{
|
||||||
|
height: '500px',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,2 @@
|
||||||
|
### fix2 feature
|
||||||
|
<code src="./demos/fix2.tsx"></code>
|
|
@ -281,7 +281,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
|
||||||
mappedData.length > 0 &&
|
mappedData.length > 0 &&
|
||||||
this.mapService.version === Version['GAODE2.x']
|
this.mapService.version === Version['GAODE2.x']
|
||||||
) {
|
) {
|
||||||
const layerCenter = layer.coordCenter;
|
const layerCenter = layer.coordCenter || layer.getSource().center;
|
||||||
if (typeof mappedData[0].coordinates[0] === 'number') {
|
if (typeof mappedData[0].coordinates[0] === 'number') {
|
||||||
// 单个的点数据
|
// 单个的点数据
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|
|
@ -46,6 +46,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
|
||||||
this.coordinateSystemService.refresh(offset);
|
this.coordinateSystemService.refresh(offset);
|
||||||
|
|
||||||
if (version === 'GAODE2.x') {
|
if (version === 'GAODE2.x') {
|
||||||
|
this.setLayerCenter(layer);
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
mvp = this.mapService.map.customCoords.getMVPMatrix();
|
mvp = this.mapService.map.customCoords.getMVPMatrix();
|
||||||
// mvp = amapCustomCoords.getMVPMatrix()
|
// mvp = amapCustomCoords.getMVPMatrix()
|
||||||
|
@ -89,8 +90,14 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private getLayerCenter(layer: ILayer) {
|
/**
|
||||||
const source = layer.getSource();
|
* 对于每个 layer 都有不同的几何中心点,因此在绘制每个 layer 的时候都需要重新设置
|
||||||
return source.center;
|
* @param layer
|
||||||
|
*/
|
||||||
|
private setLayerCenter(layer: ILayer) {
|
||||||
|
if (layer.coordCenter === undefined)
|
||||||
|
layer.coordCenter = layer.getSource().center;
|
||||||
|
this.mapService.setCoordCenter &&
|
||||||
|
this.mapService.setCoordCenter(layer.coordCenter);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -69,7 +69,8 @@ export default class AMapService extends AMapBaseService {
|
||||||
lnglat: [number, number],
|
lnglat: [number, number],
|
||||||
layerCenter: [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);
|
return this._sub(amap2Project(lnglat[0], lnglat[1]), layerCenterFlat);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue