mirror of https://gitee.com/antv-l7/antv-l7
feat: raisingHeight/heightFixed 补全 (#1280)
* feat: 去除多余 demo、提取图层共用类型定义 * feat: 点图层支持 heightfixed * feat: point fillImage 支持 raisingHeight * feat: 点图层 fill、fillImage 补全 raigingHeight\heightFixed * feat: 点图层 point image 完善对 raisingHeight\heightFixed 的支持 * feat: 修改类型定义 Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao
GitHub
parent
e20b13b690
commit
00542e3560
|
|
@ -1,41 +0,0 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [0, 23.107329],
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
function getAirportCoord(idx) {
|
||||
return [data.airports[idx][3], data.airports[idx][4]];
|
||||
}
|
||||
const routes = data.routes.map(function(airline) {
|
||||
return {
|
||||
coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])],
|
||||
};
|
||||
});
|
||||
const layer = new LineLayer({})
|
||||
.source(routes, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord',
|
||||
},
|
||||
})
|
||||
.size(0.6)
|
||||
.shape('arc')
|
||||
.color('rgb(5, 5, 50)')
|
||||
.style({
|
||||
opacity: 0.05,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
@ -1,110 +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: 'dark',
|
||||
center: [ 3.438, 40.16797 ],
|
||||
zoom: 0.51329
|
||||
})
|
||||
});
|
||||
Promise.all(
|
||||
[ fetch('https://gw.alipayobjects.com/os/basement_prod/9acd4831-5655-41a5-b0a0-831603e0092d.json').then(function(d) {
|
||||
return d.text();
|
||||
}).then(JSON.parse), fetch('https://gw.alipayobjects.com/os/basement_prod/dbe4e40b-3fbf-4a20-b36b-7a8bd3b8aef2.csv').then(function(d) {
|
||||
return d.text();
|
||||
}), fetch('https://gw.alipayobjects.com/os/basement_prod/89d20ef7-77df-44ca-a238-6e3679ab3ae4.csv').then(function(d) {
|
||||
return d.text();
|
||||
}) ]).then(function onLoad([ coordinates, trips, stations ]) {
|
||||
const stationArray = parseCSV(stations);
|
||||
const stationObj = {};
|
||||
stationArray.forEach(function(st) {
|
||||
stationObj[st.station_id] = {
|
||||
x: st.longitude * 1,
|
||||
y: st.latitude * 1
|
||||
};
|
||||
});
|
||||
const tripsArray = parseCSV(trips);
|
||||
const triplines = [];
|
||||
tripsArray.forEach(function(trip) {
|
||||
if (stationObj[trip.start_station] && stationObj[trip.end_station]) {
|
||||
const line = {
|
||||
x: stationObj[trip.start_station].x,
|
||||
y: stationObj[trip.start_station].y,
|
||||
x1: stationObj[trip.end_station].x,
|
||||
y1: stationObj[trip.end_station].y,
|
||||
duration: trip.duration
|
||||
};
|
||||
triplines.push(line);
|
||||
}
|
||||
});
|
||||
const roadlayer = new LineLayer().source(coordinates).shape('line')
|
||||
.size(0.6)
|
||||
.color('#eee')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
const stationLayer = new PointLayer().source(stations, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
}).shape('circle')
|
||||
.active(true)
|
||||
.size(40)
|
||||
.color('#fec44f')
|
||||
.animate(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
})
|
||||
.render();
|
||||
|
||||
const arclayer = new LineLayer().source(triplines.slice(0, 1000), {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'x',
|
||||
y: 'y',
|
||||
x1: 'x1',
|
||||
y1: 'y1'
|
||||
}
|
||||
})
|
||||
.color('#ff6b34')
|
||||
.shape('arc3d')
|
||||
.size(1)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
})
|
||||
.animate({
|
||||
interval: 0.5,
|
||||
trailLength: 0.5,
|
||||
duration: 1
|
||||
});
|
||||
arclayer.fitBounds();
|
||||
scene.addLayer(roadlayer);
|
||||
scene.addLayer(stationLayer);
|
||||
scene.addLayer(arclayer);
|
||||
|
||||
|
||||
});
|
||||
|
||||
function parseCSV(data) {
|
||||
const lines = data.split('\n');
|
||||
const header = lines[0];
|
||||
const columns = header.split(',');
|
||||
return lines.slice(1).filter(function(l) {
|
||||
return l;
|
||||
}).map(function(line) {
|
||||
const obj = {};
|
||||
line.split(',').forEach(function(value, i) {
|
||||
const name = columns[i];
|
||||
obj[name] = value;
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
}
|
||||
|
||||
Binary file not shown.
|
|
@ -1,25 +0,0 @@
|
|||
|
||||
import { Scene, ImageLayer } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 121.2680, 30.3628 ],
|
||||
zoom: 13
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
}
|
||||
}
|
||||
);
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "栅格图层",
|
||||
"en": "Gallery"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "image.js",
|
||||
"title": "图片",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "raster.js",
|
||||
"title": "地形"
|
||||
},
|
||||
{
|
||||
"filename": "light.js",
|
||||
"title": "夜光图"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [121.2680, 30.3628],
|
||||
zoom: 3,
|
||||
});
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return {
|
||||
data: values[0],
|
||||
width,
|
||||
height,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
};
|
||||
}
|
||||
|
||||
async function addLayer() {
|
||||
const tiffdata = await getTiffData();
|
||||
|
||||
const layer = new RasterLayer({});
|
||||
layer
|
||||
.source(tiffdata.data, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: tiffdata.width,
|
||||
height: tiffdata.height,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
heightRatio:100,
|
||||
opacity: 0.8,
|
||||
rampColors: {
|
||||
colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
|
||||
},
|
||||
});
|
||||
return layer;
|
||||
}
|
||||
scene.on('loaded', async () =>{
|
||||
const layer = await addLayer();
|
||||
scene.addLayer(layer);
|
||||
scene.render();
|
||||
})
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Raster Map
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: 栅格图层
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { AMapScene, LineLayer } from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
export default React.memo(function Map() {
|
||||
const [ data, setData ] = React.useState();
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json'
|
||||
);
|
||||
const raw = await response.json();
|
||||
setData(raw);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [ 110.19382669582967, 50.258134 ],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 1
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}}
|
||||
>
|
||||
<LineLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data
|
||||
}}
|
||||
size={{
|
||||
values: 1
|
||||
}}
|
||||
color={{
|
||||
values: '#fff'
|
||||
}}
|
||||
shape={{
|
||||
values: 'line'
|
||||
}}
|
||||
style={{
|
||||
opacity: 1
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AMapScene>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "Scene 组件",
|
||||
"en": "Scene Component"
|
||||
},
|
||||
"demos": [
|
||||
|
||||
{
|
||||
"filename": "amap.jsx",
|
||||
"title": "高德地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: React Map
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: React 地图
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { PointLayer, Scale, Scene, Layers, Zoom } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.40, 31.258134],
|
||||
zoom: 14,
|
||||
});
|
||||
|
||||
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('circle')
|
||||
.size('unit_price', [5, 25])
|
||||
.color('name',['#49B5AD', "#5B8FF9"])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
var overlayers = {
|
||||
"围栏填充": pointLayer,
|
||||
};
|
||||
var baseLayers = {
|
||||
"基础地图": pointLayer,
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers: overlayers,
|
||||
});
|
||||
|
||||
scene.addControl(layersControl);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale({
|
||||
position:"bottomright"
|
||||
});
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { Scale, Zoom, Scene } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [-97.119140625, 38.75408327579141],
|
||||
zoom: 2,
|
||||
});
|
||||
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale({
|
||||
position:'rightbottom',
|
||||
});
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "地图",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "amap.js",
|
||||
"title": "高德底图组件"
|
||||
},
|
||||
{
|
||||
"filename": "mapbox.js",
|
||||
"title": "MapBox底图组件"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import { Scale, Zoom, Scene, Layers, PointLayer } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.40, 31.258134],
|
||||
zoom: 5,
|
||||
});
|
||||
|
||||
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('circle')
|
||||
.size('unit_price', [5, 25])
|
||||
.color('name',['#49B5AD', "#5B8FF9"])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
var overlayers = {
|
||||
"围栏填充": pointLayer,
|
||||
};
|
||||
var baseLayers = {
|
||||
"基础地图": pointLayer,
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers: overlayers,
|
||||
baseLayers,
|
||||
});
|
||||
|
||||
scene.addControl(layersControl);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale();
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: control
|
||||
order: 2
|
||||
---
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: 组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import { LineLayer, Scene } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [102.602992, 23.107329],
|
||||
zoom: 13,
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new LineLayer({
|
||||
})
|
||||
.source(data)
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.color(
|
||||
'ELEV',
|
||||
[
|
||||
'#E8FCFF',
|
||||
'#CFF6FF',
|
||||
'#A1E9ff',
|
||||
'#65CEF7',
|
||||
'#3CB1F0',
|
||||
'#2894E0',
|
||||
'#1772c2',
|
||||
'#105CB3',
|
||||
'#0D408C',
|
||||
'#002466',
|
||||
].reverse(),
|
||||
)
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "图库",
|
||||
"en": "Gallery"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "line.js",
|
||||
"title": "线图层",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Data
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: 数据
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.40, 31.258134],
|
||||
zoom: 5,
|
||||
});
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [ -97.119140625, 38.75408327579141],
|
||||
zoom: 2,
|
||||
});
|
||||
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "地图",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "amap.js",
|
||||
"title": "高德底图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "mapbox.js",
|
||||
"title": "MapBox底图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: map
|
||||
order: 0
|
||||
---
|
||||
初始 L7 地图实例
|
||||
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
title: 地图
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/tutorial
|
||||
---
|
||||
初始 L7 地图实例
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
### point circle
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'point_circle',
|
||||
pickBufferScale: 1.0,
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [-121.24357, 37.58264],
|
||||
pitch: 0,
|
||||
zoom: 6.45,
|
||||
}),
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.slice(0, 1000), {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude',
|
||||
},
|
||||
})
|
||||
.shape('circle')
|
||||
.size(16)
|
||||
.active(true)
|
||||
.select({
|
||||
color: 'red',
|
||||
})
|
||||
.color('Magnitude', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1,
|
||||
strokeWidth: 0,
|
||||
stroke: '#fff',
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
},
|
||||
)
|
||||
})
|
||||
}, [])
|
||||
return (
|
||||
<div
|
||||
id="point_circle"
|
||||
style={{
|
||||
height:'500px',
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
### point fillImage
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'point_fillImage',
|
||||
map: new GaodeMapV2({
|
||||
style: 'light',
|
||||
center: [120, 30],
|
||||
pitch: 60,
|
||||
zoom: 14
|
||||
}),
|
||||
});
|
||||
|
||||
scene.addImage(
|
||||
'marker',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
|
||||
const pointLayer = new PointLayer({ layerType: 'fillImage' })
|
||||
.source([{
|
||||
lng: 120, lat: 30, name: 'marker'
|
||||
}], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('marker')
|
||||
.size(36)
|
||||
|
||||
const pointLayer2 = new PointLayer({ layerType: 'fillImage' })
|
||||
.source([{
|
||||
lng: 120, lat: 30, name: 'marker'
|
||||
}], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('marker')
|
||||
.size(36)
|
||||
.active(true)
|
||||
.style({
|
||||
raisingHeight: 50,
|
||||
heightfixed: true
|
||||
})
|
||||
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(pointLayer);
|
||||
scene.addLayer(pointLayer2);
|
||||
})
|
||||
}, [])
|
||||
return (
|
||||
<div
|
||||
id="point_fillImage"
|
||||
style={{
|
||||
height:'500px',
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
### point image
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'point_fillImage',
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
|
||||
center: [120, 30],
|
||||
pitch: 60,
|
||||
zoom: 14
|
||||
}),
|
||||
});
|
||||
|
||||
scene.addImage(
|
||||
'marker',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
|
||||
const pointLayer = new PointLayer({ })
|
||||
.source([{
|
||||
lng: 120, lat: 30, name: 'marker'
|
||||
}], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('marker')
|
||||
.size(36)
|
||||
|
||||
const pointLayer2 = new PointLayer({ })
|
||||
.source([{
|
||||
lng: 120, lat: 30, name: 'marker'
|
||||
}], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('marker')
|
||||
.size(36)
|
||||
.active(true)
|
||||
.style({
|
||||
raisingHeight: 100,
|
||||
// heightfixed: true
|
||||
})
|
||||
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(pointLayer);
|
||||
scene.addLayer(pointLayer2);
|
||||
})
|
||||
}, [])
|
||||
return (
|
||||
<div
|
||||
id="point_fillImage"
|
||||
style={{
|
||||
height:'500px',
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
### point wave
|
||||
```tsx
|
||||
import { PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'point_wave',
|
||||
map: new GaodeMapV2({
|
||||
style: 'light',
|
||||
center: [120, 30],
|
||||
pitch: 60,
|
||||
zoom: 14
|
||||
}),
|
||||
});
|
||||
const pointLayer = new PointLayer()
|
||||
.source([{
|
||||
lng: 120, lat: 30
|
||||
}], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('circle')
|
||||
.size(36)
|
||||
.active(true)
|
||||
.select({
|
||||
color: 'red',
|
||||
})
|
||||
.color('red')
|
||||
.animate(true)
|
||||
|
||||
const pointLayer2 = new PointLayer()
|
||||
.source([{
|
||||
lng: 120, lat: 30
|
||||
}], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('circle')
|
||||
.size(36)
|
||||
.active(true)
|
||||
.select({
|
||||
color: 'red',
|
||||
})
|
||||
.color('red')
|
||||
.animate(true)
|
||||
.style({
|
||||
raisingHeight: 200,
|
||||
heightfixed: true
|
||||
})
|
||||
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(pointLayer);
|
||||
scene.addLayer(pointLayer2);
|
||||
})
|
||||
}, [])
|
||||
return (
|
||||
<div
|
||||
id="point_wave"
|
||||
style={{
|
||||
height:'500px',
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
|
@ -24,16 +24,33 @@ export enum TextureBlend {
|
|||
REPLACE = 'replace',
|
||||
}
|
||||
|
||||
export interface ILineLayerStyleOptions {
|
||||
/**
|
||||
* 基础图层类型定义
|
||||
*/
|
||||
export interface IBaseLayerStyleOptions {
|
||||
opacity: styleSingle;
|
||||
|
||||
depth?: boolean; // 是否开启深度检测
|
||||
blend?: string; // 混合方式
|
||||
|
||||
raisingHeight?: number; // 抬升高度
|
||||
heightfixed?: boolean; // 高度是否固定
|
||||
|
||||
zIndex?: number;
|
||||
|
||||
// 蒙层
|
||||
mask?: boolean; // 可选参数 时候允许蒙层
|
||||
maskInside?: boolean; // 可选参数 控制图层是否显示在蒙层的内部
|
||||
}
|
||||
|
||||
export interface ILineLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
tileOrigin?: number[];
|
||||
coord?: string;
|
||||
|
||||
opacity: styleSingle;
|
||||
lineType?: keyof typeof lineStyleType; // 可选参数、线类型(all - dash/solid)
|
||||
dashArray?: [number, number]; // 可选参数、虚线间隔
|
||||
segmentNumber?: number;
|
||||
|
||||
depth?: boolean;
|
||||
forward?: boolean; // 可选参数、是否反向(arcLine)
|
||||
lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all)
|
||||
iconStep?: number; // 可选参数、纹理贴图步长(all)
|
||||
|
|
@ -52,12 +69,6 @@ export interface ILineLayerStyleOptions {
|
|||
borderWidth?: number; // 可选参数 线边框宽度
|
||||
borderColor?: string; // 可选参数 线边框颜色
|
||||
|
||||
heightfixed?: boolean; // 可选参数 高度是否固定
|
||||
raisingHeight?: number; // 线图层抬升高度
|
||||
|
||||
mask?: boolean; // 可选参数 时候允许蒙层
|
||||
maskInside?: boolean; // 可选参数 控制图层是否显示在蒙层的内部
|
||||
|
||||
blur?: [number, number, number]; // 配置线图层的 blur 分布
|
||||
|
||||
arrow?: ILineArrow;
|
||||
|
|
@ -69,10 +80,10 @@ export interface ILineLayerStyleOptions {
|
|||
workerEnabled?: boolean;
|
||||
}
|
||||
|
||||
export interface IPointLayerStyleOptions {
|
||||
export interface IPointLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
tileOrigin?: number[];
|
||||
coord?: string;
|
||||
opacity: number;
|
||||
|
||||
strokeOpacity: number;
|
||||
strokeWidth: number;
|
||||
stroke: string;
|
||||
|
|
@ -90,11 +101,9 @@ export interface IPointLayerStyleOptions {
|
|||
fontFamily?: string;
|
||||
textAllowOverlap?: boolean;
|
||||
|
||||
raisingHeight?: number; // 线图层抬升高度
|
||||
|
||||
// cylinder
|
||||
pickLight?: boolean;
|
||||
depth?: boolean;
|
||||
|
||||
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
|
||||
targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
|
||||
opacityLinear?: {
|
||||
|
|
@ -102,13 +111,10 @@ export interface IPointLayerStyleOptions {
|
|||
dir: string;
|
||||
};
|
||||
lightEnable: boolean;
|
||||
heightfixed?: boolean; // 圆柱体高度是否固定（不随 zoom 发生变化）
|
||||
|
||||
offsets?: styleOffset;
|
||||
blend?: string;
|
||||
|
||||
unit?: string;
|
||||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
|
||||
rotation?: number; // angle
|
||||
speed?: number;
|
||||
|
|
@ -116,11 +122,9 @@ export interface IPointLayerStyleOptions {
|
|||
sourceLayer?: string;
|
||||
}
|
||||
|
||||
export interface IPolygonLayerStyleOptions {
|
||||
export interface IPolygonLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
tileOrigin?: number[];
|
||||
coord?: string;
|
||||
opacity?: number;
|
||||
|
||||
opacityLinear?: {
|
||||
enable: boolean;
|
||||
dir: string;
|
||||
|
|
@ -130,14 +134,11 @@ export interface IPolygonLayerStyleOptions {
|
|||
sidesurface?: boolean;
|
||||
|
||||
mapTexture?: string; // 挤出几何体顶面贴图
|
||||
raisingHeight?: number; // 挤出几何体抬升高度
|
||||
|
||||
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
|
||||
targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
|
||||
heightfixed?: boolean; // 挤出几何体高度是否固定（不随 zoom 发生变化）
|
||||
|
||||
pickLight: boolean;
|
||||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
|
||||
// water
|
||||
waterTexture?: string;
|
||||
|
|
@ -151,16 +152,16 @@ export interface IPolygonLayerStyleOptions {
|
|||
}
|
||||
|
||||
// 栅格瓦片图层
|
||||
export interface IRasterTileLayerStyleOptions {
|
||||
// TODO: define
|
||||
zIndex?: number;
|
||||
opacity?: number;
|
||||
export interface IRasterTileLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
// define
|
||||
opacity: number;
|
||||
}
|
||||
export interface IMaskLayerStyleOptions {
|
||||
opacity: styleSingle;
|
||||
export interface IMaskLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
// define
|
||||
opacity: number;
|
||||
}
|
||||
|
||||
export interface IWindLayerStyleOptions {
|
||||
export interface IWindLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
uMin?: number;
|
||||
uMax?: number;
|
||||
vMin?: number;
|
||||
|
|
@ -169,22 +170,14 @@ export interface IWindLayerStyleOptions {
|
|||
speedFactor?: number;
|
||||
dropRate?: number;
|
||||
dropRateBump?: number;
|
||||
opacity?: number;
|
||||
numParticles?: number;
|
||||
rampColors?: {
|
||||
[key: number]: string;
|
||||
};
|
||||
sizeScale?: number;
|
||||
|
||||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
}
|
||||
|
||||
export interface IImageLayerStyleOptions {
|
||||
opacity: number;
|
||||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
|
||||
export interface IImageLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
domain?: [number, number];
|
||||
noDataValue?: number;
|
||||
clampLow?: boolean;
|
||||
|
|
@ -198,11 +191,7 @@ export interface IImageLayerStyleOptions {
|
|||
pixelConstantRGB?: number;
|
||||
}
|
||||
|
||||
export interface IGeometryLayerStyleOptions {
|
||||
opacity: number;
|
||||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
|
||||
export interface IGeometryLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
mapTexture?: string;
|
||||
terrainTexture?: string;
|
||||
|
||||
|
|
@ -218,7 +207,6 @@ export interface IGeometryLayerStyleOptions {
|
|||
rgb2height?: (r: number, g: number, b: number) => number;
|
||||
|
||||
// billboard
|
||||
raisingHeight?: number; // 抬升高度
|
||||
canvasWidth?: number;
|
||||
canvasHeight?: number;
|
||||
drawCanvas?: (canvas: HTMLCanvasElement) => void;
|
||||
|
|
@ -253,26 +241,20 @@ export interface ICanvasLayerStyleOptions {
|
|||
drawingOnCanvas: (option: IDrawingOnCanvas) => void;
|
||||
}
|
||||
|
||||
export interface IHeatMapLayerStyleOptions {
|
||||
opacity: number;
|
||||
export interface IHeatMapLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
intensity: number;
|
||||
radius: number;
|
||||
angle: number;
|
||||
rampColors: IColorRamp;
|
||||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
|
||||
coverage?: number;
|
||||
}
|
||||
|
||||
export interface IRasterLayerStyleOptions {
|
||||
opacity: number;
|
||||
export interface IRasterLayerStyleOptions extends IBaseLayerStyleOptions {
|
||||
domain: [number, number];
|
||||
noDataValue: number;
|
||||
clampLow: boolean;
|
||||
clampHigh: boolean;
|
||||
rampColors: IColorRamp;
|
||||
mask?: boolean;
|
||||
maskInside?: boolean;
|
||||
rampColorsData?: ImageData | IImagedata;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default class ImageModel extends BaseModel {
|
|||
public getUninforms(): IModelUniform {
|
||||
const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
|
||||
return {
|
||||
u_opacity: opacity || 1,
|
||||
u_opacity: (opacity as number) || 1,
|
||||
u_texture: this.texture,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ export default class FillModel extends BaseModel {
|
|||
blend,
|
||||
blur = 0,
|
||||
raisingHeight = 0,
|
||||
heightfixed = false,
|
||||
unit = 'l7size',
|
||||
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
|
||||
this.updateUnit(unit);
|
||||
|
|
@ -90,6 +91,7 @@ export default class FillModel extends BaseModel {
|
|||
}
|
||||
return {
|
||||
u_raisingHeight: Number(raisingHeight),
|
||||
u_heightfixed: Number(heightfixed),
|
||||
|
||||
u_meter2coord: this.meter2coord,
|
||||
u_meteryScale: this.meteryScale,
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ export default class FillImageModel extends BaseModel {
|
|||
opacity = 1,
|
||||
offsets = [0, 0],
|
||||
rotation,
|
||||
raisingHeight = 0.0,
|
||||
heightfixed = false,
|
||||
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
|
||||
|
||||
if (this.rendererService.getDirty()) {
|
||||
|
|
@ -94,6 +96,8 @@ export default class FillImageModel extends BaseModel {
|
|||
});
|
||||
}
|
||||
return {
|
||||
u_raisingHeight: Number(raisingHeight),
|
||||
u_heightfixed: Number(heightfixed),
|
||||
u_isMeter: Number(this.isMeter),
|
||||
u_RotateMatrix: new Float32Array([
|
||||
Math.cos(this.radian),
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ export default class ImageModel extends BaseModel {
|
|||
const {
|
||||
opacity = 1,
|
||||
offsets = [0, 0],
|
||||
raisingHeight = 0,
|
||||
heightfixed = false,
|
||||
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
|
||||
if (this.rendererService.getDirty()) {
|
||||
this.texture.bind();
|
||||
|
|
@ -64,6 +66,9 @@ export default class ImageModel extends BaseModel {
|
|||
});
|
||||
}
|
||||
return {
|
||||
u_raisingHeight: Number(raisingHeight),
|
||||
u_heightfixed: Number(heightfixed),
|
||||
|
||||
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
|
||||
u_cellTypeLayout: this.getCellTypeLayout(),
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ uniform vec2 u_offsets;
|
|||
|
||||
uniform float u_blur : 0.0;
|
||||
uniform float u_raisingHeight: 0.0;
|
||||
uniform float u_heightfixed: 0.0;
|
||||
|
||||
#pragma include "styleMapping"
|
||||
#pragma include "styleMappingCalOpacity"
|
||||
|
|
@ -164,16 +165,22 @@ void main() {
|
|||
vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
|
||||
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
|
||||
|
||||
float raiseHeight = u_raisingHeight;
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
|
||||
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
|
||||
raiseHeight = u_raisingHeight * mapboxZoomScale;
|
||||
float raisingHeight = u_raisingHeight;
|
||||
|
||||
if(u_heightfixed < 1.0) { // false
|
||||
raisingHeight = project_pixel(u_raisingHeight);
|
||||
} else {
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
|
||||
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
|
||||
raisingHeight = u_raisingHeight * mapboxZoomScale;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
|
||||
gl_Position = u_Mvp * vec4(project_pos.xy + offset, raiseHeight, 1.0);
|
||||
gl_Position = u_Mvp * vec4(project_pos.xy + offset, raisingHeight, 1.0);
|
||||
} else {
|
||||
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, u_raisingHeight, 1.0));
|
||||
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));
|
||||
}
|
||||
|
||||
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ uniform float u_isMeter;
|
|||
varying vec2 v_uv; // 本身的 uv 坐标
|
||||
varying vec2 v_Iconuv; // icon 贴图的 uv 坐标
|
||||
|
||||
uniform float u_raisingHeight: 0.0;
|
||||
uniform float u_heightfixed: 0.0;
|
||||
uniform float u_opacity : 1;
|
||||
uniform vec2 u_offsets;
|
||||
|
||||
|
|
@ -91,15 +93,21 @@ void main() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
|
||||
vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
|
||||
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
|
||||
float raisingHeight = u_raisingHeight;
|
||||
if(u_heightfixed < 1.0) { // height fixed
|
||||
raisingHeight = project_pixel(u_raisingHeight);
|
||||
} else {
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
|
||||
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
|
||||
raisingHeight = u_raisingHeight * mapboxZoomScale;
|
||||
}
|
||||
}
|
||||
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
|
||||
gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
|
||||
gl_Position = u_Mvp * vec4(project_pos.xy + offset, raisingHeight, 1.0);
|
||||
} else {
|
||||
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
|
||||
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));
|
||||
}
|
||||
|
||||
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ uniform mat4 u_Mvp;
|
|||
uniform vec2 u_offsets;
|
||||
|
||||
uniform float u_opacity : 1;
|
||||
uniform float u_raisingHeight: 0.0;
|
||||
uniform float u_heightfixed: 0.0;
|
||||
|
||||
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
|
||||
|
||||
|
|
@ -61,21 +63,28 @@ void main() {
|
|||
}
|
||||
|
||||
// cal style mapping - 数据纹理映射部分的计算
|
||||
v_color = a_Color;
|
||||
v_uv = a_Uv;
|
||||
vec4 project_pos = project_position(vec4(a_Position, 1.0));
|
||||
v_color = a_Color;
|
||||
v_uv = a_Uv;
|
||||
vec4 project_pos = project_position(vec4(a_Position, 1.0));
|
||||
|
||||
// vec2 offset = project_pixel(u_offsets);
|
||||
vec2 offset = project_pixel(textrueOffsets);
|
||||
|
||||
// gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0));
|
||||
float raisingHeight = u_raisingHeight;
|
||||
if(u_heightfixed < 1.0) { // false
|
||||
raisingHeight = project_pixel(u_raisingHeight);
|
||||
} else {
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
|
||||
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
|
||||
raisingHeight = u_raisingHeight * mapboxZoomScale;
|
||||
}
|
||||
}
|
||||
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
|
||||
gl_Position = u_Mvp * vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0);
|
||||
gl_Position = u_Mvp * vec4(project_pos.xy + offset, raisingHeight, 1.0);
|
||||
} else {
|
||||
gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0));
|
||||
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));
|
||||
}
|
||||
gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
|
||||
|
||||
gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
|
||||
setPickingColor(a_PickingColor);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue