style: demo style

This commit is contained in:
2912401452 2021-08-23 14:10:38 +08:00
parent af67a37aef
commit 5eb114079c
3 changed files with 80 additions and 73 deletions

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-component@2.5.9 beta
npm dist-tag add @antv/l7-core@2.5.5 beta npm dist-tag add @antv/l7-core@2.5.9 beta
npm dist-tag add @antv/l7@2.5.5 beta npm dist-tag add @antv/l7@2.5.9 beta
npm dist-tag add @antv/l7-layers@2.5.5 beta npm dist-tag add @antv/l7-layers@2.5.9 beta
npm dist-tag add @antv/l7-map@2.5.5 beta npm dist-tag add @antv/l7-map@2.5.9 beta
npm dist-tag add @antv/l7-maps@2.5.5 beta npm dist-tag add @antv/l7-maps@2.5.9 beta
npm dist-tag add @antv/l7-renderer@2.5.5 beta npm dist-tag add @antv/l7-renderer@2.5.9 beta
npm dist-tag add @antv/l7-scene@2.5.5 beta npm dist-tag add @antv/l7-scene@2.5.9 beta
npm dist-tag add @antv/l7-source@2.5.5 beta npm dist-tag add @antv/l7-source@2.5.9 beta
npm dist-tag add @antv/l7-three@2.5.5 beta npm dist-tag add @antv/l7-three@2.5.9 beta
npm dist-tag add @antv/l7-utils@2.5.5 beta npm dist-tag add @antv/l7-utils@2.5.9 beta

View File

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

View File

@ -1,6 +1,11 @@
// @ts-ignore // @ts-ignore
import { Scene } from '@antv/l7'; import { Scene } from '@antv/l7';
import { PolygonLayer, PointLayer, LineLayer, HeatmapLayer } from '@antv/l7-layers'; import {
PolygonLayer,
PointLayer,
LineLayer,
HeatmapLayer,
} from '@antv/l7-layers';
import { Map } from '@antv/l7-maps'; import { Map } from '@antv/l7-maps';
import * as React from 'react'; import * as React from 'react';
@ -45,19 +50,19 @@ export default class ScaleComponent extends React.Component {
{ {
lng: 121.107, lng: 121.107,
lat: 30.267069, lat: 30.267069,
} },
]; ];
let layer = new PointLayer() let layer = new PointLayer()
.source(originData, { .source(originData, {
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat',
}, },
}) })
.shape('circle') .shape('circle')
.color('rgba(255, 0, 0, 1.0)') .color('rgba(255, 0, 0, 1.0)')
.size(10) .size(10);
const polygondata = { const polygondata = {
type: 'FeatureCollection', type: 'FeatureCollection',
@ -137,28 +142,32 @@ export default class ScaleComponent extends React.Component {
}); });
let lineData = { let lineData = {
"type":"FeatureCollection", type: 'FeatureCollection',
"features":[ features: [
{ {
"type":"Feature","properties":{}, type: 'Feature',
"geometry": { properties: {},
"type": "MultiLineString", geometry: {
"coordinates":[ type: 'MultiLineString',
[ coordinates: [
[20,30], [
[150,30] [20, 30],
]]}}]} [150, 30],
],
const linelayer = new LineLayer() ],
.source(lineData) },
.size(8) },
.shape('line') ],
.color('rgb(20, 180, 90)') };
const linelayer = new LineLayer()
.source(lineData)
.size(8)
.shape('line')
.color('rgb(20, 180, 90)');
scene.on('loaded', () => { scene.on('loaded', () => {
console.log('loaded ') console.log('loaded ');
scene.addLayer(layer); scene.addLayer(layer);
scene.addLayer(linelayer); scene.addLayer(linelayer);
scene.addLayer(polygonlayer); scene.addLayer(polygonlayer);
@ -170,27 +179,25 @@ export default class ScaleComponent extends React.Component {
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
var heatlayer = new HeatmapLayer() var heatlayer = new HeatmapLayer()
.source(data, { .source(data, {
transforms: [ transforms: [
{ {
type: 'hexagon', type: 'hexagon',
size: 5 * 100000 size: 5 * 100000,
} },
] ],
}) })
.shape('circle') .shape('circle')
.active(false) .active(false)
.color('#aaa') .color('#aaa')
.style({ .style({
coverage: 0.7, coverage: 0.7,
angle: 0, angle: 0,
opacity: 1.0 opacity: 1.0,
}); });
console.log('add heatLayer') console.log('add heatLayer');
scene.addLayer(heatlayer); scene.addLayer(heatlayer);
}) });
// fetch( // fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', // 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',