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

Merge pull request #753 from antvis/shihui_dev 

Shihui dev
This commit is contained in:
YiQianYao 2021-08-31 15:49:31 +08:00 committed by GitHub
parent dade29c13a 2a57b49eaa
commit ac7b94d230
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 309 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
beta.sh
View File

@ -1,11 +1,11 @@
npm dist-tag add @antv/l7-component@2.5.5 beta
npm dist-tag add @antv/l7-core@2.5.5 beta
npm dist-tag add @antv/l7@2.5.5 beta
npm dist-tag add @antv/l7-layers@2.5.5 beta
npm dist-tag add @antv/l7-map@2.5.5 beta
npm dist-tag add @antv/l7-maps@2.5.5 beta
npm dist-tag add @antv/l7-renderer@2.5.5 beta
npm dist-tag add @antv/l7-scene@2.5.5 beta
npm dist-tag add @antv/l7-source@2.5.5 beta
npm dist-tag add @antv/l7-three@2.5.5 beta
npm dist-tag add @antv/l7-utils@2.5.5 beta
npm dist-tag add @antv/l7-component@2.5.9 beta
npm dist-tag add @antv/l7-core@2.5.9 beta
npm dist-tag add @antv/l7@2.5.9 beta
npm dist-tag add @antv/l7-layers@2.5.9 beta
npm dist-tag add @antv/l7-map@2.5.9 beta
npm dist-tag add @antv/l7-maps@2.5.9 beta
npm dist-tag add @antv/l7-renderer@2.5.9 beta
npm dist-tag add @antv/l7-scene@2.5.9 beta
npm dist-tag add @antv/l7-source@2.5.9 beta
npm dist-tag add @antv/l7-three@2.5.9 beta
npm dist-tag add @antv/l7-utils@2.5.9 beta

22
latest.sh
View File

@ -1,11 +1,11 @@
npm dist-tag add @antv/l7-component@2.5.5 latest
npm dist-tag add @antv/l7-core@2.5.5 latest
npm dist-tag add @antv/l7@2.5.5 latest
npm dist-tag add @antv/l7-layers@2.5.5 latest
npm dist-tag add @antv/l7-map@2.5.5 latest
npm dist-tag add @antv/l7-maps@2.5.5 latest
npm dist-tag add @antv/l7-renderer@2.5.5 latest
npm dist-tag add @antv/l7-scene@2.5.5 latest
npm dist-tag add @antv/l7-source@2.5.5 latest
npm dist-tag add @antv/l7-three@2.5.5 latest
npm dist-tag add @antv/l7-utils@2.5.5 latest
npm dist-tag add @antv/l7-component@2.5.8 latest
npm dist-tag add @antv/l7-core@2.5.8 latest
npm dist-tag add @antv/l7@2.5.8 latest
npm dist-tag add @antv/l7-layers@2.5.8 latest
npm dist-tag add @antv/l7-map@2.5.8 latest
npm dist-tag add @antv/l7-maps@2.5.8 latest
npm dist-tag add @antv/l7-renderer@2.5.8 latest
npm dist-tag add @antv/l7-scene@2.5.8 latest
npm dist-tag add @antv/l7-source@2.5.8 latest
npm dist-tag add @antv/l7-three@2.5.8 latest
npm dist-tag add @antv/l7-utils@2.5.8 latest

2
packages/l7/src/version.ts
View File

@ -1,2 +1,2 @@
const version = '2.5.7';
const version = '2.5.10';
export { version };

2
packages/map/src/utils/dom.ts
View File

@ -77,7 +77,9 @@ try {
passiveSupported = true;
},
});
// @ts-ignore
window.addEventListener('test', options, options);
// @ts-ignore
window.removeEventListener('test', options, options);
} catch (err) {
passiveSupported = false;

2
packages/renderer/package.json
View File

@ -29,7 +29,7 @@
"@antv/l7-core": "^2.5.10",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.10",
"l7regl": "^0.0.14",
"lodash": "^4.17.15",
"reflect-metadata": "^0.1.13"
},

280
stories/customMap/components/Map2.tsx Normal file
View File

@ -0,0 +1,280 @@
// @ts-ignore
import { Scene } from '@antv/l7';
import {
PolygonLayer,
PointLayer,
LineLayer,
HeatmapLayer,
} from '@antv/l7-layers';
import { Map } from '@antv/l7-maps';
import * as React from 'react';
export default class ScaleComponent extends React.Component {
private scene: Scene;
private el: HTMLCanvasElement;
public componentWillUnmount() {
this.scene.destroy();
}
public setCanvas() {
this.el.width = 400;
this.el.height = 300;
this.el.style.width = '300px';
this.el.style.height = '150px';
this.el.style.zIndex = '10';
this.el.style.position = 'absolute';
this.el.style.top = '0';
this.el.style.left = '0';
this.el.style.border = '1px solid';
}
public async componentDidMount() {
this.setCanvas();
const scene = new Scene({
id: 'map',
// canvas: this.el,
map: new Map({
hash: true,
center: [110.19382669582967, 30.258134],
pitch: 0,
zoom: 2,
}),
});
let originData = [
{
lng: 121.107846,
lat: 30.267069,
},
{
lng: 121.107,
lat: 30.267069,
},
];
let layer = new PointLayer()
.source(originData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color('rgba(255, 0, 0, 1.0)')
.size(10);
const polygondata = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[110.5224609375, 32.731840896865684],
[113.0712890625, 32.731840896865684],
[113.0712890625, 34.56085936708384],
[110.5224609375, 34.56085936708384],
[110.5224609375, 32.731840896865684],
],
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
[
[
[115.04882812499999, 34.379712580462204],
[114.9609375, 33.46810795527896],
[115.8837890625, 33.50475906922609],
[115.86181640625001, 34.379712580462204],
[115.04882812499999, 34.379712580462204],
],
],
],
},
},
{
type: 'Feature',
properties: {
testOpacity: 0.8,
},
geometry: {
type: 'Polygon',
coordinates: [
[
[113.8623046875, 30.031055426540206],
[116.3232421875, 30.031055426540206],
[116.3232421875, 31.090574094954192],
[113.8623046875, 31.090574094954192],
[113.8623046875, 30.031055426540206],
],
[
[117.26806640625, 32.13840869677249],
[118.36669921875, 32.13840869677249],
[118.36669921875, 32.47269502206151],
[117.26806640625, 32.47269502206151],
[117.26806640625, 32.13840869677249],
],
],
},
},
],
};
const polygonlayer = new PolygonLayer({
// autoFit: true,
})
.source(polygondata)
.shape('fill')
.color('red')
.style({
opacity: 1.0,
});
let lineData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'MultiLineString',
coordinates: [
[
[20, 30],
[150, 30],
],
],
},
},
],
};
const linelayer = new LineLayer()
.source(lineData)
.size(8)
.shape('line')
.color('rgb(20, 180, 90)');
scene.on('loaded', () => {
console.log('loaded ');
scene.addLayer(layer);
scene.addLayer(linelayer);
scene.addLayer(polygonlayer);
});
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/3dadb1f5-8f54-4449-8206-72db6e142c40.json',
)
.then((res) => res.json())
.then((data) => {
var heatlayer = new HeatmapLayer()
.source(data, {
transforms: [
{
type: 'hexagon',
size: 5 * 100000,
},
],
})
.shape('circle')
.active(false)
.color('#aaa')
.style({
coverage: 0.7,
angle: 0,
opacity: 1.0,
});
console.log('add heatLayer');
scene.addLayer(heatlayer);
});
// fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
// )
// .then((res) => res.json())
// .then((data) => {
// const textLayer = new PointLayer({})
// .source(
// [
// {
// lng: 120.5,
// lat: 31.3,
// iconType: 'cloud',
// iconColor: '#F0F8FF',
// weather: '多云 - 今日适宜出门',
// textOffset: [-40, 0],
// },
// ],
// {
// parser: {
// type: 'json',
// x: 'lng',
// y: 'lat',
// },
// },
// )
// .shape('weather', 'text')
// .size(16)
// .color('#f00')
// .style({
// textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
// textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
// spacing: 2, // 字符间距
// padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
// fontFamily: 'Times New Roman',
// textAllowOverlap: true,
// });
// scene.addLayer(textLayer);
// const layer = new PolygonLayer({
// name: '01',
// });
// layer
// .source(data)
// .size('name', [0, 10000, 50000, 30000, 100000])
// .color('name', [
// '#2E8AE6',
// '#69D1AB',
// '#DAF291',
// '#FFD591',
// '#FF7A45',
// '#CF1D49',
// ])
// .shape('fill')
// .select(true)
// .style({
// opacity: 1.0,
// });
// scene.addLayer(layer);
// });
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
<canvas ref={(el) => (this.el = el as HTMLCanvasElement)}></canvas>
</div>
);
}
}

4
stories/customMap/map.stories.tsx
View File

@ -2,5 +2,7 @@ import { storiesOf } from '@storybook/react';
import * as React from 'react';
import Map from './components/Map';
import Map2 from './components/Map2';
// @ts-ignore
storiesOf('自定义地图', module).add('地图', () => <Map />);
storiesOf('自定义地图', module).add('地图', () => <Map />)
.add('地图2', () => <Map2 />);