mirror of https://gitee.com/antv-l7/antv-l7
Websizetest (#1068)
* docs: remove unnecessary data * style: lint style
This commit is contained in:
YiQianYao
GitHub
parent
a37b33a988
commit
cd4402132b
|
|
@ -47,6 +47,6 @@ const layer = new HeatmapLayer({})
|
|||
|
||||
[在线案例 经典热力 classical](../../../examples/heatmap/heatmap#heatmap)
|
||||
[在线案例 蜂窝热力 hexagon](../../../examples/heatmap/hexagon#light)
|
||||
[在线案例 网格热力 grid](../../../examples/heatmap/grid#grid1)
|
||||
[在线案例 网格热力 grid](/zh/examples/heatmap/grid#china)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -1,179 +1,6 @@
|
|||
import { Scene, Mapbox } from '@antv/l7';
|
||||
import { Choropleth } from '@antv/l7plot';
|
||||
|
||||
const ProvinceData = [
|
||||
{
|
||||
name: '云南省',
|
||||
code: 530000,
|
||||
value: 17881.12,
|
||||
},
|
||||
{
|
||||
name: '黑龙江省',
|
||||
code: 230000,
|
||||
value: 16361.62,
|
||||
},
|
||||
{
|
||||
name: '贵州省',
|
||||
code: 520000,
|
||||
value: 14806.45,
|
||||
},
|
||||
{
|
||||
name: '北京市',
|
||||
code: 110000,
|
||||
value: 30319.98,
|
||||
},
|
||||
{
|
||||
name: '河北省',
|
||||
code: 130000,
|
||||
value: 36010.27,
|
||||
},
|
||||
{
|
||||
name: '山西省',
|
||||
code: 140000,
|
||||
value: 16818.11,
|
||||
},
|
||||
{
|
||||
name: '吉林省',
|
||||
code: 220000,
|
||||
value: 15074,
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
code: 640000,
|
||||
value: 3705.18,
|
||||
},
|
||||
{
|
||||
name: '辽宁省',
|
||||
code: 210000,
|
||||
value: 25315.35,
|
||||
},
|
||||
{
|
||||
name: '海南省',
|
||||
code: 460000,
|
||||
value: 4832.05,
|
||||
},
|
||||
{
|
||||
name: '内蒙古自治区',
|
||||
code: 150000,
|
||||
value: 17289.22,
|
||||
},
|
||||
{
|
||||
name: '天津市',
|
||||
code: 120000,
|
||||
value: 18809.64,
|
||||
},
|
||||
{
|
||||
name: '新疆维吾尔自治区',
|
||||
code: 650000,
|
||||
value: 12199.08,
|
||||
},
|
||||
{
|
||||
name: '上海市',
|
||||
code: 310000,
|
||||
value: 32679.87,
|
||||
},
|
||||
{
|
||||
name: '陕西省',
|
||||
code: 610000,
|
||||
value: 24438.32,
|
||||
},
|
||||
{
|
||||
name: '甘肃省',
|
||||
code: 620000,
|
||||
value: 8246.07,
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
code: 340000,
|
||||
value: 30006.82,
|
||||
},
|
||||
{
|
||||
name: '香港特别行政区',
|
||||
code: 810000,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
code: 440000,
|
||||
value: 97277.77,
|
||||
},
|
||||
{
|
||||
name: '河南省',
|
||||
code: 410000,
|
||||
value: 48055.86,
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
code: 430000,
|
||||
value: 36425.78,
|
||||
},
|
||||
{
|
||||
name: '江西省',
|
||||
code: 360000,
|
||||
value: 21984.78,
|
||||
},
|
||||
{
|
||||
name: '四川省',
|
||||
code: 510000,
|
||||
value: 40678.13,
|
||||
},
|
||||
{
|
||||
name: '广西壮族自治区',
|
||||
code: 450000,
|
||||
value: 20353.51,
|
||||
},
|
||||
{
|
||||
name: '江苏省',
|
||||
code: 320000,
|
||||
value: 92595.4,
|
||||
},
|
||||
{
|
||||
name: '澳门特别行政区',
|
||||
code: 820000,
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
name: '浙江省',
|
||||
code: 330000,
|
||||
value: 56197.15,
|
||||
},
|
||||
{
|
||||
name: '山东省',
|
||||
code: 370000,
|
||||
value: 76469.67,
|
||||
},
|
||||
{
|
||||
name: '青海省',
|
||||
code: 630000,
|
||||
value: 2865.23,
|
||||
},
|
||||
{
|
||||
name: '重庆市',
|
||||
code: 500000,
|
||||
value: 20363.19,
|
||||
},
|
||||
{
|
||||
name: '福建省',
|
||||
code: 350000,
|
||||
value: 35804.04,
|
||||
},
|
||||
{
|
||||
name: '湖北省',
|
||||
code: 420000,
|
||||
value: 39366.55,
|
||||
},
|
||||
{
|
||||
name: '西藏自治区',
|
||||
code: 540000,
|
||||
value: 1477.63,
|
||||
},
|
||||
{
|
||||
name: '台湾省',
|
||||
code: 710000,
|
||||
value: null,
|
||||
},
|
||||
];
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
|
|
@ -184,57 +11,61 @@ const scene = new Scene({
|
|||
}),
|
||||
});
|
||||
|
||||
const choropleth = new Choropleth({
|
||||
source: {
|
||||
data: ProvinceData,
|
||||
joinBy: {
|
||||
sourceField: 'code',
|
||||
geoField: 'adcode',
|
||||
},
|
||||
},
|
||||
viewLevel: {
|
||||
level: 'country',
|
||||
adcode: 100000,
|
||||
},
|
||||
autoFit: true,
|
||||
color: {
|
||||
field: 'value',
|
||||
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
|
||||
scale: { type: 'quantile' },
|
||||
},
|
||||
style: {
|
||||
opacity: 1,
|
||||
stroke: '#ccc',
|
||||
lineWidth: 0.6,
|
||||
lineOpacity: 1,
|
||||
},
|
||||
label: {
|
||||
visible: true,
|
||||
field: 'name',
|
||||
style: {
|
||||
fill: '#000',
|
||||
opacity: 0.8,
|
||||
fontSize: 10,
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1.5,
|
||||
textAllowOverlap: false,
|
||||
padding: [5, 5],
|
||||
},
|
||||
},
|
||||
state: {
|
||||
active: { stroke: 'black', lineWidth: 1 },
|
||||
},
|
||||
tooltip: {
|
||||
items: ['name', 'adcode', 'value'],
|
||||
},
|
||||
zoom: {
|
||||
position: 'bottomright',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottomleft',
|
||||
},
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
choropleth.addToScene(scene);
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/6a5ee962-76df-479c-b49a-9c76662e727d.json')
|
||||
.then(res => res.json())
|
||||
.then(ProvinceData => {
|
||||
const choropleth = new Choropleth({
|
||||
source: {
|
||||
data: ProvinceData,
|
||||
joinBy: {
|
||||
sourceField: 'code',
|
||||
geoField: 'adcode',
|
||||
},
|
||||
},
|
||||
viewLevel: {
|
||||
level: 'country',
|
||||
adcode: 100000,
|
||||
},
|
||||
autoFit: true,
|
||||
color: {
|
||||
field: 'value',
|
||||
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
|
||||
scale: { type: 'quantile' },
|
||||
},
|
||||
style: {
|
||||
opacity: 1,
|
||||
stroke: '#ccc',
|
||||
lineWidth: 0.6,
|
||||
lineOpacity: 1,
|
||||
},
|
||||
label: {
|
||||
visible: true,
|
||||
field: 'name',
|
||||
style: {
|
||||
fill: '#000',
|
||||
opacity: 0.8,
|
||||
fontSize: 10,
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1.5,
|
||||
textAllowOverlap: false,
|
||||
padding: [5, 5],
|
||||
},
|
||||
},
|
||||
state: {
|
||||
active: { stroke: 'black', lineWidth: 1 },
|
||||
},
|
||||
tooltip: {
|
||||
items: ['name', 'adcode', 'value'],
|
||||
},
|
||||
zoom: {
|
||||
position: 'bottomright',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottomleft',
|
||||
},
|
||||
});
|
||||
choropleth.addToScene(scene);
|
||||
})
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,30 +8,6 @@ const scene = new Scene({
|
|||
// TODO: 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色
|
||||
scene.setBgColor('#333');
|
||||
|
||||
const flydata = [{ coord: [[ 104.195397, 35.86166 ], [ 100.992541, 15.870032 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 114.727669, 4.535277 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 9.501785, 56.26392 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -66.590149, 18.220833 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 174.885971, -40.900557 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 104.990963, 12.565679 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 6.129582999999999, 49.815273 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 8.468945999999999, 60.47202399999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 108.277199, 14.058324 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -95.712891, 37.09024 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 121.49917, 25.12653 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -9.429499000000002, 6.428055 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 127.766922, 35.907757 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 10.451526, 51.165691 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 23.881275, 55.169438 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 34.851612, 31.046051 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 53.847818, 23.424076 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 102.495496, 19.85627 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 21.824312, 39.074208 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.48583, 42.733883 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 15.472962, 49.81749199999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 78.96288, 20.593684 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -3.435973, 55.378051 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 33.429859, 35.126413 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 8.227511999999999, 46.818188 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 114.066662, 22.588638 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 14.550072, 47.516231 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 2.213749, 46.227638 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 12.56738, 41.87194 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 105.318756, 61.52401 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 80.77179699999999, 7.873053999999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 5.291265999999999, 52.132633 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 35.243322, 38.963745 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 18.643501, 60.12816100000001 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.748151, 61.92410999999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -3.74922, 40.46366700000001 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 113.551538, 22.109432 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 4.469936, 50.503887 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -106.346771, 56.130366 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 138.252924, 36.204824 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 17.679076, 43.915886 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -88.49765, 17.189877 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.013607, 58.595272 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 101.975766, 4.210484 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -8.24389, 53.41291 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -8.224454, 39.39987199999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 133.775136, -25.274398 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 121.774017, 12.879721 ]] }];
|
||||
const flyLine = new LineLayer({ blend: 'normal' })
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(0.5)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
segmentNumber: 60,
|
||||
globalArcHeight: 20
|
||||
});
|
||||
|
||||
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
|
|
@ -70,7 +46,32 @@ scene.on('loaded', () => {
|
|||
scene.addLayer(atomLayer);
|
||||
scene.addLayer(bloomLayer);
|
||||
|
||||
scene.addLayer(flyLine);
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/20a69b46-3d6d-4ab5-b8b5-150b6aa52c88.json')
|
||||
.then(res => res.json())
|
||||
.then(flydata => {
|
||||
const flyLine = new LineLayer({ blend: 'normal' })
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(0.5)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
segmentNumber: 60,
|
||||
globalArcHeight: 20
|
||||
});
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
|
||||
earthlayer.setEarthTime(4.0);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,277 +5,6 @@ const scene = new Scene({
|
|||
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',
|
||||
|
|
@ -311,7 +40,26 @@ const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
|
|||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(earthlayer);
|
||||
scene.addLayer(pointlayer);
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/efef6c2b-2922-4c03-b9e0-d3743f68eaf2.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointlayer = new PointLayer()
|
||||
.source(data,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('cylinder')
|
||||
.color('#f00')
|
||||
.size('', () => [ 1, 1, 10 ])
|
||||
.active(true);
|
||||
scene.addLayer(pointlayer);
|
||||
});
|
||||
|
||||
scene.addLayer(atomLayer);
|
||||
scene.addLayer(bloomLayer);
|
||||
|
|
|
|||
|
|
@ -5,277 +5,6 @@ const scene = new Scene({
|
|||
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('circle')
|
||||
.color('#f00')
|
||||
.size(10)
|
||||
.active(true);
|
||||
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
|
|
@ -311,7 +40,25 @@ const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
|
|||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(earthlayer);
|
||||
scene.addLayer(pointlayer);
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/efef6c2b-2922-4c03-b9e0-d3743f68eaf2.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointlayer = new PointLayer()
|
||||
.source(data,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('circle')
|
||||
.color('#f00')
|
||||
.size(10)
|
||||
.active(true);
|
||||
scene.addLayer(pointlayer);
|
||||
});
|
||||
|
||||
scene.addLayer(atomLayer);
|
||||
scene.addLayer(bloomLayer);
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
@ -14,12 +14,6 @@
|
|||
"title": "网格热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "grid1.js",
|
||||
"title": "",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uo9oQolgoxYAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "heatmap3.js",
|
||||
"title": "网格布局 圆形",
|
||||
|
|
|
|||
|
|
@ -16,33 +16,18 @@
|
|||
},
|
||||
{
|
||||
"filename": "plane_animate2.js",
|
||||
"title": "航向图（平面）",
|
||||
"title": "航向图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*2wDIS5hXKYwAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "trip_animate.js",
|
||||
"title": "3D 弧线动画-亮",
|
||||
"title": "3D 弧线动画",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*cmB1SLuyB1cAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "trip_animate_dark.js",
|
||||
"title": "3D 弧线动画-暗",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*r0bPQKrJfJkAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "animate_line.js",
|
||||
"title": "轨迹动画",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*d7PjSo0izNAAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "world.js",
|
||||
"title": "流向图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*LKKcRY1G-bcAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "world2.js",
|
||||
"title": "流向图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MD7nRYqG5joAAAAAAAAAAAAAARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 60,
|
||||
style: 'dark',
|
||||
center: [ 104.34278, 41.12554 ],
|
||||
zoom: 2.94888,
|
||||
rotation: 42.3999
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({
|
||||
blend: 'normal',
|
||||
enableMultiPassRenderer: true,
|
||||
passes: [
|
||||
[
|
||||
'bloom',
|
||||
{
|
||||
bloomBaseRadio: 0.8,
|
||||
bloomRadius: 2,
|
||||
bloomIntensity: 1
|
||||
}
|
||||
]
|
||||
]
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
.color('#FF7C6A')
|
||||
.animate({
|
||||
enable: true,
|
||||
interval: 0.1,
|
||||
trailLength: 0.5,
|
||||
duration: 2
|
||||
})
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
/* eslint-disable no-eval */
|
||||
import { Scene, LineLayer, PointLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 40,
|
||||
style: {
|
||||
version: 8,
|
||||
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
|
||||
glyphs:
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
|
||||
sources: {},
|
||||
layers: [
|
||||
{
|
||||
id: 'background',
|
||||
type: 'background',
|
||||
paint: {
|
||||
'background-color': '#2b2b3a'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
center: [ 3.438, 40.16797 ],
|
||||
zoom: 0.51329
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json').then(d => d.json()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
|
||||
]).then(function onLoad([ world, dot, flyline ]) {
|
||||
const dotData = eval(dot);
|
||||
const flydata = eval(flyline).map(item => {
|
||||
const latlng1 = item.from.split(',').map(e => { return e * 1; });
|
||||
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
});
|
||||
// const worldFill = new PolygonLayer()
|
||||
// .source(world)
|
||||
// .color('#98E3FA')
|
||||
// .shape('fill')
|
||||
// .style({
|
||||
// opacity: 1
|
||||
// });
|
||||
|
||||
const worldLine = new LineLayer()
|
||||
.source(world)
|
||||
.color('#41fc9d')
|
||||
.size(0.5)
|
||||
.style({
|
||||
opacity: 0.4
|
||||
});
|
||||
const dotPoint = new PointLayer()
|
||||
.source(dotData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#ffed11')
|
||||
.animate(true)
|
||||
.size(40)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
const flyLine = new LineLayer()
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#ff6b34')
|
||||
.shape('arc3d')
|
||||
.size(2)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
// scene.addLayer(worldFill);
|
||||
scene.addLayer(worldLine);
|
||||
scene.addLayer(dotPoint);
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
/* eslint-disable no-eval */
|
||||
import { Scene, LineLayer, PointLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 40,
|
||||
style: {
|
||||
version: 8,
|
||||
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
|
||||
glyphs:
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
|
||||
sources: {},
|
||||
layers: [
|
||||
{
|
||||
id: 'background',
|
||||
type: 'background',
|
||||
paint: {
|
||||
'background-color': '#2b2b3a'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
center: [ 3.438, 40.16797 ],
|
||||
zoom: 0.51329
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json').then(d => d.json()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
|
||||
]).then(function onLoad([ world, dot, flyline ]) {
|
||||
const dotData = eval(dot);
|
||||
const flydata = eval(flyline).map(item => {
|
||||
const latlng1 = item.from.split(',').map(e => { return e * 1; });
|
||||
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
});
|
||||
// const worldFill = new PolygonLayer()
|
||||
// .source(world)
|
||||
// .color('#98E3FA')
|
||||
// .shape('fill')
|
||||
// .style({
|
||||
// opacity: 1
|
||||
// });
|
||||
|
||||
const worldLine = new LineLayer()
|
||||
.source(world)
|
||||
.color('#495e96')
|
||||
.size(0.6)
|
||||
.style({
|
||||
opacity: 0.2
|
||||
});
|
||||
const dotPoint = new PointLayer()
|
||||
.source(dotData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#abc7e9')
|
||||
.animate({
|
||||
speed: 0.8
|
||||
}
|
||||
)
|
||||
.size(30)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
const flyLine = new LineLayer()
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(2)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
// scene.addLayer(worldFill);
|
||||
scene.addLayer(worldLine);
|
||||
scene.addLayer(dotPoint);
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -19,11 +19,6 @@
|
|||
"title": "3D 公交线路-暗",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*92cnRJiUIf4AAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "road_light.js",
|
||||
"title": "路径light",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*oJdZR5mnocwAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "road_dark.js",
|
||||
"title": "路径边框",
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
import {
|
||||
Scene,
|
||||
LineLayer
|
||||
} from '@antv/l7';
|
||||
import {
|
||||
Mapbox
|
||||
} from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 20,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
style: 'light'
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
@ -23,11 +23,6 @@
|
|||
"filename": "chart.js",
|
||||
"title": "环图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EqfuRqkVZG4AAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "ring.js",
|
||||
"title": "环图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*_pt_RoTbm0MAAAAAAAAAAAAAARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,116 +0,0 @@
|
|||
import { Scene, Marker } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import * as G2 from '@antv/g2';
|
||||
|
||||
const CSS = `.l7-marker .g2-guide-html {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
line-height: 0.1
|
||||
}
|
||||
|
||||
l7-marker .g2-guide-html .title {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
l7-marker .g2-guide-html .value {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
function loadCssCode(code) {
|
||||
const style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.rel = 'stylesheet';
|
||||
// for Chrome Firefox Opera Safari
|
||||
style.appendChild(document.createTextNode(code));
|
||||
// for IE
|
||||
// style.styleSheet.cssText = code;
|
||||
const head = document.getElementsByTagName('head')[0];
|
||||
head.appendChild(style);
|
||||
}
|
||||
loadCssCode(CSS);
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 52.21496184144132, 24.121126851768906 ],
|
||||
zoom: 3.802
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
});
|
||||
scene.render();
|
||||
function addChart() {
|
||||
Promise.all([
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
|
||||
).then(d => d.json()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
|
||||
).then(d => d.json())
|
||||
]).then(function onLoad([ center, population ]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
popobj[element.Code] =
|
||||
element['Population, female (% of total) (% of total)'];
|
||||
});
|
||||
// 数据绑定
|
||||
|
||||
center.features = center.features.map(fe => {
|
||||
fe.properties.female = popobj[fe.properties.id] * 1 || 0;
|
||||
return fe;
|
||||
});
|
||||
center.features.forEach(point => {
|
||||
const el = document.createElement('div');
|
||||
const coord = point.geometry.coordinates;
|
||||
const v = point.properties.female * 1;
|
||||
if (v < 1 || (v > 46 && v < 54)) {
|
||||
return;
|
||||
}
|
||||
const size = 60;
|
||||
const data = [
|
||||
{
|
||||
type: '男性',
|
||||
value: 100.0 - v.toFixed(2)
|
||||
},
|
||||
{
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}
|
||||
];
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
chart.source(data);
|
||||
chart.legend(false);
|
||||
chart.tooltip(false);
|
||||
chart.coord('theta', {
|
||||
radius: 0.9,
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('value')
|
||||
.color('type', [ '#5CCEA1', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
const marker = new Marker({ element: el }).setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 60,
|
||||
style: 'light',
|
||||
center: [ 121.412224, 31.26192438 ],
|
||||
zoom: 13.13438,
|
||||
rotation: 35.97133
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.animate(true)
|
||||
.active(true)
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
@ -14,11 +14,6 @@
|
|||
"title": "3D 渐变柱图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GJhASbfQTK8AAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "clumn_shape_light.js",
|
||||
"title": "3D 浅色柱图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*msKiTojYyhwAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "column_dark.js",
|
||||
"title": "3D柱图 深色底图",
|
||||
|
|
|
|||
|
|
@ -24,11 +24,6 @@
|
|||
"title": "天气",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CC5YRp2OY3gAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "road.js",
|
||||
"title": "路线图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*N-9MRZLlPXgAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "monsoon.js",
|
||||
"title": "季风分布",
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
import { Scene, LineLayer, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 120.115, 30.221 ],
|
||||
pitch: 40,
|
||||
zoom: 16,
|
||||
viewMode: '3D'
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
scene.addImage(
|
||||
'road',
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ'
|
||||
);
|
||||
|
||||
const layer = new LineLayer()
|
||||
.source(data)
|
||||
.size(8)
|
||||
.shape('line')
|
||||
.texture('road')
|
||||
.color('rgb(20, 180, 90)')
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 1, // 持续时间，延时
|
||||
trailLength: 2 // 流线长度
|
||||
})
|
||||
.style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 50 // 设置贴图纹理的间距
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
|
||||
scene.addImage(
|
||||
'start',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/ebb0af57-4a8a-46e0-a296-2d51f9fa8007.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'visitor',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/64db255d-b636-4929-b072-068e75178b23.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'museum',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/0630591d-64db-4057-a04d-d65f43aebf0f.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'supermarket',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/ab42799d-dea6-4d37-bd62-3ee3e06bf6c0.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'tower',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/6d27cf89-638c-432b-a8c4-cac289ee98a8.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'end',
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source([{
|
||||
lng: 120.11025885601617,
|
||||
lat: 30.22006389085372,
|
||||
icon: 'start'
|
||||
}, {
|
||||
lng: 120.11123578376913,
|
||||
lat: 30.220443561196277,
|
||||
icon: 'visitor'
|
||||
}, {
|
||||
lng: 120.11408457779198,
|
||||
lat: 30.22019805564678,
|
||||
icon: 'museum'
|
||||
}, {
|
||||
lng: 120.11683172384723,
|
||||
lat: 30.21875509667716,
|
||||
icon: 'supermarket'
|
||||
}, {
|
||||
lng: 120.11945546294194,
|
||||
lat: 30.218724022876376,
|
||||
icon: 'tower'
|
||||
}, {
|
||||
lng: 120.1184189041221,
|
||||
lat: 30.21783201718256,
|
||||
icon: 'end'
|
||||
}
|
||||
], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('icon', [ 'start', 'visitor', 'museum', 'supermarket', 'tower', 'end' ])
|
||||
.size(35)
|
||||
.style({
|
||||
offsets: [ 0, 20 ]
|
||||
});
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
});
|
||||
|
|
@ -11,159 +11,6 @@ const scene = new Scene({
|
|||
zooms: [ 8, 10 ]
|
||||
})
|
||||
});
|
||||
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: dataColor.bigRainBC,
|
||||
temperature: '20℃',
|
||||
weather: '大雨'
|
||||
},
|
||||
{
|
||||
lng: 119.2,
|
||||
lat: 30.0,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
{
|
||||
lng: 119.67,
|
||||
lat: 30.2,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
{
|
||||
lng: 119.63,
|
||||
lat: 30.6,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
{
|
||||
lng: 120,
|
||||
lat: 30,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
{
|
||||
lng: 120.2,
|
||||
lat: 30.5,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: dataColor.sunBC,
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
{
|
||||
lng: 121.5,
|
||||
lat: 31.4,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
{
|
||||
lng: 120,
|
||||
lat: 31,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
{
|
||||
lng: 120.6,
|
||||
lat: 30.8,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
{
|
||||
lng: 120.5,
|
||||
lat: 31.3,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: dataColor.cloudBC,
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
{
|
||||
lng: 121.3,
|
||||
lat: 30.2,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
{
|
||||
lng: 121,
|
||||
lat: 30.5,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
{
|
||||
lng: 120.6,
|
||||
lat: 30,
|
||||
iconType: 'middleRain',
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: dataColor.middleRainBC,
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
},
|
||||
{
|
||||
lng: 120.2,
|
||||
lat: 29.7,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: dataColor.smallRainBC,
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
{
|
||||
lng: 121.7,
|
||||
lat: 29.8,
|
||||
iconType: 'middleRain',
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: dataColor.middleRainBC,
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
},
|
||||
{
|
||||
lng: 121.5,
|
||||
lat: 30,
|
||||
iconType: 'hugeRain',
|
||||
iconColor: '#4678D2',
|
||||
backgoundColor: dataColor.bigRainBC,
|
||||
temperature: '20℃',
|
||||
weather: '大雨'
|
||||
}
|
||||
];
|
||||
const fontFamily = 'iconfont';
|
||||
const fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
|
|
@ -176,92 +23,95 @@ scene.addIconFonts([
|
|||
]);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/9eb3f1b5-0c3b-49b2-8221-191d4ba8aa5e.json')
|
||||
.then(res => res.json())
|
||||
.then(originData => {
|
||||
const layer = new PointLayer()
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('backgoundColor')
|
||||
.size(42);
|
||||
scene.addLayer(layer);
|
||||
|
||||
const layer = new PointLayer()
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('backgoundColor')
|
||||
.size(42);
|
||||
scene.addLayer(layer);
|
||||
|
||||
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('iconType', 'text')
|
||||
.size(30)
|
||||
.color('iconColor')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ -10, 10 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
|
||||
const textLayer = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('temperature', 'text')
|
||||
.size(10)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 5, -55 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
)
|
||||
.shape('iconType', 'text')
|
||||
.size(30)
|
||||
.color('iconColor')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ -10, 10 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
|
||||
const textLayer2 = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('weather', 'text')
|
||||
.size(14)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 5, -15 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
const textLayer = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('temperature', 'text')
|
||||
.size(10)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 5, -55 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
|
||||
const textLayer2 = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('weather', 'text')
|
||||
.size(14)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 5, -15 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(textLayer2);
|
||||
});
|
||||
scene.addLayer(textLayer2);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,11 +34,6 @@
|
|||
"title": "气温图标标注",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*nvwuQIi8_9oAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "updown.js",
|
||||
"title": "走势图标标注",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*LJXlRraIokAAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "simpleCoordinate.js",
|
||||
"title": "平面区域标注",
|
||||
|
|
|
|||
|
|
@ -16,199 +16,6 @@ const scene = new Scene({
|
|||
})
|
||||
});
|
||||
scene.setBgColor('rgb(94, 182, 140)');
|
||||
const textlayer = new PointLayer({ zIndex: 2 })
|
||||
.source(
|
||||
[
|
||||
{
|
||||
x: 515,
|
||||
y: 575,
|
||||
t: '小屋'
|
||||
},
|
||||
{
|
||||
x: 507,
|
||||
y: 560,
|
||||
t: '小屋'
|
||||
},
|
||||
{
|
||||
x: 495,
|
||||
y: 553,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 499,
|
||||
y: 547,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 480,
|
||||
y: 544,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 471,
|
||||
y: 539,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 485,
|
||||
y: 527,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 463,
|
||||
y: 533,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 477,
|
||||
y: 523,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 473,
|
||||
y: 517,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 535,
|
||||
y: 535,
|
||||
t: '住宅小区'
|
||||
},
|
||||
{
|
||||
x: 550,
|
||||
y: 545,
|
||||
t: '住宅小区'
|
||||
},
|
||||
{
|
||||
x: 578,
|
||||
y: 559,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 583,
|
||||
y: 554,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 590,
|
||||
y: 538,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 599,
|
||||
y: 537,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 567,
|
||||
y: 526,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 564,
|
||||
y: 519,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 553.5,
|
||||
y: 483,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 554,
|
||||
y: 479,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 547,
|
||||
y: 478.5,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 533.5,
|
||||
y: 475,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 516,
|
||||
y: 463,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 538,
|
||||
y: 453,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 510.5,
|
||||
y: 444,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 488,
|
||||
y: 440.5,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 476.5,
|
||||
y: 438.5,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 474.5,
|
||||
y: 431,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 462,
|
||||
y: 434.5,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 431,
|
||||
y: 436,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 428,
|
||||
y: 430,
|
||||
t: '住宅'
|
||||
},
|
||||
{
|
||||
x: 402.5,
|
||||
y: 448.5,
|
||||
t: '别墅'
|
||||
},
|
||||
{
|
||||
x: 393.5,
|
||||
y: 456,
|
||||
t: '别墅'
|
||||
}
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'x',
|
||||
y: 'y'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('t', 'text')
|
||||
.size(12)
|
||||
.active({
|
||||
color: '#00f',
|
||||
mix: 0.9
|
||||
})
|
||||
.color('rgb(86, 156, 214)')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
spacing: 2, // 字符间距
|
||||
fontWeight: '800',
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 2, // 描边宽度
|
||||
textAllowOverlap: true
|
||||
});
|
||||
|
||||
const imagelayer = new ImageLayer({}).source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ',
|
||||
|
|
@ -221,6 +28,39 @@ const imagelayer = new ImageLayer({}).source(
|
|||
);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/7dc0d454-fabc-4461-a5d5-d404dadb49a9.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const textlayer = new PointLayer({ zIndex: 2 })
|
||||
.source(
|
||||
data,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'x',
|
||||
y: 'y'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('t', 'text')
|
||||
.size(12)
|
||||
.active({
|
||||
color: '#00f',
|
||||
mix: 0.9
|
||||
})
|
||||
.color('rgb(86, 156, 214)')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
spacing: 2, // 字符间距
|
||||
fontWeight: '800',
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 2, // 描边宽度
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(textlayer);
|
||||
});
|
||||
|
||||
scene.addLayer(imagelayer);
|
||||
scene.addLayer(textlayer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,104 +11,7 @@ const scene = new Scene({
|
|||
zooms: [ 8, 10 ]
|
||||
})
|
||||
});
|
||||
const originData = [
|
||||
{
|
||||
lng: 120,
|
||||
lat: 30,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
weather: '晴朗',
|
||||
textOffset: [ 10, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 120.2,
|
||||
lat: 30.5,
|
||||
iconType: 'sun',
|
||||
iconColor: '#FFA500',
|
||||
weather: '晴朗 - 高温预警',
|
||||
textOffset: [ -25, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 121.5,
|
||||
lat: 31.4,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
weather: '多云',
|
||||
textOffset: [ 10, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 120,
|
||||
lat: 31,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
weather: '多云 - 温度适宜',
|
||||
textOffset: [ -25, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 120.6,
|
||||
lat: 30.8,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
weather: '多云',
|
||||
textOffset: [ 10, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 120.5,
|
||||
lat: 31.3,
|
||||
iconType: 'cloud',
|
||||
iconColor: '#F0F8FF',
|
||||
weather: '多云 - 今日适宜出门',
|
||||
textOffset: [ -40, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 121.3,
|
||||
lat: 30.2,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
weather: '中雨转小雨',
|
||||
textOffset: [ -10, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 121,
|
||||
lat: 30.5,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
weather: '小雨',
|
||||
textOffset: [ 10, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 120.6,
|
||||
lat: 30,
|
||||
iconType: 'middleRain',
|
||||
iconColor: '#6495ED',
|
||||
weather: '中雨',
|
||||
textOffset: [ 10, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 120.2,
|
||||
lat: 29.7,
|
||||
iconType: 'smallRain',
|
||||
iconColor: '#6EA0FF',
|
||||
weather: '小雨',
|
||||
textOffset: [ 10, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 121.7,
|
||||
lat: 29.8,
|
||||
iconType: 'middleRain',
|
||||
iconColor: '#6495ED',
|
||||
weather: '大雨转中雨',
|
||||
textOffset: [ -15, 0 ]
|
||||
},
|
||||
{
|
||||
lng: 121.5,
|
||||
lat: 30,
|
||||
iconType: 'hugeRain',
|
||||
iconColor: '#4678D2',
|
||||
weather: '大雨',
|
||||
textOffset: [ 10, 0 ]
|
||||
}
|
||||
];
|
||||
|
||||
const fontFamily = 'iconfont';
|
||||
const fontPath =
|
||||
'//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
|
||||
|
|
@ -121,44 +24,50 @@ scene.addIconFonts([
|
|||
]);
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
scene.on('loaded', () => {
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('iconType', 'text')
|
||||
.size(30)
|
||||
.color('iconColor')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
|
||||
const textLayer = new PointLayer({})
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('weather', 'text')
|
||||
.size(16)
|
||||
.color('#fff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/f7d083e2-ad55-44fd-b324-15e1b549948a.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('iconType', 'text')
|
||||
.size(30)
|
||||
.color('iconColor')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
|
||||
const textLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('weather', 'text')
|
||||
.size(16)
|
||||
.color('#fff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
import { Scene, PointLayer, PolygonLayer, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 40,
|
||||
center: [ 118.8, 32.056 ],
|
||||
zoom: 12.5
|
||||
})
|
||||
});
|
||||
const fontFamily = 'iconfont';
|
||||
const fontPath =
|
||||
'//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063';
|
||||
scene.addIconFont('up', '');
|
||||
scene.addIconFont('down', '');
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const filllayer = new PolygonLayer({
|
||||
name: 'fill',
|
||||
zIndex: 3
|
||||
})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ])
|
||||
.style({
|
||||
opacity: 0.6,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'out' // in - out
|
||||
}
|
||||
});
|
||||
scene.addLayer(filllayer);
|
||||
|
||||
const linelayer = new LineLayer({
|
||||
zIndex: 5,
|
||||
name: 'line2'
|
||||
})
|
||||
.source(data)
|
||||
.shape('line')
|
||||
.size(1)
|
||||
.color('#fff')
|
||||
.style({
|
||||
opacity: 0.3
|
||||
});
|
||||
scene.addLayer(linelayer);
|
||||
|
||||
const pointLayer = new PointLayer({
|
||||
zIndex: 10
|
||||
})
|
||||
.source(data)
|
||||
.shape('icon', 'text')
|
||||
.size(15)
|
||||
.color('count', n => (n > 0 ? '#0f0' : '#f00'))
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ -10, 5 ],
|
||||
padding: [ 2, 2 ],
|
||||
fontFamily,
|
||||
iconfont: true
|
||||
// textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
const textLayer = new PointLayer({
|
||||
zIndex: 10
|
||||
})
|
||||
.source(data)
|
||||
.shape('count', 'text')
|
||||
.size(12)
|
||||
.color('count', n => (n > 0 ? '#0f0' : '#f00'))
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 40, 10 ],
|
||||
padding: [ 1, 1 ]
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 105, 35 ],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 2.5
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new PolygonLayer({ blend: 'normal' })
|
||||
.source(data)
|
||||
.size('name', [ 0, 10000, 50000, 30000, 100000 ])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49'
|
||||
])
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'out' // in - out
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
|
||||
const layer2 = new PolygonLayer({ blend: 'normal' })
|
||||
.source(data)
|
||||
.size(0.5)
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49'
|
||||
])
|
||||
.shape('line')
|
||||
.select(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(layer2);
|
||||
});
|
||||
});
|
||||
|
|
@ -29,11 +29,6 @@
|
|||
"title": "中国地图-径向渐变",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SgKRRKJ1w-EAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "china_linear_out.js",
|
||||
"title": "中国地图-径向渐变",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mVAyQ4mUG9sAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "water.js",
|
||||
"title": "简单水面",
|
||||
|
|
|
|||
Loading…
Reference in New Issue