mirror of https://gitee.com/antv-l7/antv-l7
feat: 案例demo修改
This commit is contained in:
parent
6f06a381ec
commit
9dd3993519
|
@ -4,10 +4,11 @@ import { GaodeMap } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 115, 30 ],
|
||||
center: [ 110, 30 ],
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
zoom: 6
|
||||
// style: 'light',
|
||||
style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9',
|
||||
zoom: 5
|
||||
})
|
||||
});
|
||||
const fontFamily = 'iconfont';
|
||||
|
@ -31,7 +32,7 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.shape('icon', 'text')
|
||||
.size(20)
|
||||
.color('w', [ '#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac' ])
|
||||
.color('w', ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99'])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
|
|
|
@ -12,13 +12,20 @@ const scene = new Scene({
|
|||
viewMode: '2D'
|
||||
})
|
||||
});
|
||||
const dataColor = {
|
||||
bigRainBC: "#285A8C",
|
||||
middleRainBC: "#326EA0",
|
||||
smallRainBC: "#4678AA",
|
||||
sunBC: "#00BFFF",
|
||||
cloudBC: "#1E90FF"
|
||||
}
|
||||
const originData = [
|
||||
{
|
||||
lng: 121.7,
|
||||
lat: 30.6,
|
||||
iconType: 'hugeRain',
|
||||
iconColor: '#4678D2',
|
||||
backgoundColor: '#285A8C',
|
||||
backgoundColor: dataColor.bigRainBC,
|
||||
temperature: '20℃',
|
||||
weather: '大雨'
|
||||
},
|
||||
|
@ -27,7 +34,7 @@ const originData = [
|
|||
lat: 30.0,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
|
@ -36,7 +43,7 @@ const originData = [
|
|||
lat: 30.2,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
|
@ -45,7 +52,7 @@ const originData = [
|
|||
lat: 30.6,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
|
@ -54,7 +61,7 @@ const originData = [
|
|||
lat: 30,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
|
@ -63,7 +70,7 @@ const originData = [
|
|||
lat: 30.5,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
|
@ -72,7 +79,7 @@ const originData = [
|
|||
lat: 31.4,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
@ -81,7 +88,7 @@ const originData = [
|
|||
lat: 31,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
@ -90,7 +97,7 @@ const originData = [
|
|||
lat: 30.8,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
@ -99,7 +106,7 @@ const originData = [
|
|||
lat: 31.3,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
@ -108,7 +115,7 @@ const originData = [
|
|||
lat: 30.2,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
|
@ -117,7 +124,7 @@ const originData = [
|
|||
lat: 30.5,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
|
@ -126,7 +133,7 @@ const originData = [
|
|||
lat: 30,
|
||||
iconType: 'middleRain',
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: '#326EA0',
|
||||
backgoundColor: dataColor.middleRainBC,
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
},
|
||||
|
@ -135,7 +142,7 @@ const originData = [
|
|||
lat: 29.7,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
|
@ -144,7 +151,7 @@ const originData = [
|
|||
lat: 29.8,
|
||||
iconType: 'middleRain',
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: '#326EA0',
|
||||
backgoundColor: dataColor.middleRainBC,
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
},
|
||||
|
@ -153,7 +160,7 @@ const originData = [
|
|||
lat: 30,
|
||||
iconType: 'hugeRain',
|
||||
iconColor: '#4678D2',
|
||||
backgoundColor: '#285A8C',
|
||||
backgoundColor: dataColor.bigRainBC,
|
||||
temperature: '20℃',
|
||||
weather: '大雨'
|
||||
}
|
||||
|
|
|
@ -9,30 +9,30 @@
|
|||
"title": "点数据标注",
|
||||
"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",
|
||||
"title": "面数据标注",
|
||||
"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",
|
||||
"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",
|
||||
"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",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -43,9 +43,9 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ])
|
||||
.color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f'])
|
||||
.style({
|
||||
opacity: 0.5
|
||||
opacity: 0.6
|
||||
});
|
||||
scene.addLayer(filllayer);
|
||||
|
||||
|
|
|
@ -30,9 +30,9 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ])
|
||||
.color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f'])
|
||||
.style({
|
||||
opacity: 0.5
|
||||
opacity: 0.6
|
||||
});
|
||||
scene.addLayer(filllayer);
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
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 * as React from 'react';
|
||||
// import { DirectionalLight, Scene as ThreeScene } from 'three';
|
||||
|
@ -23,7 +23,8 @@ export default class GlTFThreeJSDemo extends React.Component {
|
|||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
// map: new GaodeMap({
|
||||
map: new GaodeMapV1({
|
||||
center: [111.4453125, 32.84267363195431],
|
||||
pitch: 45,
|
||||
rotation: 30,
|
||||
|
|
|
@ -6,5 +6,5 @@ import ThreeRender from './Components/threeRender';
|
|||
|
||||
storiesOf('3D 模型', module)
|
||||
.add('ThreeJS Render', () => <ThreeRender />, {})
|
||||
.add('高德模型', () => <AMapModel />, {})
|
||||
.add('高德模型1.x', () => <AMapModel />, {})
|
||||
.add('Mapbox模型', () => <MapboxModel />, {});
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// @ts-ignore
|
||||
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';
|
||||
|
||||
export default class GaodeMapComponent extends React.Component {
|
||||
|
@ -14,7 +14,7 @@ export default class GaodeMapComponent extends React.Component {
|
|||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
map: new GaodeMapV1({
|
||||
center: [121.107846, 30.267069],
|
||||
pitch: 0,
|
||||
style: 'normal',
|
||||
|
|
Loading…
Reference in New Issue