mirror of https://gitee.com/antv-l7/antv-l7
Merge remote-tracking branch 'origin/master' into feat-yanxiong-merge
# Conflicts: # lerna.json # packages/component/package.json # packages/core/package.json # packages/l7/package.json # packages/l7/src/version.ts # packages/layers/package.json # packages/map/package.json # packages/maps/package.json # packages/mini/package.json # packages/renderer/package.json # packages/scene/package.json # packages/site/package.json # packages/source/package.json # packages/test-utils/package.json # packages/three/package.json # packages/utils/package.json
This commit is contained in:
commit
5bf5adc9f5
|
@ -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 { DrawEvent, DrawLine } from "@antv/l7-draw";
|
||||||
import { GaodeMapV2, GaodeMap, Map, Mapbox } from "@antv/l7-maps";
|
import { GaodeMapV2, GaodeMap, Map, Mapbox } from "@antv/l7-maps";
|
||||||
import { LineLayer } from "@antv/l7";
|
import { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf";
|
||||||
import { coordAll, Feature, featureCollection, LineString } from "@turf/turf";
|
import { debounce, throttle } from "lodash";
|
||||||
import { debounce } from "lodash";
|
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
export const lineList: Feature<LineString>[] = [
|
const lineList: Feature<LineString>[] = [
|
||||||
{
|
{
|
||||||
type: 'Feature',
|
type: 'Feature',
|
||||||
properties: {},
|
properties: {},
|
||||||
geometry: {
|
geometry: {
|
||||||
type: 'LineString',
|
type: 'LineString',
|
||||||
coordinates: [
|
coordinates: [
|
||||||
[120, 30.25],
|
[119.988511, 30.269614],
|
||||||
[120, 30.2],
|
[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<LineString>[] = [
|
||||||
geometry: {
|
geometry: {
|
||||||
type: 'LineString',
|
type: 'LineString',
|
||||||
coordinates: [
|
coordinates: [
|
||||||
[120.1, 30.25],
|
[120.075427, 30.147148],
|
||||||
[120.1, 30.2],
|
[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<LineString>[]) => {
|
||||||
|
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 () => {
|
export default () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new GaodeMapV2({
|
map: new GaodeMapV2({
|
||||||
center: [120.151634, 30.244831],
|
center: [120.151634, 30.244831],
|
||||||
pitch: 0,
|
|
||||||
style: "dark",
|
style: "dark",
|
||||||
zoom: 10
|
zoom: 10
|
||||||
})
|
})
|
||||||
|
@ -57,7 +133,18 @@ export default () => {
|
||||||
)
|
)
|
||||||
.size(4)
|
.size(4)
|
||||||
.color("#f00");
|
.color("#f00");
|
||||||
|
const pointLayer = new PointLayer({});
|
||||||
|
pointLayer
|
||||||
|
.source(getPointFeatureCollection(lineList))
|
||||||
|
.size(6)
|
||||||
|
.shape("circle")
|
||||||
|
.style({
|
||||||
|
stroke: "#00f",
|
||||||
|
strokeWidth: 3
|
||||||
|
});
|
||||||
|
|
||||||
scene.addLayer(lineLayer);
|
scene.addLayer(lineLayer);
|
||||||
|
scene.addLayer(pointLayer);
|
||||||
|
|
||||||
let isDrag = false;
|
let isDrag = false;
|
||||||
let dragFeature: Feature<LineString> | null = null;
|
let dragFeature: Feature<LineString> | null = null;
|
||||||
|
@ -68,57 +155,50 @@ export default () => {
|
||||||
prePosition = [lng, lat];
|
prePosition = [lng, lat];
|
||||||
|
|
||||||
isDrag = true;
|
isDrag = true;
|
||||||
scene.setMapStatus({
|
// scene.setMapStatus({
|
||||||
dragEnable: false
|
// dragEnable: false
|
||||||
});
|
// });
|
||||||
dragFeature = e.feature;
|
dragFeature = e.feature;
|
||||||
});
|
});
|
||||||
|
|
||||||
scene.on(
|
scene.setMapStatus({
|
||||||
"mousemove",
|
dragEnable: false
|
||||||
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
|
|
||||||
|
|
||||||
// lineList[1].geometry.coordinates[0][0] += 0.001
|
scene.on("mousemove", (e) => {
|
||||||
// lineList[1].geometry.coordinates[1][0] += 0.001
|
|
||||||
|
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) => {
|
lineLayer.setData(lineData);
|
||||||
// console.log(
|
pointLayer.setData(pointData);
|
||||||
// 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
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
scene.on("mouseup", (e) => {
|
scene.on("mouseup", (e) => {
|
||||||
isDrag = false;
|
isDrag = false;
|
||||||
scene.setMapStatus({
|
// scene.setMapStatus({
|
||||||
dragEnable: true
|
// dragEnable: true
|
||||||
});
|
// });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
|
@ -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>
|
|
@ -0,0 +1,5 @@
|
||||||
|
### Vector - Mask
|
||||||
|
|
||||||
|
#### vector mask
|
||||||
|
mask 掩模瓦片图层
|
||||||
|
<code src="./vector/mask.tsx"></code>
|
|
@ -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 (
|
||||||
|
<div
|
||||||
|
id="line"
|
||||||
|
style={{
|
||||||
|
height: '500px',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1387,7 +1387,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
this.models = models;
|
this.models = models;
|
||||||
this.emit('modelLoaded', null);
|
this.emit('modelLoaded', null);
|
||||||
this.modelLoaded = true;
|
this.modelLoaded = true;
|
||||||
this.layerService.throttleRenderLayers();
|
|
||||||
|
// Tip: setTimeout 用于延迟绘制,可以让拖动图层时连续的 setData 更加平滑 - L7Draw
|
||||||
|
setTimeout(() => {
|
||||||
|
// Tip: 使用 renderLayers 而不是 throttleRenderLayers,让图层之间的 setData 更新绘制不存在延迟
|
||||||
|
this.layerService.renderLayers();
|
||||||
|
}, 32);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected reRender() {
|
protected reRender() {
|
||||||
|
|
|
@ -164,6 +164,7 @@ export interface IMaskLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||||
// define
|
// define
|
||||||
opacity: number;
|
opacity: number;
|
||||||
color: string;
|
color: string;
|
||||||
|
sourceLayer?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IWindLayerStyleOptions extends IBaseLayerStyleOptions {
|
export interface IWindLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import BaseLayer from '../core/BaseLayer';
|
import BaseLayer from '../core/BaseLayer';
|
||||||
import { IMaskLayerStyleOptions } from '../core/interface';
|
import { IMaskLayerStyleOptions } from '../core/interface';
|
||||||
import MaskModels, { MaskModelType } from './models';
|
import MaskModels, { MaskModelType } from './models';
|
||||||
|
import { isVectorTile } from '../tile/utils';
|
||||||
import {
|
import {
|
||||||
TYPES,
|
TYPES,
|
||||||
ICameraService,
|
ICameraService,
|
||||||
|
@ -125,6 +126,10 @@ export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getModelType(): MaskModelType {
|
protected getModelType(): MaskModelType {
|
||||||
|
const parserType = this.layerSource.getParserType();
|
||||||
|
if (isVectorTile(parserType)) {
|
||||||
|
return 'vectorMask';
|
||||||
|
}
|
||||||
return 'fill';
|
return 'fill';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
|
import MaskTileModel from '../../tile/models/tileModel';
|
||||||
import FillModel from './fill';
|
import FillModel from './fill';
|
||||||
|
|
||||||
export type MaskModelType = 'fill';
|
export type MaskModelType = 'fill' | 'vectorMask';
|
||||||
|
|
||||||
const MaskModels: { [key in MaskModelType]: any } = {
|
const MaskModels: { [key in MaskModelType]: any } = {
|
||||||
fill: FillModel,
|
fill: FillModel,
|
||||||
|
vectorMask: MaskTileModel,
|
||||||
};
|
};
|
||||||
export default MaskModels;
|
export default MaskModels;
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import {
|
||||||
} from '@antv/l7-core';
|
} from '@antv/l7-core';
|
||||||
import Source from '@antv/l7-source';
|
import Source from '@antv/l7-source';
|
||||||
import { osmLonLat2TileXY, Tile, TilesetManager } from '@antv/l7-utils';
|
import { osmLonLat2TileXY, Tile, TilesetManager } from '@antv/l7-utils';
|
||||||
import MaskLayer from '../../mask';
|
|
||||||
import {
|
import {
|
||||||
getLayerShape,
|
getLayerShape,
|
||||||
readRasterValue,
|
readRasterValue,
|
||||||
|
@ -175,7 +175,7 @@ export default class TileFactory implements ITileFactory {
|
||||||
// set mask
|
// set mask
|
||||||
const layers = [layer];
|
const layers = [layer];
|
||||||
if (mask && layer.isVector) {
|
if (mask && layer.isVector) {
|
||||||
const masklayer = new MaskLayer()
|
const masklayer = new VectorLayer({layerType: "MaskLayer"})
|
||||||
.source({
|
.source({
|
||||||
type: 'FeatureCollection',
|
type: 'FeatureCollection',
|
||||||
features: [tile.bboxPolygon],
|
features: [tile.bboxPolygon],
|
||||||
|
@ -198,11 +198,12 @@ export default class TileFactory implements ITileFactory {
|
||||||
return layer;
|
return layer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
public updateStyle(styles: ITileStyles) {
|
public updateStyle(styles: ITileStyles) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
public getDefautStyleAttributeField(layer: ILayer, type: string) {
|
public getDefaultStyleAttributeField(layer: ILayer, type: string) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'size':
|
case 'size':
|
||||||
return 1;
|
return 1;
|
||||||
|
@ -229,7 +230,7 @@ export default class TileFactory implements ITileFactory {
|
||||||
layer[type](value);
|
layer[type](value);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const defaultValue = this.getDefautStyleAttributeField(layer, type);
|
const defaultValue = this.getDefaultStyleAttributeField(layer, type);
|
||||||
if (!value) {
|
if (!value) {
|
||||||
layer[type](defaultValue);
|
layer[type](defaultValue);
|
||||||
return layer;
|
return layer;
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { rasterDataTypes } from '@antv/l7-source';
|
||||||
import VectorLineTile from './line';
|
import VectorLineTile from './line';
|
||||||
import VectorPointLayer from './point';
|
import VectorPointLayer from './point';
|
||||||
import VectorPolygonTile from './polygon';
|
import VectorPolygonTile from './polygon';
|
||||||
|
import VectorMask from './mask'
|
||||||
import RasterTileFactory from './raster';
|
import RasterTileFactory from './raster';
|
||||||
import RasterDataFactory from './rasterData';
|
import RasterDataFactory from './rasterData';
|
||||||
import TestTile from './test';
|
import TestTile from './test';
|
||||||
|
@ -12,6 +13,7 @@ export type TileType =
|
||||||
| 'PointLayer'
|
| 'PointLayer'
|
||||||
| 'LineLayer'
|
| 'LineLayer'
|
||||||
| 'RasterLayer'
|
| 'RasterLayer'
|
||||||
|
| 'MaskLayer'
|
||||||
| 'TileDebugLayer';
|
| 'TileDebugLayer';
|
||||||
|
|
||||||
export function getTileFactory(tileType: TileType, parser: IParserCfg) {
|
export function getTileFactory(tileType: TileType, parser: IParserCfg) {
|
||||||
|
@ -22,6 +24,8 @@ export function getTileFactory(tileType: TileType, parser: IParserCfg) {
|
||||||
return VectorLineTile;
|
return VectorLineTile;
|
||||||
case 'PointLayer':
|
case 'PointLayer':
|
||||||
return VectorPointLayer;
|
return VectorPointLayer;
|
||||||
|
case 'MaskLayer':
|
||||||
|
return VectorMask;
|
||||||
case 'TileDebugLayer':
|
case 'TileDebugLayer':
|
||||||
return TestTile;
|
return TestTile;
|
||||||
case 'RasterLayer':
|
case 'RasterLayer':
|
||||||
|
|
|
@ -3,7 +3,7 @@ import Source from '@antv/l7-source';
|
||||||
import { Tile } from '@antv/l7-utils';
|
import { Tile } from '@antv/l7-utils';
|
||||||
import { ITileFactoryOptions } from '../interface';
|
import { ITileFactoryOptions } from '../interface';
|
||||||
import TileFactory from './base';
|
import TileFactory from './base';
|
||||||
export default class VectorPolygonTile extends TileFactory {
|
export default class VectorLineTile extends TileFactory {
|
||||||
public parentLayer: ILayer;
|
public parentLayer: ILayer;
|
||||||
|
|
||||||
constructor(option: ITileFactoryOptions) {
|
constructor(option: ITileFactoryOptions) {
|
||||||
|
|
|
@ -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],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,7 +4,7 @@ import { Tile } from '@antv/l7-utils';
|
||||||
import { ITileFactoryOptions } from '../interface';
|
import { ITileFactoryOptions } from '../interface';
|
||||||
import TileFactory from './base';
|
import TileFactory from './base';
|
||||||
|
|
||||||
export default class VectorPolygonTile extends TileFactory {
|
export default class VectorPointTile extends TileFactory {
|
||||||
public parentLayer: ILayer;
|
public parentLayer: ILayer;
|
||||||
|
|
||||||
constructor(option: ITileFactoryOptions) {
|
constructor(option: ITileFactoryOptions) {
|
||||||
|
|
|
@ -17,6 +17,7 @@ import {
|
||||||
ILineLayerStyleOptions,
|
ILineLayerStyleOptions,
|
||||||
IPointLayerStyleOptions,
|
IPointLayerStyleOptions,
|
||||||
IPolygonLayerStyleOptions,
|
IPolygonLayerStyleOptions,
|
||||||
|
IMaskLayerStyleOptions,
|
||||||
} from '../../core/interface';
|
} from '../../core/interface';
|
||||||
import lineFillModel from '../../line/models/tile';
|
import lineFillModel from '../../line/models/tile';
|
||||||
import lineSimpleModel from '../../line/models/simpleTileLine';
|
import lineSimpleModel from '../../line/models/simpleTileLine';
|
||||||
|
@ -25,9 +26,13 @@ import pointTextModel from '../../point/models/tileText';
|
||||||
import pointFillModel from '../../point/models/tile';
|
import pointFillModel from '../../point/models/tile';
|
||||||
import polygonFillModel from '../../polygon/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<
|
export default class VectorLayer extends BaseLayer<
|
||||||
Partial<
|
Partial<
|
||||||
IPolygonLayerStyleOptions & ILineLayerStyleOptions & IPointLayerStyleOptions & {needListen: boolean;}
|
ILayerStyleOptions & {needListen: boolean;}
|
||||||
>
|
>
|
||||||
> {
|
> {
|
||||||
public needListen: boolean = true;
|
public needListen: boolean = true;
|
||||||
|
@ -167,6 +172,8 @@ export default class VectorLayer extends BaseLayer<
|
||||||
return this.getLineModel();
|
return this.getLineModel();
|
||||||
case 'PointLayer':
|
case 'PointLayer':
|
||||||
return this.getPointModel();
|
return this.getPointModel();
|
||||||
|
case 'MaskLayer':
|
||||||
|
return maskModel;
|
||||||
default:
|
default:
|
||||||
return pointFillModel;
|
return pointFillModel;
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,6 +13,7 @@ import { Version } from '@antv/l7-maps';
|
||||||
import Source from '@antv/l7-source';
|
import Source from '@antv/l7-source';
|
||||||
import { isColor, normalize, rgb2arr } from '@antv/l7-utils';
|
import { isColor, normalize, rgb2arr } from '@antv/l7-utils';
|
||||||
import { ILineLayerStyleOptions } from '../core/interface';
|
import { ILineLayerStyleOptions } from '../core/interface';
|
||||||
|
import { cloneDeep } from 'lodash';
|
||||||
|
|
||||||
function getArrowPoints(p1: Position, p2: Position) {
|
function getArrowPoints(p1: Position, p2: Position) {
|
||||||
const dir = [p2[0] - p1[0], p2[1] - p1[1]];
|
const dir = [p2[0] - p1[0], p2[1] - p1[1]];
|
||||||
|
@ -27,9 +28,11 @@ function getArrowPoints(p1: Position, p2: Position) {
|
||||||
function adjustData2Amap2Coordinates(
|
function adjustData2Amap2Coordinates(
|
||||||
mappedData: IEncodeFeature[],
|
mappedData: IEncodeFeature[],
|
||||||
mapService: IMapService,
|
mapService: IMapService,
|
||||||
|
layer: ILayer,
|
||||||
) {
|
) {
|
||||||
// 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
|
// 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
|
||||||
if (mappedData.length > 0 && mapService.version === Version['GAODE2.x']) {
|
if (mappedData.length > 0 && mapService.version === Version['GAODE2.x']) {
|
||||||
|
const layerCenter = layer.coordCenter;
|
||||||
if (typeof mappedData[0].coordinates[0] === 'number') {
|
if (typeof mappedData[0].coordinates[0] === 'number') {
|
||||||
// 单个的点数据
|
// 单个的点数据
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
@ -41,7 +44,11 @@ function adjustData2Amap2Coordinates(
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据(许多上层逻辑依赖经纬度数据)
|
d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据(许多上层逻辑依赖经纬度数据)
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
d.coordinates = this.mapService.lngLatToCoord(d.coordinates);
|
// d.coordinates = mapService.lngLatToCoord(d.coordinates);
|
||||||
|
d.coordinates = mapService.lngLatToCoordByLayer(
|
||||||
|
d.coordinates,
|
||||||
|
layerCenter,
|
||||||
|
);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 连续的线、面数据
|
// 连续的线、面数据
|
||||||
|
@ -54,7 +61,11 @@ function adjustData2Amap2Coordinates(
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据(许多上层逻辑依赖经纬度数据)
|
d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据(许多上层逻辑依赖经纬度数据)
|
||||||
// @ts-ignore
|
// @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;
|
return encodeRecord;
|
||||||
}) as IEncodeFeature[];
|
}) as IEncodeFeature[];
|
||||||
// 调整数据兼容 Amap2.0
|
// 调整数据兼容 Amap2.0
|
||||||
adjustData2Amap2Coordinates(mappedData, mapService);
|
adjustData2Amap2Coordinates(mappedData, mapService, layer as ILayer);
|
||||||
|
|
||||||
// 调整数据兼容 SimpleCoordinates
|
// 调整数据兼容 SimpleCoordinates
|
||||||
adjustData2SimpleCoordinates(mappedData, mapService);
|
adjustData2SimpleCoordinates(mappedData, mapService);
|
||||||
|
|
|
@ -6,6 +6,7 @@ export default {
|
||||||
cjs: {
|
cjs: {
|
||||||
output:'lib'
|
output:'lib'
|
||||||
},
|
},
|
||||||
|
platform:'browser',
|
||||||
autoprefixer: {
|
autoprefixer: {
|
||||||
browsers: ['IE 11', 'last 2 versions'],
|
browsers: ['IE 11', 'last 2 versions'],
|
||||||
},
|
},
|
||||||
|
|
|
@ -68,7 +68,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