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

feat: 案例demo修改

This commit is contained in:
2912401452 2021-05-31 20:04:34 +08:00
parent 6f06a381ec
commit 9dd3993519
8 changed files with 46 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/point/text/demo/iconfont.js
View File

@ -4,10 +4,11 @@ import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
center: [ 115, 30 ], center: [ 110, 30 ],
pitch: 0, pitch: 0,
style: 'light', // style: 'light',
zoom: 6 style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9',
zoom: 5
}) })
}); });
const fontFamily = 'iconfont'; const fontFamily = 'iconfont';
@ -31,7 +32,7 @@ scene.on('loaded', () => {
}) })
.shape('icon', 'text') .shape('icon', 'text')
.size(20) .size(20)
.color('w', [ '#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac' ]) .color('w', ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99'])
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]

39
examples/point/text/demo/iconfonts.js
View File

@ -12,13 +12,20 @@ const scene = new Scene({
viewMode: '2D' viewMode: '2D'
}) })
}); });
const dataColor = {
bigRainBC: "#285A8C",
middleRainBC: "#326EA0",
smallRainBC: "#4678AA",
sunBC: "#00BFFF",
cloudBC: "#1E90FF"
}
const originData = [ const originData = [
{ {
lng: 121.7, lng: 121.7,
lat: 30.6, lat: 30.6,
iconType: 'hugeRain', iconType: 'hugeRain',
iconColor: '#4678D2', iconColor: '#4678D2',
backgoundColor: '#285A8C', backgoundColor: dataColor.bigRainBC,
temperature: '20℃', temperature: '20℃',
weather: '大雨' weather: '大雨'
}, },
@ -27,7 +34,7 @@ const originData = [
lat: 30.0, lat: 30.0,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: '#6EA0FF', iconColor: '#6EA0FF',
backgoundColor: '#4678AA', backgoundColor: dataColor.smallRainBC,
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨'
}, },
@ -36,7 +43,7 @@ const originData = [
lat: 30.2, lat: 30.2,
iconType: 'sun', iconType: 'sun',
iconColor: '#FFA500', iconColor: '#FFA500',
backgoundColor: '#00BFFF', backgoundColor: dataColor.sunBC,
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗'
}, },
@ -45,7 +52,7 @@ const originData = [
lat: 30.6, lat: 30.6,
iconType: 'sun', iconType: 'sun',
iconColor: '#FFA500', iconColor: '#FFA500',
backgoundColor: '#00BFFF', backgoundColor: dataColor.sunBC,
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗'
}, },
@ -54,7 +61,7 @@ const originData = [
lat: 30, lat: 30,
iconType: 'sun', iconType: 'sun',
iconColor: '#FFA500', iconColor: '#FFA500',
backgoundColor: '#00BFFF', backgoundColor: dataColor.sunBC,
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗'
}, },
@ -63,7 +70,7 @@ const originData = [
lat: 30.5, lat: 30.5,
iconType: 'sun', iconType: 'sun',
iconColor: '#FFA500', iconColor: '#FFA500',
backgoundColor: '#00BFFF', backgoundColor: dataColor.sunBC,
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗'
}, },
@ -72,7 +79,7 @@ const originData = [
lat: 31.4, lat: 31.4,
iconType: 'cloud', iconType: 'cloud',
iconColor: '#F0F8FF', iconColor: '#F0F8FF',
backgoundColor: '#1E90FF', backgoundColor: dataColor.cloudBC,
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -81,7 +88,7 @@ const originData = [
lat: 31, lat: 31,
iconType: 'cloud', iconType: 'cloud',
iconColor: '#F0F8FF', iconColor: '#F0F8FF',
backgoundColor: '#1E90FF', backgoundColor: dataColor.cloudBC,
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -90,7 +97,7 @@ const originData = [
lat: 30.8, lat: 30.8,
iconType: 'cloud', iconType: 'cloud',
iconColor: '#F0F8FF', iconColor: '#F0F8FF',
backgoundColor: '#1E90FF', backgoundColor: dataColor.cloudBC,
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -99,7 +106,7 @@ const originData = [
lat: 31.3, lat: 31.3,
iconType: 'cloud', iconType: 'cloud',
iconColor: '#F0F8FF', iconColor: '#F0F8FF',
backgoundColor: '#1E90FF', backgoundColor: dataColor.cloudBC,
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -108,7 +115,7 @@ const originData = [
lat: 30.2, lat: 30.2,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: '#6EA0FF', iconColor: '#6EA0FF',
backgoundColor: '#4678AA', backgoundColor: dataColor.smallRainBC,
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨'
}, },
@ -117,7 +124,7 @@ const originData = [
lat: 30.5, lat: 30.5,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: '#6EA0FF', iconColor: '#6EA0FF',
backgoundColor: '#4678AA', backgoundColor: dataColor.smallRainBC,
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨'
}, },
@ -126,7 +133,7 @@ const originData = [
lat: 30, lat: 30,
iconType: 'middleRain', iconType: 'middleRain',
iconColor: '#6495ED', iconColor: '#6495ED',
backgoundColor: '#326EA0', backgoundColor: dataColor.middleRainBC,
temperature: '24℃', temperature: '24℃',
weather: '中雨' weather: '中雨'
}, },
@ -135,7 +142,7 @@ const originData = [
lat: 29.7, lat: 29.7,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: '#6EA0FF', iconColor: '#6EA0FF',
backgoundColor: '#4678AA', backgoundColor: dataColor.smallRainBC,
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨'
}, },
@ -144,7 +151,7 @@ const originData = [
lat: 29.8, lat: 29.8,
iconType: 'middleRain', iconType: 'middleRain',
iconColor: '#6495ED', iconColor: '#6495ED',
backgoundColor: '#326EA0', backgoundColor: dataColor.middleRainBC,
temperature: '24℃', temperature: '24℃',
weather: '中雨' weather: '中雨'
}, },
@ -153,7 +160,7 @@ const originData = [
lat: 30, lat: 30,
iconType: 'hugeRain', iconType: 'hugeRain',
iconColor: '#4678D2', iconColor: '#4678D2',
backgoundColor: '#285A8C', backgoundColor: dataColor.bigRainBC,
temperature: '20℃', temperature: '20℃',
weather: '大雨' weather: '大雨'
} }

16
examples/point/text/demo/meta.json
View File

@ -9,30 +9,30 @@
"title": "点数据标注", "title": "点数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ"
}, },
{
"filename": "iconfont.js",
"title": "图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*jnPwQZsY-bEAAAAAAAAAAAAAARQnAQ"
},
{ {
"filename": "polygon_text.js", "filename": "polygon_text.js",
"title": "面数据标注", "title": "面数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ"
}, },
{
"filename": "iconfont.js",
"title": "图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*8PfqQ6-lQ0EAAAAAAAAAAAAAARQnAQ"
},
{ {
"filename": "iconfonts.js", "filename": "iconfonts.js",
"title": "天气图标标注", "title": "天气图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*AouOQ4VYTJMAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*JAhxTaabap4AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "temperture.js", "filename": "temperture.js",
"title": "气温图标标注", "title": "气温图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*spetRL1JnfsAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*36umQaf_hVEAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "updown.js", "filename": "updown.js",
"title": "走势图标标注", "title": "走势图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*5E4DR4H8qDQAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*P5plS5ZsYZkAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

4
examples/point/text/demo/temperture.js
View File

@ -43,9 +43,9 @@ scene.on('loaded', () => {
}) })
.source(data) .source(data)
.shape('fill') .shape('fill')
.color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ]) .color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f'])
.style({ .style({
opacity: 0.5 opacity: 0.6
}); });
scene.addLayer(filllayer); scene.addLayer(filllayer);

4
examples/point/text/demo/updown.js
View File

@ -30,9 +30,9 @@ scene.on('loaded', () => {
}) })
.source(data) .source(data)
.shape('fill') .shape('fill')
.color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ]) .color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f'])
.style({ .style({
opacity: 0.5 opacity: 0.6
}); });
scene.addLayer(filllayer); scene.addLayer(filllayer);

5
stories/3D_Model/Components/amap_three.tsx
View File

@ -1,5 +1,5 @@
import { Scene } from '@antv/l7'; import { Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps'; import { GaodeMap, Mapbox, GaodeMapV1 } from '@antv/l7-maps';
import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as React from 'react'; import * as React from 'react';
// import { DirectionalLight, Scene as ThreeScene } from 'three'; // import { DirectionalLight, Scene as ThreeScene } from 'three';
@ -23,7 +23,8 @@ export default class GlTFThreeJSDemo extends React.Component {
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ // map: new GaodeMap({
map: new GaodeMapV1({
center: [111.4453125, 32.84267363195431], center: [111.4453125, 32.84267363195431],
pitch: 45, pitch: 45,
rotation: 30, rotation: 30,

2
stories/3D_Model/model.stories.tsx
View File

@ -6,5 +6,5 @@ import ThreeRender from './Components/threeRender';
storiesOf('3D 模型', module) storiesOf('3D 模型', module)
.add('ThreeJS Render', () => <ThreeRender />, {}) .add('ThreeJS Render', () => <ThreeRender />, {})
.add('高德模型', () => <AMapModel />, {}) .add('高德模型1.x', () => <AMapModel />, {})
.add('Mapbox模型', () => <MapboxModel />, {}); .add('Mapbox模型', () => <MapboxModel />, {});

4
stories/Map/components/mapCenter.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore // @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps'; import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import * as React from 'react'; import * as React from 'react';
export default class GaodeMapComponent extends React.Component { export default class GaodeMapComponent extends React.Component {
@ -14,7 +14,7 @@ export default class GaodeMapComponent extends React.Component {
public async componentDidMount() { public async componentDidMount() {
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMapV1({
center: [121.107846, 30.267069], center: [121.107846, 30.267069],
pitch: 0, pitch: 0,
style: 'normal', style: 'normal',