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

View File

@ -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 ], // 文本相对锚点的偏移量 [水平, 垂直]

View File

@ -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: '大雨'
}

View File

@ -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"
}
]
}

View File

@ -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);

View File

@ -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);

View File

@ -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,

View File

@ -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 />, {});

View File

@ -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',