p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 修复线高度在 Mapbox/GaodeMap/GaodeMaoV2 上表现不一致 ，代码整理

This commit is contained in:
2912401452 2021-07-02 17:35:33 +08:00
parent 164458ea69
commit fe2d964bdd
51 changed files with 112 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -8,9 +8,9 @@
"devDependencies": {
"@antv/g2": "^3.5.9",
"@antv/gatsby-theme-antv": "^1.1.1",
"@antv/l7-district": "^2.2.46",
"@antv/l7-district": "^2.3.9",
"@antv/l7-draw": "^2.3.40",
"@antv/l7-react": "^2.2.37",
"@antv/l7-react": "^2.3.2",
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-decorators": "^7.6.0",

2
packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
View File

@ -196,7 +196,7 @@ void main() {
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap
v_arcDistrance = v_arcDistrance * 1000000.0;
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) { // mapbox
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox
// v_arcDistrance *= 10.0;
v_arcDistrance = project_pixel_allmap(v_arcDistrance);
}

2
packages/layers/src/line/shaders/line_arc_vert.glsl
View File

@ -159,7 +159,7 @@ void main() {
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap
v_arcDistrance *= 1000000.0;
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) { // mapbox
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox
// v_arcDistrance *= 8.0;
v_arcDistrance = project_pixel_allmap(v_arcDistrance);
}

9
packages/layers/src/line/shaders/line_vert.glsl
View File

@ -106,9 +106,14 @@ void main() {
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
// gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y, 1.0));
gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 10.0, 1.0)); // 额外除 10.0 是为了和gaode1.x的高度兼容
gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 8.0, 1.0)); // 额外除 8.0 是为了和gaode1.x的高度兼容
} else {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
float lineHeight = a_Size.y;
// 兼容 mapbox 在线高度上的效果表现基本一致
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
lineHeight = lineHeight*2.0/pow(2.0, 20.0 - u_Zoom);
}
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight, 1.0));
}
setPickingColor(a_PickingColor);

22
stories/District/Layer/world.tsx
View File

@ -49,18 +49,22 @@ export default class Country extends React.Component {
padding: [5, 5],
},
popup: {
enable: true,
openTriggerEvent: 'click',
Html: (props: any) => {
return `<span><button onclick='alert(11111)'>点击</button>${props.NAME_CHN +
':' +
props.value}</span>`;
// enable: true,
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
},
},
});
console.time('layer');
Layer.on('loaded', () => {
console.timeEnd('layer');
// console.time('layer');
// Layer.on('loaded', () => {
// console.timeEnd('layer');
// });
console.log('======')
Layer.on('click', (e: any) => {
// alert(e);
console.log(e)
// alert(1)
});
});
this.scene = scene;

1
stories/Map/components/amap2demo.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMapV2 } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_arcLine.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_arcLine3DTex.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_arcLine3d.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { PointLayer, LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_arcLine3dLinear.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { PointLayer, LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

21
stories/Map/components/amap2demo_arcLineDir.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
@ -11,26 +10,6 @@ export default class Amap2demo_arcLineDir extends React.Component {
this.scene.destroy();
}
// [116.478935,39.997761],
// [116.478939,39.997825],
// [116.478912,39.998549],
// [116.478912,39.998549],
// [116.478998,39.998555],
// [116.478998,39.998555],
// [116.479282,39.99856],
// [116.479658,39.998528],
// [116.480151,39.998453],
// [116.480784,39.998302],
// [116.480784,39.998302],
// [116.481149,39.998184],
// [116.481573,39.997997],
// [116.481863,39.997846],
// [116.482072,39.997718],
// [116.482362,39.997718],
// [116.483633,39.998935],
// [116.48367,39.998968],
// [116.484648,39.999861]
public async componentDidMount() {
const scene = new Scene({
id: 'map',

1
stories/Map/components/amap2demo_arcLineLinear.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_arcLineTex.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_arcLine_greatCircle.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_citybuilding.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { CityBuildingLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_clustermarker.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { MarkerLayer, Marker, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

3
stories/Map/components/amap2demo_drawControl.tsx
View File

@ -1,5 +1,4 @@
//@ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { DrawControl } from '@antv/l7-draw';
import * as React from 'react';

1
stories/Map/components/amap2demo_drilldown.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { GaodeMap } from '@antv/l7-maps';

3
stories/Map/components/amap2demo_extrude.tsx
View File

@ -1,5 +1,4 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_heatmap.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_heatmap3D.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_heatmap_grid.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_heatmap_hexagon.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_heatmap_hexagon_world.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_iconfont.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

3
stories/Map/components/amap2demo_image.tsx
View File

@ -1,5 +1,4 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_imagelayer.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { ImageLayer, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_instance.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
import AMapLoader from '@amap/amap-jsapi-loader';

1
stories/Map/components/amap2demo_lineDash.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

47
stories/Map/components/amap2demo_lineHeight.tsx
View File

@ -1,6 +1,5 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_lineHeight extends React.Component {
@ -14,7 +13,7 @@ export default class Amap2demo_lineHeight extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Mapbox({
pitch: 40,
style: 'light',
center: [102.600579, 23.114887],
@ -30,30 +29,40 @@ export default class Amap2demo_lineHeight extends React.Component {
)
.then((res) => res.json())
.then((data) => {
// let data = {
// "type": "FeatureCollection",
// "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
// "features": [
// { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } },
// { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } },
// ]
// }
const layer = new LineLayer({})
.source(data)
.size('ELEV', (h) => {
return [h % 50 === 0 ? 1.0 : 0.5, (h - 1500) * 2];
return [h % 50 === 0 ? 1.0 : 0.5, (h - 1500) * 20];
})
.shape('line')
.scale('ELEV', {
type: 'quantize',
})
.color(
'ELEV',
[
'#E4682F',
'#FF8752',
'#FFA783',
'#FFBEA8',
'#FFDCD6',
'#EEF3FF',
'#C8D7F5',
'#A5C1FC',
'#7FA7F9',
'#5F8AE5',
].reverse(),
);
.color('#f00')
// .color(
// 'ELEV',
// [
// '#E4682F',
// '#FF8752',
// '#FFA783',
// '#FFBEA8',
// '#FFDCD6',
// '#EEF3FF',
// '#C8D7F5',
// '#A5C1FC',
// '#7FA7F9',
// '#5F8AE5',
// ].reverse(),
// );
scene.addLayer(layer);
});
});

2
stories/Map/components/amap2demo_lineLinear.tsx
View File

@ -1,4 +1,4 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_lineStreet.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';

47
stories/Map/components/amap2demo_markerPopup.tsx Normal file
View File

@ -0,0 +1,47 @@
//@ts-ignore
import { MarkerLayer, Scene } from '@antv/l7';
import { AMapScene, Marker, Popup } from '@antv/l7-react';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
import {useState} from 'react'
const Amap2demo_markerPopup = () => {
const [showPopup , setShowPopup] = useState(false)
return (
<AMapScene
map={{
center: [114, 32],
pitch: 0,
style: 'dark',
zoom: 6,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
<Marker key={1} lnglat={[112, 30]}
onMarkerLoaded={(marker) => {
console.log(marker.getElement().children[0].children[0])
marker.getElement().children[0].children[0].addEventListener('mouseenter', (e) => {
setShowPopup(true)
})
marker.getElement().children[0].children[0].addEventListener('mouseout', (e) => {
setShowPopup(false)
});
}}
/>
{showPopup && <Popup
lnglat={[120, 30]}
option={{
closeOnClick: false,
}}>
<span>这是个信息框</span>
</Popup> }
</AMapScene>
);
}
export default Amap2demo_markerPopup

1
stories/Map/components/amap2demo_markerlayer.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { MarkerLayer, Marker, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_mesh.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_mesh2.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_meshStyleMap.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

2
stories/Map/components/amap2demo_polygon.tsx
View File

@ -1,9 +1,9 @@
// @ts-ignore
import { PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_polygon extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {

6
stories/Map/components/amap2demo_polygon_extrude.tsx
View File

@ -1,7 +1,4 @@
import { vec2, vec3 } from 'gl-matrix';
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { DrawPolygon } from '@antv/l7-draw';
import { PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
@ -16,6 +13,7 @@ function convertRGB2Hex(rgb: number[]) {
export default class Amap2demo_polygon_extrude extends React.Component {
private gui: dat.GUI;
private $stats: Node;
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {

1
stories/Map/components/amap2demo_rasterlayer.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { RasterLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_road.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_road2.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_styleMap.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

3
stories/Map/components/amap2demo_text.tsx
View File

@ -1,5 +1,4 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_text extends React.Component {

1
stories/Map/components/amap2demo_textOffset.tsx
View File

@ -1,4 +1,3 @@
//@ts-ignore
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_textSelect.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

1
stories/Map/components/amap2demo_winds.tsx
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

3
stories/Map/components/amapdemo_extrude.tsx
View File

@ -1,5 +1,4 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

2
stories/Map/map.stories.tsx
View File

@ -45,6 +45,7 @@ import Amap2demo_citybuilding from "./components/amap2demo_citybuilding"
import Amap2demo_drilldown from "./components/amap2demo_drilldown"
import Amap2demo_markerlayer from "./components/amap2demo_markerlayer"
import Amap2demo_markerPopup from './components/amap2demo_markerPopup';
import Amap2demo_clustermarker from './components/amap2demo_clustermarker';
import Amap2demo_instance from "./components/amap2demo_instance"
@ -104,6 +105,7 @@ storiesOf('地图方法', module)
.add('高德地图2.0 点击下钻', () => <Amap2demo_drilldown />)
.add('高德地图2.0 Marker图层', () => <Amap2demo_markerlayer />)
.add('marker popup', () => <Amap2demo_markerPopup/>)
.add('高德地图2.0 clusterMarker图层', () => <Amap2demo_clustermarker />)
.add('高德地图2.0 instance实例', () => <Amap2demo_instance />)

1
typings.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module '@antv/l7';