docs: 完善官网 demo

This commit is contained in:
shihui 2022-01-11 20:39:02 +08:00
parent 98a37fd5ac
commit 8794b1177e
19 changed files with 550 additions and 268 deletions

View File

@ -9,11 +9,6 @@
"title": "高德地图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*1_W2SIR8swwAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "amap_car.js",
"title": "高德地图 car",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*C3JRTI_qlxEAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "mapbox_ant.js",
"title": "mapbox 地图",

View File

@ -1,4 +1,4 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as THREE from 'three';
@ -60,10 +60,10 @@ function travel(
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 112, 35.39847 ],
pitch: 45,
rotation: 30,
zoom: 5
center: [ 110, 35.39847 ],
pitch: 20,
style: 'dark',
zoom: 3
})
});
@ -75,28 +75,46 @@ scene.on('loaded', () => {
)
.then(d => d.json())
.then(data => {
const polygonlayer = new PolygonLayer({
name: '01',
zIndex: -1
})
const textLayer = new PointLayer({ zIndex: 1 })
.source(data)
.color('name', [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49'
])
.color('rgb(22,119,255)')
.size(12)
.shape('name', 'text');
const polygonlayer = new PolygonLayer({})
.source(data)
.color('rgb(22,119,255)')
.shape('fill')
.select(true)
.active({
enable: true,
blend: 0.5
})
.style({
opacity: 1.0
opacity: 0.6,
opacityLinear: {
enable: true,
dir: 'out' // in - out
}
});
const linelayer = new LineLayer({ })
.source(data)
.color('rgb(72,169,255)')
.shape('line')
.size(0.5)
.style({
opacity: 0.6
});
scene.addLayer(polygonlayer);
scene.addLayer(textLayer);
scene.addLayer(linelayer);
});
const threeJSLayer = new ThreeLayer({
zIndex: 2,
enableMultiPassRenderer: false,
onAddMeshes: (threeScene, layer) => {
// 添加光
@ -149,7 +167,7 @@ scene.on('loaded', () => {
const points = curve.getPoints(200);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const material = new THREE.LineBasicMaterial({ color: new THREE.Color('rgb(22,119,255)') });
const line = new THREE.LineLoop(geometry, material);
threeScene.add(line);
@ -162,7 +180,7 @@ scene.on('loaded', () => {
gltf => {
// 根据 GeoJSON 数据放置模型
const gltfScene = gltf.scene.clone();
setDouble(gltfScene);
setMaterial(gltfScene);
layer.getSource().data.dataArray.forEach(() => {
layer.adjustMeshToMap(gltfScene);
gltfScene.scale.set(500000, 500000, 500000);
@ -217,9 +235,9 @@ scene.on('loaded', () => {
scene.addLayer(threeJSLayer);
});
function setDouble(object) {
function setMaterial(object) {
if (object.children && object.children.length && object.children.length > 0) {
object.children.map(child => setDouble(child));
object.children.map(child => setMaterial(child));
} else if (object.material) {
object.material.side = THREE.DoubleSide;
}

View File

@ -1,31 +0,0 @@
import { Scene, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 16,
style: 'dark'
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer()
.source(data)
.size(1.5)
.shape('line')
.color('#25d8b7')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间,延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});
});

View File

@ -1,4 +1,4 @@
import { Scene, PolygonLayer, PointLayer, LineLayer } from '@antv/l7';
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
@ -14,55 +14,14 @@ const scene = new Scene({
});
scene.on('loaded', () => {
scene.addImage(
'westLakeBuilding',
'https://gw.alipayobjects.com/zos/bmw-prod/8c3f6415-c1ca-4f7e-8ac6-89571ac75309.svg'
);
scene.addImage(
'arrow',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg'
);
scene.addImage(
'shop',
'https://gw.alipayobjects.com/zos/bmw-prod/238e7c7c-c26c-454c-9341-35d466c4b991.svg'
);
scene.addImage(
'hospital',
'https://gw.alipayobjects.com/zos/bmw-prod/fd08bf28-f73e-4b9c-ba8d-2c73d4fca6dc.svg'
);
scene.addImage(
'westlake',
'https://gw.alipayobjects.com/zos/bmw-prod/7b011298-454d-431b-9637-ab23a752e731.svg'
);
scene.addImage(
'ship',
'https://gw.alipayobjects.com/zos/bmw-prod/104cfca2-f3c5-49e8-b084-d339f4ba1adc.svg'
);
scene.addImage(
'travel',
'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg'
);
scene.addImage(
'pavilion',
'https://gw.alipayobjects.com/zos/bmw-prod/8839795d-43d9-46c5-a5b1-95bf9a1146a0.svg'
);
scene.addImage(
'museum',
'https://gw.alipayobjects.com/zos/bmw-prod/5436a335-8ec3-40e4-9c93-16d0f844b0e7.svg'
);
scene.addImage(
'bridge',
'https://gw.alipayobjects.com/zos/bmw-prod/b88e6f2f-ad12-4980-969e-3849cbcd28c6.svg'
);
scene.addImage(
'school',
'https://gw.alipayobjects.com/zos/bmw-prod/948e665d-ab1e-4010-b75a-236057837bec.svg'
);
fetch('https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json')
.then(data => data.json())
.then(({ lakeBorderData, lakeData, landData, westLakePoiData, poiData }) => {
.then(({ lakeBorderData, lakeData, landData }) => {
const lakeLayer = new PolygonLayer()
.source(lakeData)
.shape('fill')
@ -98,34 +57,10 @@ scene.on('loaded', () => {
}
});
const westLakePoiLayer = new PointLayer({ zIndex: 1 })
.source(westLakePoiData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('type', v => v)
.size(40);
const poiLayer = new PointLayer({ zIndex: 1 })
.source(
poiData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('type', v => v)
.size(10);
scene.addLayer(lakeLayer);
scene.addLayer(lakeBorderLayer);
scene.addLayer(landLayer);
scene.addLayer(westLakePoiLayer);
scene.addLayer(poiLayer);
});
@ -135,20 +70,12 @@ scene.on('loaded', () => {
.then(res => res.json())
.then(data => {
const colors = [
'#66c2a4',
'#2ca25f',
'#006d2c'
];
// @ts-ignore
const layer = new LineLayer({})
.source(data)
.size(2.5)
.size(3)
.shape('line')
.texture('arrow')
.color('', () => {
return colors[Math.floor(Math.random() * colors.length)];
})
.color('rgb(22,119,255)')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间,延时
@ -157,7 +84,7 @@ scene.on('loaded', () => {
.style({
opacity: 0.6,
lineTexture: true, // 开启线的贴图功能
iconStep: 20, // 设置贴图纹理的间距
iconStep: 10, // 设置贴图纹理的间距
borderWidth: 0.4, // 默认文 0最大有效值为 0.5
borderColor: '#fff' // 默认为 #ccc
});

View File

@ -1,63 +0,0 @@
import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
center: [ 120.173104, 30.244072 ],
pitch: 70.41138037735848,
zoom: 17.18,
rotation: 2.24, // 358.7459759480504
minZoom: 14
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
)
.then(res => res.json())
.then(data => {
const layer = new CityBuildingLayer(
{
zIndex: 0
}
);
layer
.source(data)
.size('floor', [ 100, 500 ])
.color('rgba(242,246,250,0.5)')
.animate({
enable: true
})
.style({
opacity: 1.0,
baseColor: 'rgba(36,16,63,0.3)',
windowColor: '#0e0220',
brightColor: '#08faee'
});
scene.addLayer(layer);
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({
zIndex: 0
})
.source(data)
.size(1)
.shape('line')
.color('#ff893a')
.animate({
interval: 1, // 间隔
duration: 2, // 持续时间,延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});
});

View File

@ -1,14 +1,13 @@
import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
center: [ 120.145319, 30.238915 ],
pitch: 45,
zoom: 12.91,
viewMode: '3D'
center: [ 120.145, 30.238915 ],
pitch: 60,
zoom: 13.2
})
});
fetch(
@ -42,6 +41,57 @@ fetch(
scene.addLayer(pointLayer);
});
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json'
)
.then(data => data.json())
.then(
({
lakeBorderData,
lakeData,
landData
}) => {
const lakeLayer = new PolygonLayer()
.source(lakeData)
.shape('fill')
.color('#1E90FF')
.style({
opacity: 0.4,
opacityLinear: {
enable: true,
dir: 'out' // in - out
}
});
const landLayer = new PolygonLayer()
.source(landData)
.shape('fill')
.color('#3CB371')
.style({
opacity: 0.4,
opacityLinear: {
enable: true,
dir: 'in' // in - out
}
});
const lakeBorderLayer = new PolygonLayer()
.source(lakeBorderData)
.shape('fill')
.color('#ccc')
.style({
opacity: 0.5,
opacityLinear: {
enable: true,
dir: 'in' // in - out
}
});
scene.addLayer(lakeLayer);
scene.addLayer(lakeBorderLayer);
scene.addLayer(landLayer);
}
);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)

View File

@ -0,0 +1,320 @@
import { Scene, PointLayer, EarthLayer } from '@antv/l7';
import { Earth } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Earth({})
});
const d = [
{ lng: 121.61865234375, lat: 25.29437116258816 },
{ lng: 121.058349609375, lat: 25.015928763367857 },
{ lng: 120.7177734375, lat: 24.587090339209634 },
{ lng: 120.28930664062499, lat: 23.936054914599815 },
{ lng: 120.12451171875, lat: 23.553916518321625 },
{ lng: 120.08056640625, lat: 23.120153621695614 },
{ lng: 120.234375, lat: 22.867317960075614 },
{ lng: 120.43212890625, lat: 22.52270570348246 },
{ lng: 120.65185546875, lat: 22.370396344320053 },
{ lng: 120.750732421875, lat: 21.922663209325922 },
{ lng: 120.948486328125, lat: 22.268764039073968 },
{ lng: 121.124267578125, lat: 22.806567100271522 },
{ lng: 121.56372070312499, lat: 23.915970370510227 },
{ lng: 121.88232421875, lat: 24.557116164309626 },
{ lng: 121.95922851562501, lat: 25.075648445630527 },
{ lng: 109.97314453125, lat: 20.076570104545173 },
{ lng: 108.896484375, lat: 19.663280219987662 },
{ lng: 108.61083984375, lat: 18.979025953255267 },
{ lng: 108.80859375, lat: 18.47960905583197 },
{ lng: 109.599609375, lat: 18.35452552912664 },
{ lng: 110.32470703125, lat: 18.771115062337024 },
{ lng: 111.005859375, lat: 19.78738018198621 },
{ lng: 127.657407, lat: 49.76027 },
{ lng: 129.397818, lat: 49.4406 },
{ lng: 130.582293, lat: 48.729687 },
{ lng: 130.987282, lat: 47.790132 },
{ lng: 132.506672, lat: 47.78897 },
{ lng: 133.373596, lat: 48.183442 },
{ lng: 135.026311, lat: 48.47823 },
{ lng: 134.500814, lat: 47.57844 },
{ lng: 134.112362, lat: 47.212467 },
{ lng: 133.769644, lat: 46.116927 },
{ lng: 133.097127, lat: 45.144066 },
{ lng: 131.883454, lat: 45.321162 },
{ lng: 131.025212, lat: 44.967953 },
{ lng: 131.288555, lat: 44.11152 },
{ lng: 131.144688, lat: 42.92999 },
{ lng: 130.633866, lat: 42.903015 },
{ lng: 130.640016, lat: 42.395009 },
{ lng: 129.994267, lat: 42.985387 },
{ lng: 129.596669, lat: 42.424982 },
{ lng: 128.052215, lat: 41.994285 },
{ lng: 128.208433, lat: 41.466772 },
{ lng: 127.343783, lat: 41.503152 },
{ lng: 126.869083, lat: 41.816569 },
{ lng: 126.182045, lat: 41.107336 },
{ lng: 125.079942, lat: 40.569824 },
{ lng: 124.265625, lat: 39.928493 },
{ lng: 122.86757, lat: 39.637788 },
{ lng: 122.131388, lat: 39.170452 },
{ lng: 121.054554, lat: 38.897471 },
{ lng: 121.585995, lat: 39.360854 },
{ lng: 121.376757, lat: 39.750261 },
{ lng: 122.168595, lat: 40.422443 },
{ lng: 121.640359, lat: 40.94639 },
{ lng: 120.768629, lat: 40.593388 },
{ lng: 119.639602, lat: 39.898056 },
{ lng: 119.023464, lat: 39.252333 },
{ lng: 118.042749, lat: 39.204274 },
{ lng: 117.532702, lat: 38.737636 },
{ lng: 118.059699, lat: 38.061476 },
{ lng: 118.87815, lat: 37.897325 },
{ lng: 118.911636, lat: 37.448464 },
{ lng: 119.702802, lat: 37.156389 },
{ lng: 120.823457, lat: 37.870428 },
{ lng: 121.711259, lat: 37.481123 },
{ lng: 122.357937, lat: 37.454484 },
{ lng: 122.519995, lat: 36.930614 },
{ lng: 121.104164, lat: 36.651329 },
{ lng: 120.637009, lat: 36.11144 },
{ lng: 119.664562, lat: 35.609791 },
{ lng: 119.151208, lat: 34.909859 },
{ lng: 120.227525, lat: 34.360332 },
{ lng: 120.620369, lat: 33.376723 },
{ lng: 121.229014, lat: 32.460319 },
{ lng: 121.908146, lat: 31.692174 },
{ lng: 121.891919, lat: 30.949352 },
{ lng: 121.264257, lat: 30.676267 },
{ lng: 121.503519, lat: 30.142915 },
{ lng: 122.092114, lat: 29.83252 },
{ lng: 121.938428, lat: 29.018022 },
{ lng: 121.684439, lat: 28.225513 },
{ lng: 121.125661, lat: 28.135673 },
{ lng: 120.395473, lat: 27.053207 },
{ lng: 119.585497, lat: 25.740781 },
{ lng: 118.656871, lat: 24.547391 },
{ lng: 117.281606, lat: 23.624501 },
{ lng: 115.890735, lat: 22.782873 },
{ lng: 114.763827, lat: 22.668074 },
{ lng: 114.152547, lat: 22.22376 },
{ lng: 113.80678, lat: 22.54834 },
{ lng: 113.241078, lat: 22.051367 },
{ lng: 111.843592, lat: 21.550494 },
{ lng: 110.785466, lat: 21.397144 },
{ lng: 110.444039, lat: 20.341033 },
{ lng: 109.889861, lat: 20.282457 },
{ lng: 109.627655, lat: 21.008227 },
{ lng: 109.864488, lat: 21.395051 },
{ lng: 108.522813, lat: 21.715212 },
{ lng: 108.05018, lat: 21.55238 },
{ lng: 107.04342, lat: 21.811899 },
{ lng: 106.567273, lat: 22.218205 },
{ lng: 106.725403, lat: 22.794268 },
{ lng: 105.811247, lat: 22.976892 },
{ lng: 105.329209, lat: 23.352063 },
{ lng: 104.476858, lat: 22.81915 },
{ lng: 103.504515, lat: 22.703757 },
{ lng: 102.706992, lat: 22.708795 },
{ lng: 102.170436, lat: 22.464753 },
{ lng: 101.652018, lat: 22.318199 },
{ lng: 101.80312, lat: 21.174367 },
{ lng: 101.270026, lat: 21.201652 },
{ lng: 101.180005, lat: 21.436573 },
{ lng: 101.150033, lat: 21.849984 },
{ lng: 100.416538, lat: 21.558839 },
{ lng: 99.983489, lat: 21.742937 },
{ lng: 99.240899, lat: 22.118314 },
{ lng: 99.531992, lat: 22.949039 },
{ lng: 98.898749, lat: 23.142722 },
{ lng: 98.660262, lat: 24.063286 },
{ lng: 97.60472, lat: 23.897405 },
{ lng: 97.724609, lat: 25.083637 },
{ lng: 98.671838, lat: 25.918703 },
{ lng: 98.712094, lat: 26.743536 },
{ lng: 98.68269, lat: 27.508812 },
{ lng: 98.246231, lat: 27.747221 },
{ lng: 97.911988, lat: 28.335945 },
{ lng: 97.327114, lat: 28.261583 },
{ lng: 96.248833, lat: 28.411031 },
{ lng: 96.586591, lat: 28.83098 },
{ lng: 96.117679, lat: 29.452802 },
{ lng: 95.404802, lat: 29.031717 },
{ lng: 94.56599, lat: 29.277438 },
{ lng: 93.413348, lat: 28.640629 },
{ lng: 92.503119, lat: 27.896876 },
{ lng: 91.696657, lat: 27.771742 },
{ lng: 91.258854, lat: 28.040614 },
{ lng: 90.730514, lat: 28.064954 },
{ lng: 90.015829, lat: 28.296439 },
{ lng: 89.47581, lat: 28.042759 },
{ lng: 88.814248, lat: 27.299316 },
{ lng: 88.730326, lat: 28.086865 },
{ lng: 88.120441, lat: 27.876542 },
{ lng: 86.954517, lat: 27.974262 },
{ lng: 85.82332, lat: 28.203576 },
{ lng: 85.011638, lat: 28.642774 },
{ lng: 84.23458, lat: 28.839894 },
{ lng: 83.898993, lat: 29.320226 },
{ lng: 83.337115, lat: 29.463732 },
{ lng: 82.327513, lat: 30.115268 },
{ lng: 81.525804, lat: 30.422717 },
{ lng: 81.111256, lat: 30.183481 },
{ lng: 79.721367, lat: 30.882715 },
{ lng: 78.738894, lat: 31.515906 },
{ lng: 78.458446, lat: 32.618164 },
{ lng: 79.176129, lat: 32.48378 },
{ lng: 79.208892, lat: 32.994395 },
{ lng: 78.811086, lat: 33.506198 },
{ lng: 78.912269, lat: 34.321936 },
{ lng: 77.837451, lat: 35.49401 },
{ lng: 76.192848, lat: 35.898403 },
{ lng: 75.896897, lat: 36.666806 },
{ lng: 75.158028, lat: 37.133031 },
{ lng: 74.980002, lat: 37.41999 },
{ lng: 74.829986, lat: 37.990007 },
{ lng: 74.864816, lat: 38.378846 },
{ lng: 74.257514, lat: 38.606507 },
{ lng: 73.928852, lat: 38.505815 },
{ lng: 73.675379, lat: 39.431237 },
{ lng: 73.960013, lat: 39.660008 },
{ lng: 73.822244, lat: 39.893973 },
{ lng: 74.776862, lat: 40.366425 },
{ lng: 75.467828, lat: 40.562072 },
{ lng: 76.526368, lat: 40.427946 },
{ lng: 76.904484, lat: 41.066486 },
{ lng: 78.187197, lat: 41.185316 },
{ lng: 78.543661, lat: 41.582243 },
{ lng: 80.11943, lat: 42.123941 },
{ lng: 80.25999, lat: 42.349999 },
{ lng: 80.18015, lat: 42.920068 },
{ lng: 80.866206, lat: 43.180362 },
{ lng: 79.966106, lat: 44.917517 },
{ lng: 81.947071, lat: 45.317027 },
{ lng: 82.458926, lat: 45.53965 },
{ lng: 83.180484, lat: 47.330031 },
{ lng: 85.16429, lat: 47.000956 },
{ lng: 85.720484, lat: 47.452969 },
{ lng: 85.768233, lat: 48.455751 },
{ lng: 86.598776, lat: 48.549182 },
{ lng: 87.35997, lat: 49.214981 },
{ lng: 87.751264, lat: 49.297198 },
{ lng: 88.013832, lat: 48.599463 },
{ lng: 88.854298, lat: 48.069082 },
{ lng: 90.280826, lat: 47.693549 },
{ lng: 90.970809, lat: 46.888146 },
{ lng: 90.585768, lat: 45.719716 },
{ lng: 90.94554, lat: 45.286073 },
{ lng: 92.133891, lat: 45.115076 },
{ lng: 93.480734, lat: 44.975472 },
{ lng: 94.688929, lat: 44.352332 },
{ lng: 95.306875, lat: 44.241331 },
{ lng: 95.762455, lat: 43.319449 },
{ lng: 96.349396, lat: 42.725635 },
{ lng: 97.451757, lat: 42.74889 },
{ lng: 99.515817, lat: 42.524691 },
{ lng: 100.845866, lat: 42.663804 },
{ lng: 101.83304, lat: 42.514873 },
{ lng: 103.312278, lat: 41.907468 },
{ lng: 104.522282, lat: 41.908347 },
{ lng: 104.964994, lat: 41.59741 },
{ lng: 106.129316, lat: 42.134328 },
{ lng: 107.744773, lat: 42.481516 },
{ lng: 109.243596, lat: 42.519446 },
{ lng: 110.412103, lat: 42.871234 },
{ lng: 111.129682, lat: 43.406834 },
{ lng: 111.829588, lat: 43.743118 },
{ lng: 111.667737, lat: 44.073176 },
{ lng: 111.348377, lat: 44.457442 },
{ lng: 111.873306, lat: 45.102079 },
{ lng: 112.436062, lat: 45.011646 },
{ lng: 113.463907, lat: 44.808893 },
{ lng: 114.460332, lat: 45.339817 },
{ lng: 115.985096, lat: 45.727235 },
{ lng: 116.717868, lat: 46.388202 },
{ lng: 117.421701, lat: 46.672733 },
{ lng: 118.874326, lat: 46.805412 },
{ lng: 119.66327, lat: 46.69268 },
{ lng: 119.772824, lat: 47.048059 },
{ lng: 118.866574, lat: 47.74706 },
{ lng: 118.064143, lat: 48.06673 },
{ lng: 117.295507, lat: 47.697709 },
{ lng: 116.308953, lat: 47.85341 },
{ lng: 115.742837, lat: 47.726545 },
{ lng: 115.485282, lat: 48.135383 },
{ lng: 116.191802, lat: 49.134598 },
{ lng: 116.678801, lat: 49.888531 },
{ lng: 117.879244, lat: 49.510983 },
{ lng: 119.288461, lat: 50.142883 },
{ lng: 119.279366, lat: 50.582908 },
{ lng: 120.18205, lat: 51.643566 },
{ lng: 120.738191, lat: 51.964115 },
{ lng: 120.725789, lat: 52.516226 },
{ lng: 120.177089, lat: 52.753886 },
{ lng: 121.003085, lat: 53.251401 },
{ lng: 122.245748, lat: 53.431726 },
{ lng: 123.571507, lat: 53.458804 },
{ lng: 125.068211, lat: 53.161045 },
{ lng: 125.946349, lat: 52.792799 },
{ lng: 126.564399, lat: 51.784255 },
{ lng: 126.939157, lat: 51.353894 },
{ lng: 127.287456, lat: 50.739797 },
{ lng: 127.657407, lat: 49.76027 }
];
const pointlayer = new PointLayer()
.source(
d,
{
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
}
)
.shape('cylinder')
.color('#f00')
.size('', () => [ 1, 1, 10 ])
.active(true);
const earthlayer = new EarthLayer()
.source(
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image'
}
}
)
.shape('fill')
.style({
opacity: 1.0,
radius: 40,
globelOtions: {
ambientRatio: 0.6, // 环境光
diffuseRatio: 0.4, // 漫反射
specularRatio: 0.1 // 高光反射
}
})
.animate(true);
const atomLayer = new EarthLayer()
.color('#2E8AE6')
.shape('atomSphere')
.style({
opacity: 1
});
const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
.style({
opacity: 0.6
});
scene.on('loaded', () => {
scene.addLayer(earthlayer);
scene.addLayer(pointlayer);
scene.addLayer(atomLayer);
scene.addLayer(bloomLayer);
earthlayer.setEarthTime(4.0);
});

View File

@ -165,8 +165,8 @@ const scene = new Scene({
map: new GaodeMap({
center: [ 113, 29 ],
pitch: 70,
zoom: 9,
rotation: 180,
zoom: 8.5,
rotation: 160,
style: 'blank'
})
});

View File

@ -7,57 +7,43 @@
{
"filename": "grid.js",
"title": "网格地图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*0UrUTakTFQsAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animate_path_texture.js",
"title": "路径贴图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*0UrUTakTFQsAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animate_path.js",
"title": "路径动画",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Sbx4S4w7nL8AAAAAAAAAAABkARQnAQ"
},
{
"filename": "world2.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
},
{
"filename": "plane_animate.js",
"title": "航向图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*2anhRaQX3DsAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "plane_animate2.js",
"title": "航向图(平面)",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*OGcHSYSbDz4AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "route_line.js",
"title": "航线图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i6d6SqQgjAwAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "build.js",
"title": "点亮城市",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7XkWTYQMfPMAAAAAAAAAAABkARQnAQ"
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*HulgSKEJAKMAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "build_sweep.js",
"title": "圆形扫光城市",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*LoxeSZHuqXwAAAAAAAAAAAAAARQnAQ"
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KiwgTLrn0OkAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animate_line.js",
"title": "轨迹动画",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jLo0RY0sDG4AAAAAAAAAAABkARQnAQ"
"filename": "wind.js",
"title": "风场图层",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Kp0XTrOMu8wAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "amap_car.js",
"title": "旅行轨迹",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*d7EtTpdsScIAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animate_path_texture.js",
"title": "路径贴图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "plane_animate.js",
"title": "航向图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*B645Q4K9PxYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "turin.js",
"title": "都灵道路图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CNzqRJDMh-oAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "cylinder.js",
"title": "地球圆柱",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*xjRPRJU5CKUAAAAAAAAAAAAAARQnAQ"
}
]
}

View File

@ -1,5 +1,5 @@
/* eslint-disable no-eval */
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Scene, LineLayer, PointLayer, PolygonLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
@ -23,13 +23,14 @@ const scene = new Scene({
]
},
center: [ 3.438, 40.16797 ],
zoom: 0.51329
zoom: 1
})
});
scene.setBgColor('#000');
scene.on('loaded', () => {
scene.addImage(
'plane',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
'https://gw.alipayobjects.com/zos/bmw-prod/96327aa6-7fc5-4b5b-b1d8-65771e05afd8.svg'
);
Promise.all([
fetch(
@ -58,12 +59,24 @@ scene.on('loaded', () => {
const worldLine = new LineLayer()
.source(world)
.color('#41fc9d')
.color('rgb(22,119,255)')
.size(0.5)
.style({
opacity: 0.4
});
const dotPoint = new PointLayer()
const worldPolygon = new PolygonLayer()
.source(world)
.shape('fill')
.color('rgb(22,119,255)')
.size(0.5)
.style({
opacity: 0.4,
opacityLinear: {
enable: true,
dir: 'in' // in - out
}
});
const dotPoint = new PointLayer({ bland: 'additive' })
.source(dotData, {
parser: {
type: 'json',
@ -72,32 +85,32 @@ scene.on('loaded', () => {
}
})
.shape('circle')
.color('#ffed11')
.color('rgb(22,119,255)')
.animate(true)
.size(40)
.style({
opacity: 1.0
});
const flyLine = new LineLayer({ blend: 'normal' })
const flyLine = new LineLayer({ blend: 'additive', zIndex: 2 })
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.color('rgb(22,119,255)')
.texture('plane')
.shape('arc3d')
.size(20)
.size(25)
.animate({
duration: 1,
interval: 0.2,
interval: 0.5,
trailLength: 0.05
})
.style({
textureBlend: 'replace',
lineTexture: true, // 开启线的贴图功能
iconStep: 6, // 设置贴图纹理的间距
iconStep: 8, // 设置贴图纹理的间距
opacity: 1
});
@ -108,7 +121,7 @@ scene.on('loaded', () => {
coordinates: 'coord'
}
})
.color('#ff6b34')
.color('rgb(22,119,255)')
.shape('arc3d')
.size(1)
.style({
@ -117,6 +130,7 @@ scene.on('loaded', () => {
opacity: 0.5
});
scene.addLayer(worldLine);
scene.addLayer(worldPolygon);
scene.addLayer(dotPoint);
scene.addLayer(flyLine2);
scene.addLayer(flyLine);

View File

@ -0,0 +1,46 @@
import { Scene, WindLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 105.732421875, 32.24997445586331 ],
pitch: 0,
style: 'dark',
zoom: 2,
viewMode: '3D'
})
});
scene.on('loaded', () => {
const layer = new WindLayer({});
layer
.source(
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image',
extent: [ -180, -85, 180, 85 ]
}
}
)
.animate(true)
.style({
uMin: -21.32,
uMax: 26.8,
vMin: -21.57,
vMax: 21.42,
numParticles: 35535,
fadeOpacity: 0.996,
sizeScale: 1.2,
rampColors: {
0.0: '#c6dbef',
0.1: '#9ecae1',
0.2: '#6baed6',
0.3: '#4292c6',
0.4: '#2171b5',
0.5: '#084594'
}
});
scene.addLayer(layer);
});

View File

@ -14,6 +14,11 @@
"title": "直线动画",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*z5sLS4Tpl3kAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "plane_animate2.js",
"title": "航向图(平面)",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*OGcHSYSbDz4AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "trip_animate.js",
"title": "3D 弧线动画-亮",
@ -23,6 +28,21 @@
"filename": "trip_animate_dark.js",
"title": "3D 弧线动画-暗",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w-gDQra4KGMAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animate_line.js",
"title": "轨迹动画",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jLo0RY0sDG4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Sbx4S4w7nL8AAAAAAAAAAABkARQnAQ"
},
{
"filename": "world2.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
}
]
}

View File

@ -35,9 +35,9 @@
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cGw3T4LPx7YAAAAAAAAAAABkARQnAQ"
},
{
"filename": "turin.js",
"title": "都灵道路图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CNzqRJDMh-oAAAAAAAAAAAAAARQnAQ"
"filename": "route_line.js",
"title": "航线图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i6d6SqQgjAwAAAAAAAAAAAAAARQnAQ"
}
]
}