mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'feat-layer-repaint' into 'master'
Feat layer repaint 增加图层更新机制 See merge request !24
This commit is contained in:
thinkinggis
commit
4b0da460d4
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="geometry" content="diagram">
|
||||
<link rel="stylesheet" href="./assets/common.css">
|
||||
<link rel="stylesheet" href="./assets/info.css">
|
||||
<title>point_circle</title>
|
||||
<style>
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
.amap-maps {
|
||||
cursor: auto !important
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script src="./assets/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script>
|
||||
var radius = 0.2;
|
||||
|
||||
function pointOnCircle(angle) {
|
||||
return {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
120.19382669582967 + Math.cos(angle) * radius,
|
||||
30.258134 + Math.sin(angle) * radius
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
console.log(pointOnCircle(10))
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'light', // 样式URL
|
||||
center: [ 120.19382669582967, 30.258134 ],
|
||||
pitch: 0,
|
||||
zoom: 2,
|
||||
maxZoom:20,
|
||||
hash:true,
|
||||
minZoom:0,
|
||||
});
|
||||
window.scene = scene;
|
||||
scene.on('loaded', () => {
|
||||
const circleLayer = scene.PointLayer({
|
||||
zIndex: 0,
|
||||
})
|
||||
.source(pointOnCircle(0))
|
||||
.shape('circle')
|
||||
.size(10) // default 1
|
||||
.active(true)
|
||||
.color('#2894E0')
|
||||
.style({
|
||||
stroke: 'rgb(255,255,255)',
|
||||
strokeWidth: 1,
|
||||
opacity: 0.8
|
||||
})
|
||||
.render();
|
||||
|
||||
function animateMarker(timestamp) {
|
||||
|
||||
circleLayer.setData(pointOnCircle(timestamp / 1000));
|
||||
requestAnimationFrame(animateMarker);
|
||||
}
|
||||
animateMarker(0);
|
||||
|
||||
/**
|
||||
const layerText = scene.PointLayer({
|
||||
zIndex: 3
|
||||
})
|
||||
.source(circleLayer.layerSource)
|
||||
.shape('point_count', 'text')
|
||||
.active(true)
|
||||
.size('point_count', [ 0, 16]) // default 1
|
||||
.color('#f00')
|
||||
.style({
|
||||
stroke: '#999',
|
||||
strokeWidth: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.render();
|
||||
console.log(layerText);
|
||||
|
||||
});
|
||||
**/
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<script src="../build/L7.js"></script>
|
||||
<script>
|
||||
const colorObj ={
|
||||
blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse(),
|
||||
blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"],
|
||||
red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
|
||||
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
|
||||
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
|
||||
|
|
@ -35,43 +35,53 @@ const colorObj ={
|
|||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'light', // 样式URL
|
||||
mapStyle: 'dark', // 样式URL
|
||||
center: [ 120.19382669582967, 30.258134 ],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
maxZoom:14,
|
||||
minZoom:11,
|
||||
maxZoom:20,
|
||||
minZoom:0,
|
||||
});
|
||||
window.scene = scene;
|
||||
scene.on('loaded', () => {
|
||||
$.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', data => {
|
||||
const circleLayer = scene.PointLayer({
|
||||
zIndex: 2,
|
||||
zIndex: 0,
|
||||
})
|
||||
.source(data)
|
||||
.shape('circle')
|
||||
.size('value', [ 2, 30]) // default 1
|
||||
.scale('value', {
|
||||
type:'log',
|
||||
.source(data,{
|
||||
isCluster:true
|
||||
})
|
||||
.shape('hexagon')
|
||||
.size('point_count', [ 5, 40]) // default 1
|
||||
//.size('value', [ 10, 300]) // default 1
|
||||
.active(true)
|
||||
.filter('value', field_8 => {
|
||||
return field_8 * 1 > 500;
|
||||
})
|
||||
.color('type', colorObj.blue)
|
||||
.color('point_count',colorObj.blue)
|
||||
.style({
|
||||
stroke: 'rgb(255,255,255)',
|
||||
strokeWidth: 1,
|
||||
opacity: 1.
|
||||
opacity: 1
|
||||
})
|
||||
.render();
|
||||
console.log(circleLayer);
|
||||
var a = circleLayer.getLegendCfg('type','color');
|
||||
console.log(a);
|
||||
circleLayer.on('click',(e)=>{
|
||||
console.log(e);
|
||||
window.circleLayer = circleLayer;
|
||||
const layerText = scene.PointLayer({
|
||||
zIndex: 3
|
||||
})
|
||||
.source(circleLayer.layerSource)
|
||||
.shape('point_count', 'text')
|
||||
.active(true)
|
||||
.filter('point_count',(p)=>{
|
||||
return p > 50
|
||||
})
|
||||
.size('point_count', [ 5, 20]) // default 1
|
||||
.color('#fff')
|
||||
.style({
|
||||
stroke: '#999',
|
||||
strokeWidth: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.render();
|
||||
console.log(layerText);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="geometry" content="diagram">
|
||||
<link rel="stylesheet" href="./assets/common.css">
|
||||
<link rel="stylesheet" href="./assets/info.css">
|
||||
<title>animateLine</title>
|
||||
<style>
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
.amap-maps {
|
||||
cursor: auto !important
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script src="./assets/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script>
|
||||
var geojson = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[0, 0],
|
||||
[0.001, 0.0001]
|
||||
]
|
||||
}
|
||||
} ]
|
||||
};
|
||||
var speedFactor = 30; // number of frames per longitude degree
|
||||
var animation; // to store and cancel the animation
|
||||
var startTime = 0;
|
||||
var progress = 0; // progress = timestamp - startTime
|
||||
var resetTime = false; // indicator of whether time reset is needed for the animation
|
||||
var pauseButton = document.getElementById('pause');
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'light', // 样式URL
|
||||
center: [ 120.19382669582967, 30.258134 ],
|
||||
pitch: 0,
|
||||
zoom: 2,
|
||||
maxZoom:20,
|
||||
minZoom:0,
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
const linelayer = scene.LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(geojson)
|
||||
.size([2,1])
|
||||
.shape('line')
|
||||
.color( "#2894E0")
|
||||
.render();
|
||||
startTime = performance.now();
|
||||
animateLine(0);
|
||||
function animateLine(timestamp) {
|
||||
if (resetTime) {
|
||||
// resume previous progress
|
||||
startTime = performance.now() - progress;
|
||||
resetTime = false;
|
||||
} else {
|
||||
progress = timestamp - startTime;
|
||||
}
|
||||
|
||||
// restart if it finishes a loop
|
||||
if (progress > speedFactor * 360) {
|
||||
startTime = timestamp;
|
||||
geojson.features[0].geometry.coordinates = [
|
||||
[0, 0],
|
||||
[0.001, 0.0001]
|
||||
];
|
||||
} else {
|
||||
var x = progress / speedFactor;
|
||||
// draw a sine wave with some math.
|
||||
var y = Math.sin(x * Math.PI / 90) * 40;
|
||||
// append new coordinates to the lineString
|
||||
|
||||
geojson.features[0].geometry.coordinates.push([x, y]);
|
||||
// then update the map
|
||||
linelayer.setData(geojson);
|
||||
}
|
||||
// Request the next frame of the animation.
|
||||
animation = requestAnimationFrame(animateLine);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 564 KiB After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 214 KiB After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 528 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "1.1.7",
|
||||
"version": "1.1.8",
|
||||
"description": "Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "build/l7.js",
|
||||
"browser": "build/l7.js",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,227 @@
|
|||
import TinySDF from '@mapbox/tiny-sdf';
|
||||
import { buildMapping } from '../../util/font-util';
|
||||
import * as THREE from '../../core/three';
|
||||
import LRUCache from '../../util/lru-cache';
|
||||
export const DEFAULT_CHAR_SET = getDefaultCharacterSet();
|
||||
export const DEFAULT_FONT_FAMILY = 'sans-serif';
|
||||
export const DEFAULT_FONT_WEIGHT = 'normal';
|
||||
export const DEFAULT_FONT_SIZE = 24;
|
||||
export const DEFAULT_BUFFER = 3;
|
||||
export const DEFAULT_CUTOFF = 0.25;
|
||||
export const DEFAULT_RADIUS = 8;
|
||||
const MAX_CANVAS_WIDTH = 1024;
|
||||
const BASELINE_SCALE = 0.9;
|
||||
const HEIGHT_SCALE = 1.2;
|
||||
const CACHE_LIMIT = 3;
|
||||
const cache = new LRUCache(CACHE_LIMIT);
|
||||
|
||||
const VALID_PROPS = [
|
||||
'fontFamily',
|
||||
'fontWeight',
|
||||
'characterSet',
|
||||
'fontSize',
|
||||
'sdf',
|
||||
'buffer',
|
||||
'cutoff',
|
||||
'radius'
|
||||
];
|
||||
|
||||
function getDefaultCharacterSet() {
|
||||
const charSet = [];
|
||||
for (let i = 32; i < 128; i++) {
|
||||
charSet.push(String.fromCharCode(i));
|
||||
}
|
||||
return charSet;
|
||||
}
|
||||
|
||||
function setTextStyle(ctx, fontFamily, fontSize, fontWeight) {
|
||||
ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.textBaseline = 'baseline';
|
||||
ctx.textAlign = 'left';
|
||||
}
|
||||
function getNewChars(key, characterSet) {
|
||||
const cachedFontAtlas = cache.get(key);
|
||||
if (!cachedFontAtlas) {
|
||||
return characterSet;
|
||||
}
|
||||
|
||||
const newChars = [];
|
||||
const cachedMapping = cachedFontAtlas.mapping;
|
||||
let cachedCharSet = Object.keys(cachedMapping);
|
||||
cachedCharSet = new Set(cachedCharSet);
|
||||
|
||||
let charSet = characterSet;
|
||||
if (charSet instanceof Array) {
|
||||
charSet = new Set(charSet);
|
||||
}
|
||||
|
||||
charSet.forEach(char => {
|
||||
if (!cachedCharSet.has(char)) {
|
||||
newChars.push(char);
|
||||
}
|
||||
});
|
||||
|
||||
return newChars;
|
||||
}
|
||||
|
||||
function populateAlphaChannel(alphaChannel, imageData) {
|
||||
// populate distance value from tinySDF to image alpha channel
|
||||
for (let i = 0; i < alphaChannel.length; i++) {
|
||||
imageData.data[4 * i + 3] = alphaChannel[i];
|
||||
}
|
||||
}
|
||||
|
||||
export default class FontAtlasManager {
|
||||
constructor() {
|
||||
|
||||
// font settings
|
||||
this.props = {
|
||||
fontFamily: DEFAULT_FONT_FAMILY,
|
||||
fontWeight: DEFAULT_FONT_WEIGHT,
|
||||
characterSet: DEFAULT_CHAR_SET,
|
||||
fontSize: DEFAULT_FONT_SIZE,
|
||||
buffer: DEFAULT_BUFFER,
|
||||
// sdf only props
|
||||
// https://github.com/mapbox/tiny-sdf
|
||||
sdf: true,
|
||||
cutoff: DEFAULT_CUTOFF,
|
||||
radius: DEFAULT_RADIUS
|
||||
};
|
||||
|
||||
// key is used for caching generated fontAtlas
|
||||
this._key = null;
|
||||
this._texture = new THREE.Texture();
|
||||
}
|
||||
|
||||
get texture() {
|
||||
return this._texture;
|
||||
}
|
||||
|
||||
get mapping() {
|
||||
const data = cache.get(this._key);
|
||||
return data && data.mapping;
|
||||
}
|
||||
|
||||
get scale() {
|
||||
return HEIGHT_SCALE;
|
||||
}
|
||||
|
||||
get fontAtlas() {
|
||||
return this._fontAtlas;
|
||||
}
|
||||
|
||||
setProps(props = {}) {
|
||||
VALID_PROPS.forEach(prop => {
|
||||
if (prop in props) {
|
||||
this.props[prop] = props[prop];
|
||||
}
|
||||
});
|
||||
|
||||
// update cache key
|
||||
const oldKey = this._key;
|
||||
this._key = this._getKey();
|
||||
|
||||
const charSet = getNewChars(this._key, this.props.characterSet);
|
||||
const cachedFontAtlas = cache.get(this._key);
|
||||
|
||||
// if a fontAtlas associated with the new settings is cached and
|
||||
// there are no new chars
|
||||
if (cachedFontAtlas && charSet.length === 0) {
|
||||
// update texture with cached fontAtlas
|
||||
if (this._key !== oldKey) {
|
||||
this._updateTexture(cachedFontAtlas);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// update fontAtlas with new settings
|
||||
const fontAtlas = this._generateFontAtlas(this._key, charSet, cachedFontAtlas);
|
||||
this._fontAtlas = fontAtlas;
|
||||
this._updateTexture(fontAtlas);
|
||||
|
||||
// update cache
|
||||
cache.set(this._key, fontAtlas);
|
||||
}
|
||||
|
||||
_updateTexture({ data: canvas }) {
|
||||
this._texture = new THREE.CanvasTexture(canvas);
|
||||
this._texture.wrapS = THREE.ClampToEdgeWrapping;
|
||||
this._texture.wrapT = THREE.ClampToEdgeWrapping;
|
||||
this._texture.minFilter = THREE.LinearFilter;
|
||||
this._texture.flipY = false;
|
||||
this._texture.needUpdate = true;
|
||||
}
|
||||
|
||||
_generateFontAtlas(key, characterSet, cachedFontAtlas) {
|
||||
const { fontFamily, fontWeight, fontSize, buffer, sdf, radius, cutoff } = this.props;
|
||||
let canvas = cachedFontAtlas && cachedFontAtlas.data;
|
||||
if (!canvas) {
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.width = MAX_CANVAS_WIDTH;
|
||||
}
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
setTextStyle(ctx, fontFamily, fontSize, fontWeight);
|
||||
|
||||
// 1. build mapping
|
||||
const { mapping, canvasHeight, xOffset, yOffset } = buildMapping(
|
||||
Object.assign(
|
||||
{
|
||||
getFontWidth: char => ctx.measureText(char).width,
|
||||
fontHeight: fontSize * HEIGHT_SCALE,
|
||||
buffer,
|
||||
characterSet,
|
||||
maxCanvasWidth: MAX_CANVAS_WIDTH
|
||||
},
|
||||
cachedFontAtlas && {
|
||||
mapping: cachedFontAtlas.mapping,
|
||||
xOffset: cachedFontAtlas.xOffset,
|
||||
yOffset: cachedFontAtlas.yOffset
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
// 2. update canvas
|
||||
// copy old canvas data to new canvas only when height changed
|
||||
if (canvas.height !== canvasHeight) {
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
canvas.height = canvasHeight;
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
}
|
||||
setTextStyle(ctx, fontFamily, fontSize, fontWeight);
|
||||
|
||||
// 3. layout characters
|
||||
if (sdf) {
|
||||
const tinySDF = new TinySDF(fontSize, buffer, radius, cutoff, fontFamily, fontWeight);
|
||||
// used to store distance values from tinySDF
|
||||
// tinySDF.size equals `fontSize + buffer * 2`
|
||||
const imageData = ctx.getImageData(0, 0, tinySDF.size, tinySDF.size);
|
||||
|
||||
for (const char of characterSet) {
|
||||
populateAlphaChannel(tinySDF.draw(char), imageData);
|
||||
ctx.putImageData(imageData, mapping[char].x - buffer, mapping[char].y - buffer);
|
||||
}
|
||||
} else {
|
||||
for (const char of characterSet) {
|
||||
ctx.fillText(char, mapping[char].x, mapping[char].y + fontSize * BASELINE_SCALE);
|
||||
}
|
||||
}
|
||||
return {
|
||||
xOffset,
|
||||
yOffset,
|
||||
mapping,
|
||||
data: canvas,
|
||||
width: canvas.width,
|
||||
height: canvas.height
|
||||
};
|
||||
}
|
||||
|
||||
_getKey() {
|
||||
const { fontFamily, fontWeight, fontSize, buffer, sdf, radius, cutoff } = this.props;
|
||||
if (sdf) {
|
||||
return `${fontFamily} ${fontWeight} ${fontSize} ${buffer} ${radius} ${cutoff}`;
|
||||
}
|
||||
return `${fontFamily} ${fontWeight} ${fontSize} ${buffer}`;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import { buildIconMaping } from '../../util/font-util';
|
||||
import * as THREE from '../../../../core/three';
|
||||
const BUFFER = 3;
|
||||
const MAX_CANVAS_WIDTH = 1024;
|
||||
export default class IconManager {
|
||||
constructor() {
|
||||
this._getIcon = null;
|
||||
this._mapping = {};
|
||||
this._autoPacking = false;
|
||||
this.iconData = {};
|
||||
this._canvas = document.createElement('canvas');
|
||||
this._texture = new THREE.Texture(this._canvas);
|
||||
this.ctx = this._canvas.getContext('2d');
|
||||
}
|
||||
getTexture() {
|
||||
return this._texture;
|
||||
}
|
||||
|
||||
_updateIconAtlas() {
|
||||
this._canvas.width = MAX_CANVAS_WIDTH;
|
||||
this._canvas.height = this._canvasHeigth;
|
||||
for (const key in this.mapping) {
|
||||
const icon = this.mapping[key];
|
||||
const { x, y, image } = icon;
|
||||
this.ctx.drawImage(image, x, y, this.imageWidth, this.imageWidth);
|
||||
}
|
||||
this.texture.magFilter = THREE.LinearFilter;
|
||||
this.texture.minFilter = THREE.LinearFilter;
|
||||
this.texture.needsUpdate = true;
|
||||
}
|
||||
|
||||
addImage(id, opt) {
|
||||
this._loadImage(opt).then(image => {
|
||||
this.iconData.push({ id, image });
|
||||
const { mapping, canvasHeight } = buildIconMaping(this.iconData, BUFFER, MAX_CANVAS_WIDTH);
|
||||
this._mapping = mapping;
|
||||
this._canvasHeigth = canvasHeight;
|
||||
});
|
||||
}
|
||||
_loadImage(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image();
|
||||
image.onload = () => {
|
||||
resolve(image);
|
||||
};
|
||||
image.onerror = function() {
|
||||
reject(new Error('Could not load image at ' + url));
|
||||
};
|
||||
image.src = url;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -8,8 +8,9 @@ import ColorUtil from '../attr/color-util';
|
|||
import Controller from './controller/index';
|
||||
import source from './source';
|
||||
import pickingFragmentShader from '../core/engine/picking/picking_frag.glsl';
|
||||
// import PickingMaterial from '../core/engine/picking/pickingMaterial';
|
||||
import { getInteraction } from '../interaction/index';
|
||||
import Attr from '../attr/index';
|
||||
import diff from '../util/diff';
|
||||
import Util from '../util';
|
||||
import Global from '../global';
|
||||
let id = 1;
|
||||
|
|
@ -36,6 +37,7 @@ export default class Layer extends Base {
|
|||
attrOptions: {
|
||||
},
|
||||
scaleOptions: {},
|
||||
preScaleOptions: null,
|
||||
scales: {},
|
||||
attrs: {},
|
||||
// 样式配置项
|
||||
|
|
@ -53,6 +55,7 @@ export default class Layer extends Base {
|
|||
activedOptions: {
|
||||
fill: [ 1.0, 0, 0, 1.0 ]
|
||||
},
|
||||
interactions: {},
|
||||
animateOptions: {
|
||||
enable: false
|
||||
}
|
||||
|
|
@ -66,6 +69,7 @@ export default class Layer extends Base {
|
|||
this._pickObject3D = new THREE.Object3D();
|
||||
this._object3D.visible = this.get('visible');
|
||||
this._object3D.renderOrder = this.get('zIndex') || 0;
|
||||
this._mapEventHandlers = [];
|
||||
const layerId = this._getUniqueId();
|
||||
this.layerId = layerId;
|
||||
this._activeIds = null;
|
||||
|
|
@ -86,14 +90,11 @@ export default class Layer extends Base {
|
|||
if (object.type === 'composer') {
|
||||
this._object3D = object;
|
||||
this.scene._engine.composerLayers.push(object);
|
||||
setTimeout(() => this.scene._engine.update(), 500);
|
||||
return;
|
||||
}
|
||||
|
||||
type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
|
||||
this._visibleWithZoom();
|
||||
this._zoomchangeHander = this._visibleWithZoom.bind(this);
|
||||
this.scene.on('zoomchange', this._zoomchangeHander);
|
||||
|
||||
object.onBeforeRender = () => { // 每次渲染前改变状态
|
||||
const zoom = this.scene.getZoom();
|
||||
object.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime());
|
||||
|
|
@ -104,15 +105,10 @@ export default class Layer extends Base {
|
|||
object.onAfterRender = () => { // 每次渲染后改变状态
|
||||
this.afterRender();
|
||||
};
|
||||
// 更新
|
||||
if (this._needUpdateFilter) { // 动态更新数据过滤
|
||||
this._updateFilter(object);
|
||||
}
|
||||
this._object3D.add(object);
|
||||
if (type === 'fill') {
|
||||
this._addPickMesh(object);// 不对边界线进行拾取
|
||||
}
|
||||
this.scene._engine.update();
|
||||
setTimeout(() => this.scene._engine.update(), 500);
|
||||
}
|
||||
remove(object) {
|
||||
|
|
@ -132,8 +128,13 @@ export default class Layer extends Base {
|
|||
this._object3D.visible = this.get('visible');
|
||||
}
|
||||
source(data, cfg = {}) {
|
||||
if (data instanceof source) {
|
||||
this.layerSource = data;
|
||||
return this;
|
||||
}
|
||||
cfg.data = data;
|
||||
cfg.mapType = this.scene.mapType;
|
||||
cfg.zoom = this.scene.getZoom();
|
||||
this.layerSource = new source(cfg);
|
||||
// this.scene.workerPool.runTask({
|
||||
// command: 'geojson',
|
||||
|
|
@ -144,7 +145,6 @@ export default class Layer extends Base {
|
|||
return this;
|
||||
}
|
||||
color(field, values) {
|
||||
this._needUpdateColor = true;// 标识颜色是否需要更新
|
||||
this._createAttrOption('color', field, values, Global.colors);
|
||||
return this;
|
||||
}
|
||||
|
|
@ -224,7 +224,6 @@ export default class Layer extends Base {
|
|||
}
|
||||
|
||||
filter(field, values) {
|
||||
this._needUpdateFilter = true;
|
||||
this._createAttrOption('filter', field, values, true);
|
||||
return this;
|
||||
}
|
||||
|
|
@ -263,6 +262,10 @@ export default class Layer extends Base {
|
|||
this._visible(true);
|
||||
return this;
|
||||
}
|
||||
setData(data, cfg) {
|
||||
this.layerSource.setData(data, cfg);
|
||||
this.repaint();
|
||||
}
|
||||
_createScale(field) {
|
||||
// TODO scale更新
|
||||
const scales = this.get('scales');
|
||||
|
|
@ -316,24 +319,53 @@ export default class Layer extends Base {
|
|||
}
|
||||
return scale;
|
||||
}
|
||||
render() {
|
||||
this.init();
|
||||
this.scene._engine.update();
|
||||
return this;
|
||||
}
|
||||
// 重绘 度量， 映射，顶点构建
|
||||
repaint() {
|
||||
this.set('scales', {});
|
||||
this._initControllers();
|
||||
this._initAttrs();
|
||||
this._mapping();
|
||||
this.redraw();
|
||||
}
|
||||
// 初始化图层
|
||||
init() {
|
||||
this._initControllers();
|
||||
this._initAttrs();
|
||||
this._scaleByZoom();
|
||||
this._mapping();
|
||||
|
||||
const activeHander = this._addActiveFeature.bind(this);
|
||||
const resetHander = this._resetStyle.bind(this);
|
||||
if (this.get('allowActive')) {
|
||||
|
||||
this.on('mousemove', activeHander);
|
||||
this.on('mouseleave', resetHander);
|
||||
|
||||
} else {
|
||||
this.off('mousemove', activeHander);
|
||||
this.off('mouseleave', resetHander);
|
||||
this._updateDraw();
|
||||
}
|
||||
_initInteraction() {
|
||||
if (this.get('allowActive')) {
|
||||
this.interaction('active');
|
||||
}
|
||||
}
|
||||
_initMapEvent() {
|
||||
// zoomchange mapmove resize
|
||||
const EVENT_TYPES = [ 'zoomchange', 'dragend' ];
|
||||
Util.each(EVENT_TYPES, type => {
|
||||
const handler = Util.wrapBehavior(this, `${type}`);
|
||||
this.map.on(`${type}`, handler);
|
||||
this._mapEventHandlers.push({ type, handler });
|
||||
});
|
||||
}
|
||||
clearMapEvent() {
|
||||
const eventHandlers = this._mapEventHandlers;
|
||||
Util.each(eventHandlers, eh => {
|
||||
this.map.off(eh.type, eh.handler);
|
||||
});
|
||||
}
|
||||
zoomchange(ev) {
|
||||
// 地图缩放等级变化
|
||||
this._visibleWithZoom(ev);
|
||||
}
|
||||
dragend() {
|
||||
|
||||
}
|
||||
resize() {
|
||||
}
|
||||
|
||||
setActive(id, color) {
|
||||
|
|
@ -353,6 +385,7 @@ export default class Layer extends Base {
|
|||
|
||||
|
||||
_initAttrs() {
|
||||
// 对比 options变化判断如何更新
|
||||
const attrOptions = this.get('attrOptions');
|
||||
for (const type in attrOptions) {
|
||||
if (attrOptions.hasOwnProperty(type)) {
|
||||
|
|
@ -360,6 +393,55 @@ export default class Layer extends Base {
|
|||
}
|
||||
}
|
||||
}
|
||||
_setPreOption() {
|
||||
const nextAttrs = this.get('attrOptions');
|
||||
const nextStyle = this.get('styleOptions');
|
||||
this.set('preAttrOptions', Util.clone(nextAttrs));
|
||||
this.set('preStyleOption', Util.clone(nextStyle));
|
||||
}
|
||||
_updateDraw() {
|
||||
const preAttrs = this.get('preAttrOptions');
|
||||
const nextAttrs = this.get('attrOptions');
|
||||
const preStyle = this.get('preStyleOption');
|
||||
const nextStyle = this.get('styleOptions');
|
||||
if (preAttrs === undefined && preStyle === undefined) {
|
||||
this._mapping();
|
||||
this._setPreOption();
|
||||
this._scaleByZoom();
|
||||
this._initInteraction();
|
||||
this._initMapEvent();
|
||||
this.draw();
|
||||
return;
|
||||
}
|
||||
if (!Util.isEqual(preAttrs.color, nextAttrs.color)) {
|
||||
this._updateAttributes(this.layerMesh);
|
||||
}
|
||||
// 更新数据过滤 filter
|
||||
if (!Util.isEqual(preAttrs.filter, nextAttrs.filter)) {
|
||||
// 更新color；
|
||||
this._updateAttributes(this.layerMesh);
|
||||
}
|
||||
// 更新Size
|
||||
if (!Util.isEqual(preAttrs.size, nextAttrs.size)) {
|
||||
// 更新color；
|
||||
this._updateSize();
|
||||
}
|
||||
// 更新形状
|
||||
if (!Util.isEqual(preAttrs.shape, nextAttrs.shape)) {
|
||||
// 更新color；
|
||||
this._updateShape();
|
||||
}
|
||||
if (!Util.isEqual(preStyle, nextStyle)) {
|
||||
// 判断新增，修改，删除
|
||||
const newStyle = {};
|
||||
Util.each(diff(preStyle, nextStyle), ({ type, key, value }) => {
|
||||
(type !== 'remove') && (newStyle[key] = value);
|
||||
// newStyle[key] = type === 'remove' ? null : value;
|
||||
});
|
||||
this._updateStyle(newStyle);
|
||||
}
|
||||
this._setPreOption();
|
||||
}
|
||||
|
||||
_updateAttr(type) {
|
||||
const self = this;
|
||||
|
|
@ -400,7 +482,14 @@ export default class Layer extends Base {
|
|||
}
|
||||
this.emit('sizeUpdated', this.zoomSizeCache[zoom]);
|
||||
}
|
||||
_updateStyle(option) {
|
||||
const newOption = { };
|
||||
for (const key in option) {
|
||||
newOption['u_' + key] = option[key];
|
||||
}
|
||||
this.layerMesh.material.updateUninform(newOption);
|
||||
|
||||
}
|
||||
_mapping() {
|
||||
const self = this;
|
||||
const attrs = self.get('attrs');
|
||||
|
|
@ -410,13 +499,12 @@ export default class Layer extends Base {
|
|||
for (let i = 0; i < data.length; i++) {
|
||||
const record = data[i];
|
||||
const newRecord = {};
|
||||
|
||||
newRecord.id = data[i]._id;
|
||||
for (const k in attrs) {
|
||||
if (attrs.hasOwnProperty(k)) {
|
||||
const attr = attrs[k];
|
||||
attr.needUpdate = false;
|
||||
const names = attr.names;
|
||||
|
||||
const values = self._getAttrValues(attr, record);
|
||||
if (names.length > 1) { // position 之类的生成多个字段的属性
|
||||
for (let j = 0; j < values.length; j++) {
|
||||
|
|
@ -433,6 +521,12 @@ export default class Layer extends Base {
|
|||
newRecord.coordinates = record.coordinates;
|
||||
mappedData.push(newRecord);
|
||||
}
|
||||
// 通过透明度过滤数据
|
||||
if (attrs.hasOwnProperty('filter')) {
|
||||
mappedData.forEach(item => {
|
||||
item.filter === false && (item.color[3] = 0);
|
||||
});
|
||||
}
|
||||
this.layerData = mappedData;
|
||||
}
|
||||
|
||||
|
|
@ -483,17 +577,6 @@ export default class Layer extends Base {
|
|||
const values = attr.mapping(...params);
|
||||
return values;
|
||||
}
|
||||
|
||||
// temp
|
||||
_getDataType(data) {
|
||||
if (data.hasOwnProperty('type')) {
|
||||
const type = data.type;
|
||||
if (type === 'FeatureCollection') {
|
||||
return 'geojson';
|
||||
}
|
||||
}
|
||||
return 'basic';
|
||||
}
|
||||
_scaleByZoom() {
|
||||
if (this._zoomScale) {
|
||||
this.map.on('zoomend', () => {
|
||||
|
|
@ -502,11 +585,7 @@ export default class Layer extends Base {
|
|||
});
|
||||
}
|
||||
}
|
||||
// on(type, callback) {
|
||||
|
||||
// this._addPickingEvents();
|
||||
// super.on(type, callback);
|
||||
// }
|
||||
getPickingId() {
|
||||
return this.scene._engine._picking.getNextId();
|
||||
}
|
||||
|
|
@ -519,19 +598,9 @@ export default class Layer extends Base {
|
|||
_addPickMesh(mesh) {
|
||||
this._pickingMesh = new THREE.Object3D();
|
||||
this._pickingMesh.name = this.layerId;
|
||||
// this._visibleWithZoom();
|
||||
// this.scene.on('zoomchange', () => {
|
||||
// this._visibleWithZoom();
|
||||
// });
|
||||
this.addToPicking(this._pickingMesh);
|
||||
const pickmaterial = mesh.material.clone();
|
||||
|
||||
pickmaterial.fragmentShader = pickingFragmentShader;
|
||||
// const pickmaterial = new PickingMaterial({
|
||||
// u_zoom: this.scene.getZoom(),
|
||||
// vs: mesh.material.
|
||||
// });
|
||||
|
||||
const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
|
||||
pickingMesh.name = this.layerId;
|
||||
pickmaterial.setDefinesvalue(this.type, true);
|
||||
|
|
@ -542,16 +611,13 @@ export default class Layer extends Base {
|
|||
this._pickingMesh.add(pickingMesh);
|
||||
|
||||
}
|
||||
_setPickingId() {
|
||||
this._pickingId = this.getPickingId();
|
||||
}
|
||||
_initEvents() {
|
||||
this.scene.on('pick-' + this.layerId, e => {
|
||||
let { featureId, point2d, type } = e;
|
||||
if (featureId < 0 && this._activeIds !== null) {
|
||||
type = 'mouseleave';
|
||||
// featureId = this._activeIds;
|
||||
}
|
||||
this._activeIds = featureId;
|
||||
const feature = this.layerSource.getSelectFeature(featureId);
|
||||
const lnglat = this.scene.containerToLngLat(point2d);
|
||||
const style = this.layerData[featureId - 1];
|
||||
|
|
@ -569,44 +635,11 @@ export default class Layer extends Base {
|
|||
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 更新active操作
|
||||
* @param {*} featureStyleId 需要更新的要素Id
|
||||
* @param {*} style 更新的要素样式
|
||||
*/
|
||||
updateStyle(featureStyleId, style) {
|
||||
if (this._activeIds) {
|
||||
this._resetStyle();
|
||||
}
|
||||
this._activeIds = featureStyleId;
|
||||
const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
|
||||
const color = style.color;
|
||||
const colorAttr = this.layerMesh.geometry.attributes.a_color;
|
||||
const firstId = pickingId.indexOf(featureStyleId[0]);
|
||||
for (let i = firstId; i < pickingId.length; i++) {
|
||||
if (pickingId[i] === featureStyleId[0]) {
|
||||
colorAttr.array[i * 4 + 0] = color[0];
|
||||
colorAttr.array[i * 4 + 1] = color[1];
|
||||
colorAttr.array[i * 4 + 2] = color[2];
|
||||
colorAttr.array[i * 4 + 3] = color[3];
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
colorAttr.needsUpdate = true;
|
||||
return;
|
||||
}
|
||||
|
||||
_updateColor() {
|
||||
|
||||
this._updateMaping();
|
||||
|
||||
}
|
||||
/**
|
||||
* 用于过滤数据
|
||||
* @param {*} object 需要过滤的mesh
|
||||
* @param {*} object 更新颜色和数据过滤
|
||||
*/
|
||||
_updateFilter(object) {
|
||||
_updateAttributes(object) {
|
||||
this._updateMaping();
|
||||
const filterData = this.layerData;
|
||||
this._activeIds = null; // 清空选中元素
|
||||
|
|
@ -642,16 +675,64 @@ export default class Layer extends Base {
|
|||
let offset = 0;
|
||||
if (this.type === 'point') {
|
||||
offset = 5;
|
||||
this.shapeType = 'text' && (offset = 10);
|
||||
|
||||
} else if (this.type === 'polyline') {
|
||||
offset = 2;
|
||||
}
|
||||
this._object3D.position.z = offset * Math.pow(2, 20 - zoom);
|
||||
this._object3D.position && (this._object3D.position.z = offset * Math.pow(2, 20 - zoom));
|
||||
if (zoom < minZoom || zoom > maxZoom) {
|
||||
this._object3D.visible = false;
|
||||
} else if (this.get('visible')) {
|
||||
this._object3D.visible = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 重新构建mesh
|
||||
redraw() {
|
||||
this._object3D.children.forEach(child => {
|
||||
this._object3D.remove(child);
|
||||
});
|
||||
this.removeFromPicking(this._pickingMesh);
|
||||
this.draw();
|
||||
}
|
||||
// 更新mesh
|
||||
updateDraw() {
|
||||
|
||||
}
|
||||
|
||||
// interaction 方法
|
||||
clearAllInteractions() {
|
||||
const interactions = this.get('interactions');
|
||||
Util.each(interactions, (interaction, key) => {
|
||||
interaction.destory();
|
||||
delete interactions[key];
|
||||
});
|
||||
return this;
|
||||
}
|
||||
clearInteraction(type) {
|
||||
const interactions = this.get('interactions');
|
||||
if (interactions[type]) {
|
||||
interactions[type].destory();
|
||||
delete interactions[type];
|
||||
}
|
||||
return this;
|
||||
}
|
||||
interaction(type, cfg = {}) {
|
||||
cfg.layer = this;
|
||||
const Ctor = getInteraction(type);
|
||||
const interaction = new Ctor(cfg);
|
||||
this._setInteraction(type, interaction);
|
||||
return this;
|
||||
}
|
||||
_setInteraction(type, interaction) {
|
||||
const interactions = this.get('interactions');
|
||||
if (interactions[type]) {
|
||||
interactions[type].destory();
|
||||
}
|
||||
interactions[type] = interaction;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置高亮要素
|
||||
*/
|
||||
|
|
@ -664,6 +745,8 @@ export default class Layer extends Base {
|
|||
*/
|
||||
destroy() {
|
||||
this.removeAllListeners();
|
||||
this.clearAllInteractions();
|
||||
this.clearMapEvent();
|
||||
if (this._object3D.type === 'composer') {
|
||||
this.remove(this._object3D);
|
||||
|
||||
|
|
@ -696,7 +779,6 @@ export default class Layer extends Base {
|
|||
this._object3D = null;
|
||||
this.scene._engine._scene.remove(this._object3D);
|
||||
this.scene._engine._picking.remove(this._pickingMesh);
|
||||
this.scene.off('zoomchange', this._zoomchangeHander);
|
||||
this.destroyed = true;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import FontAtlasManager from '../geom/buffer/point/text/font-manager';
|
|||
// import { MapProvider } from '../map/AMap';
|
||||
import { getMap } from '../map/index';
|
||||
import Global from '../global';
|
||||
import { getInteraction } from '../interaction/index';
|
||||
import { compileBuiltinModules } from '../geom/shader';
|
||||
export default class Scene extends Base {
|
||||
getDefaultCfg() {
|
||||
|
|
@ -46,6 +47,12 @@ export default class Scene extends Base {
|
|||
Map.asyncCamera(this._engine);
|
||||
this.initLayer();
|
||||
this._registEvents();
|
||||
const hash = this.get('hash');
|
||||
if (hash) {
|
||||
const Ctor = getInteraction('hash');
|
||||
const interaction = new Ctor({ layer: this });
|
||||
interaction._onHashChange();
|
||||
}
|
||||
this.emit('loaded');
|
||||
});
|
||||
|
||||
|
|
@ -69,14 +76,6 @@ export default class Scene extends Base {
|
|||
|
||||
super.off(type, hander);
|
||||
}
|
||||
_initAttribution() {
|
||||
const message = '<a href="http://antv.alipay.com/zh-cn/index.html title="Large-scale WebGL-powered Geospatial Data Visualization">AntV | L7 </a>';
|
||||
const element = document.createElement('div');
|
||||
|
||||
element.innerHTML = message;
|
||||
element.style.cssText += 'position: absolute; pointer-events:none;background: rgba(255, 255, 255, 0.7);font-size: 11px;z-index:100; padding:4px;bottom: 0;right:0px;';
|
||||
this._container.appendChild(element);
|
||||
}
|
||||
addImage() {
|
||||
this.image = new LoadImage();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import Base from './base';
|
||||
import { getTransform, getParser } from '../source';
|
||||
import { cluster, formatData } from '../source/transform/cluster';
|
||||
import { extent, tranfrormCoord } from '../util/geo';
|
||||
import { clone } from '@antv/util';
|
||||
import { getMap } from '../map/index';
|
||||
export default class Source extends Base {
|
||||
getDefaultCfg() {
|
||||
|
|
@ -21,18 +23,40 @@ export default class Source extends Base {
|
|||
const mapType = this.get('mapType');
|
||||
this.projectFlat = getMap(mapType).project;
|
||||
// 数据解析
|
||||
this._init();
|
||||
|
||||
}
|
||||
_init() {
|
||||
this._excuteParser();
|
||||
const isCluster = this.get('isCluster') || false;
|
||||
isCluster && this._executeCluster();
|
||||
// 数据转换 统计，聚合，分类
|
||||
this._executeTrans();
|
||||
// 坐标转换
|
||||
this._projectCoords();
|
||||
|
||||
}
|
||||
setData(data, cfg = {}) {
|
||||
Object.assign(this._attrs, cfg);
|
||||
const transform = this.get('transforms');
|
||||
this._transforms = transform || [];
|
||||
this.set('data', data);
|
||||
this._init();
|
||||
}
|
||||
// 数据更新
|
||||
updateTransfrom(cfg) {
|
||||
const { transforms } = cfg;
|
||||
this._transforms = transforms;
|
||||
this.data = clone(this.originData);
|
||||
this._executeTrans();
|
||||
this._projectCoords();
|
||||
}
|
||||
|
||||
_excuteParser() {
|
||||
const parser = this.get('parser');
|
||||
const { type = 'geojson' } = parser;
|
||||
const data = this.get('data');
|
||||
this.data = getParser(type)(data, parser);
|
||||
this.originData = getParser(type)(data, parser);
|
||||
this.data = clone(this.originData);
|
||||
this.data.extent = extent(this.data.dataArray);
|
||||
}
|
||||
/**
|
||||
|
|
@ -51,6 +75,24 @@ export default class Source extends Base {
|
|||
const data = getTransform(option.type)(this.data, option);
|
||||
Object.assign(this.data, data);
|
||||
}
|
||||
_executeCluster() {
|
||||
const clusterCfg = this.get('Cluster') || {};
|
||||
const zoom = this.get('zoom');
|
||||
clusterCfg.zoom = Math.floor(zoom);
|
||||
this.set('cluster', clusterCfg);
|
||||
const clusterData = cluster(this.data, clusterCfg);
|
||||
this.data = clusterData.data;
|
||||
this.pointIndex = clusterData.pointIndex;
|
||||
}
|
||||
updateCusterData(zoom, bbox) {
|
||||
const clusterPoint = this.pointIndex.getClusters(bbox, zoom);
|
||||
this.data.dataArray = formatData(clusterPoint);
|
||||
const clusterCfg = this.get('Cluster') || {};
|
||||
clusterCfg.zoom = Math.floor(zoom);
|
||||
clusterCfg.bbox = bbox;
|
||||
this.set('cluster', clusterCfg);
|
||||
this._projectCoords();
|
||||
}
|
||||
_projectCoords() {
|
||||
this.data.dataArray.forEach(data => {
|
||||
// data.coordinates = this._coordProject(data.coordinates);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
export const GeomBase = {
|
||||
color: 'updateDraw',
|
||||
size: 'repaint',
|
||||
filter: 'updateDraw',
|
||||
layer: '',
|
||||
pickable: true,
|
||||
setLayer(layer) {
|
||||
this.layer = layer;
|
||||
this.style = layer.get('styleOption');
|
||||
},
|
||||
getShape(type) {
|
||||
return type;
|
||||
},
|
||||
draw() {
|
||||
const shape = this.getShape();
|
||||
this.Mesh = shape.Mesh();
|
||||
},
|
||||
// 更新geometry buffer;
|
||||
updateDraw() {
|
||||
|
||||
},
|
||||
repaint() {
|
||||
|
||||
}
|
||||
};
|
||||
export const shapeBae = {
|
||||
geometryBuffer() {
|
||||
},
|
||||
|
||||
geometry() {},
|
||||
|
||||
material() {},
|
||||
|
||||
mesh() {
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -29,12 +29,11 @@ function drawGlyph(layerData, fontAtlasManager) {
|
|||
const size = element.size;
|
||||
const pos = element.coordinates;
|
||||
let text = element.shape || '';
|
||||
text = text.toString();
|
||||
const pen = {
|
||||
x: (-text.length * size) / 2,
|
||||
y: 0
|
||||
};
|
||||
text = text.toString();
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const metric = mapping[text[i]];
|
||||
const { x, y, width, height } = metric;
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
const geom = {
|
||||
point: {
|
||||
symbol: [ 'circle', 'hexagon', 'triangle', 'diamond' ],
|
||||
native: {
|
||||
buffer: '',
|
||||
geometry: 'PointGeometry',
|
||||
material: 'PointMaterial'
|
||||
},
|
||||
line: {
|
||||
buffer: 'PointBuffer',
|
||||
geometry: 'PolygonLine',
|
||||
material: 'MeshlineMaterial'
|
||||
},
|
||||
fill: {
|
||||
buffer: 'PointBuffer',
|
||||
geometry: 'PolygonGeometry',
|
||||
material: 'PolygonMaterial'
|
||||
},
|
||||
extrude: {
|
||||
buffer: 'PointBuffer',
|
||||
geometry: 'PolygonGeometry',
|
||||
material: 'PolygonMaterial'
|
||||
},
|
||||
extrudeline: {
|
||||
buffer: 'PointBuffer',
|
||||
geometry: 'PolygonLine',
|
||||
material: 'MeshlineMaterial'
|
||||
},
|
||||
pointGrid: {
|
||||
buffer: 'pointGrid',
|
||||
geometry: 'PolygonLine',
|
||||
material: 'MeshlineMaterial'
|
||||
|
||||
}
|
||||
},
|
||||
line: {
|
||||
shape: [ 'native' ]
|
||||
},
|
||||
polygon: {
|
||||
line: {
|
||||
buffer: 'polygonLineBuffer',
|
||||
geometry: 'PolygonLine',
|
||||
material: 'MeshlineMaterial'
|
||||
},
|
||||
fill: {
|
||||
buffer: 'PolygonBuffer',
|
||||
geometry: 'PolygonGeometry',
|
||||
material: 'PolygonMaterial'
|
||||
},
|
||||
extrude: {
|
||||
buffer: 'PolygonBuffer',
|
||||
geometry: 'PolygonGeometry',
|
||||
material: 'PolygonMaterial'
|
||||
},
|
||||
extrudeline: {
|
||||
buffer: 'polygonLineBuffer',
|
||||
geometry: 'PolygonLine',
|
||||
material: 'MeshlineMaterial'
|
||||
}
|
||||
}
|
||||
};
|
||||
export default geom;
|
||||
|
|
@ -1,35 +1,58 @@
|
|||
import * as THREE from '../../core/three';
|
||||
import Material from './material';
|
||||
import { getModule } from '../../util/shaderModule';
|
||||
|
||||
export function HeatmapIntensityMaterial(opt) {
|
||||
const { vs, fs } = getModule('heatmap_intensity');
|
||||
const material = new Material({
|
||||
export class HeatmapColorizeMaterial extends Material {
|
||||
getDefaultParameters() {
|
||||
return {
|
||||
uniforms: {
|
||||
u_intensity: { value: opt.intensity },
|
||||
u_radius: { value: opt.radius },
|
||||
u_zoom: { value: opt.zoom }
|
||||
u_intensity: { value: 1.0 },
|
||||
u_texture: { value: null },
|
||||
u_rampColors: { value: 0 },
|
||||
u_opacity: { value: 1 }
|
||||
},
|
||||
vertexShader: vs,
|
||||
fragmentShader: fs,
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
blending: THREE.AdditiveBlending
|
||||
});
|
||||
return material;
|
||||
}
|
||||
defines: {
|
||||
|
||||
export function HeatmapColorizeMaterial(opt) {
|
||||
}
|
||||
};
|
||||
}
|
||||
constructor(_uniforms, _defines = {}, parameters) {
|
||||
super(parameters);
|
||||
const { uniforms, defines } = this.getDefaultParameters();
|
||||
const { vs, fs } = getModule('heatmap_color');
|
||||
const material = new Material({
|
||||
uniforms: {
|
||||
u_texture: { value: opt.texture },
|
||||
u_colorRamp: { value: opt.colorRamp },
|
||||
u_opacity: { value: opt.opacity }
|
||||
},
|
||||
vertexShader: vs,
|
||||
fragmentShader: fs,
|
||||
transparent: true
|
||||
});
|
||||
return material;
|
||||
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
|
||||
this.type = 'HeatmapColorizeMaterial';
|
||||
this.defines = Object.assign(defines, _defines);
|
||||
this.vertexShader = vs;
|
||||
this.fragmentShader = fs;
|
||||
this.transparent = true;
|
||||
}
|
||||
}
|
||||
|
||||
export class HeatmapIntensityMaterial extends Material {
|
||||
getDefaultParameters() {
|
||||
return {
|
||||
uniforms: {
|
||||
u_intensity: { value: 10.0 },
|
||||
u_zoom: { value: 4 },
|
||||
u_radius: { value: 10 }
|
||||
},
|
||||
defines: {
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
constructor(_uniforms, _defines = {}, parameters) {
|
||||
super(parameters);
|
||||
const { uniforms, defines } = this.getDefaultParameters();
|
||||
const { vs, fs } = getModule('heatmap_intensity');
|
||||
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
|
||||
this.type = 'heatmap_intensity';
|
||||
this.defines = Object.assign(defines, _defines);
|
||||
this.vertexShader = vs;
|
||||
this.blending = THREE.AdditiveBlending;
|
||||
this.fragmentShader = fs;
|
||||
this.depthTest = false;
|
||||
this.transparent = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@ export function MeshLineMaterial(options) {
|
|||
},
|
||||
vertexShader: vs,
|
||||
fragmentShader: fs,
|
||||
transparent: true
|
||||
transparent: true,
|
||||
blending: THREE.AdditiveBlending
|
||||
});
|
||||
return material;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default class Material extends THREE.ShaderMaterial {
|
|||
}
|
||||
return uniforms;
|
||||
}
|
||||
upDateUninform(option) {
|
||||
updateUninform(option) {
|
||||
for (const key in option) {
|
||||
if (key.substr(0, 2) === 'u_') {
|
||||
this.setUniformsValue(key, option[key]);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
uniform sampler2D u_texture;
|
||||
uniform sampler2D u_colorRamp;
|
||||
uniform sampler2D u_rampColors;
|
||||
uniform float u_opacity;
|
||||
varying vec2 v_uv;
|
||||
|
||||
void main(){
|
||||
float intensity = texture2D(u_texture,v_uv).r;
|
||||
vec4 color = texture2D(u_colorRamp,vec2(0.5,1.0-intensity));
|
||||
vec4 color = texture2D(u_rampColors,vec2(0.5,1.0-intensity));
|
||||
gl_FragColor = color;
|
||||
gl_FragColor.a = color.a * smoothstep(0.,0.05,intensity) * u_opacity;
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ void main() {
|
|||
}
|
||||
#ifdef ANIMATE
|
||||
vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.;
|
||||
// vTime = 1.0- (28800. + mod(u_time* 10.,28800.)- position.z / 1000.) / 100.;
|
||||
#endif
|
||||
gl_Position = matModelViewProjection * vec4(position.xy,0., 1.0);
|
||||
gl_Position = matModelViewProjection * vec4(position.xy, 0., 1.0);
|
||||
worldId = id_toPickColor(pickingId);
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ uniform float u_trailLength;
|
|||
|
||||
void main() {
|
||||
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
|
||||
vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
|
||||
vec3 pointPos = vec3(position.xy,0.) + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
|
||||
v_color = a_color;
|
||||
if(pickingId == u_activeId) {
|
||||
v_color = u_activeColor;
|
||||
|
|
@ -30,8 +30,9 @@ void main() {
|
|||
float alpa =1.0 - fract( mod(1.0- a_distance,u_interval)* (1.0/u_interval) + u_time / u_duration);
|
||||
alpa = (alpa + u_trailLength -1.0) / u_trailLength;
|
||||
vTime = clamp(alpa,0.,1.);
|
||||
// vTime = (28800. + mod(u_time* 1000.,28800.)- position.z) / 100.;
|
||||
#endif
|
||||
worldId = id_toPickColor(pickingId);
|
||||
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
|
||||
gl_Position = matModelViewProjection * vec4(pointPos.xy, 0., 1.0);
|
||||
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@ varying vec4 v_color;
|
|||
void main() {
|
||||
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
|
||||
float scale = pow(2.0,(20.0 - u_zoom));
|
||||
vec3 newposition = position + (a_size + vec3(u_strokeWidth/2.,u_strokeWidth/2.,0)) * scale* a_shape;
|
||||
vec3 newposition = position + (a_size + vec3(u_strokeWidth/2.,u_strokeWidth/2.,0)) * scale* a_shape + vec3(0., a_size.y * scale / 4., 0.);;
|
||||
#ifdef ANIMATE
|
||||
vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.;
|
||||
#endif
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ void main() {
|
|||
vec3 newposition = position;
|
||||
// newposition.x -= 128.0;
|
||||
#ifdef SHAPE
|
||||
newposition =position + a_size * scale* a_shape;
|
||||
newposition =position + a_size * scale* a_shape + vec3(0., a_size.y * scale / 4., 0.);
|
||||
#endif
|
||||
v_texCoord = faceUv;
|
||||
if(normal == vec3(0.,0.,1.)){
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ uniform float u_buffer;
|
|||
uniform float u_gamma;
|
||||
uniform float u_opacity;
|
||||
varying vec2 v_texcoord;
|
||||
varying float v_size;
|
||||
void main(){
|
||||
float dist=texture2D(u_texture,vec2(v_texcoord.x,v_texcoord.y)).a;
|
||||
float alpha;
|
||||
|
||||
if(u_strokeWidth==0.){
|
||||
alpha=smoothstep(u_buffer-u_gamma,u_buffer+u_gamma,dist);
|
||||
gl_FragColor=vec4(v_color.rgb,alpha*v_color.a);
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@ uniform vec2 u_textTextureSize;// 纹理大小
|
|||
uniform vec2 u_glSize;
|
||||
varying vec2 v_texcoord;
|
||||
varying vec4 v_color;
|
||||
varying float v_size;
|
||||
uniform float u_activeId;
|
||||
uniform vec4 u_activeColor;
|
||||
|
||||
void main(){
|
||||
mat4 matModelViewProjection=projectionMatrix*modelViewMatrix;
|
||||
vec4 cur_position=matModelViewProjection*vec4(position.xy,0,1);
|
||||
v_size = 12. / u_glSize.x;
|
||||
gl_Position=cur_position/cur_position.w+vec4((a_txtOffsets+a_txtsize)/u_glSize*2.,0.,0.);
|
||||
v_color=vec4(a_color.rgb,a_color.a*u_opacity);
|
||||
if(pickingId==u_activeId){
|
||||
|
|
|
|||
|
|
@ -1,60 +1,4 @@
|
|||
import { Vector3 } from '../../core/three';
|
||||
import getNormal from 'polyline-normals';
|
||||
/**
|
||||
* shape meshLine
|
||||
* @param {array} geo 坐标点
|
||||
* @param {object} props 属性数据
|
||||
* @param {int} index 原始数据ndex
|
||||
* @return {object} 顶点坐标，索引坐标
|
||||
*/
|
||||
export function meshLine(geo, props, index) {
|
||||
const dataLength = geo.length;
|
||||
const width = props.size[0] * 50 || 100;
|
||||
const dem = props.size[1] || 0;
|
||||
const posArray = [];
|
||||
const indexArray = [];
|
||||
const points = [];
|
||||
for (let i = 0; i < dataLength; i++) {
|
||||
let previous = (i === 0) ? geo[0] : geo[i - 1];
|
||||
let next = (i === dataLength - 1) ? geo[dataLength - 1] : geo[i + 1];
|
||||
let current = geo[i];
|
||||
previous = [ previous[0], previous[1], 0 ];
|
||||
next = [ next[0], next[1], 0 ];
|
||||
current = [ current[0], current[1], 0 ];
|
||||
|
||||
let dir = null;
|
||||
if (i === 0 || i === dataLength - 1) {
|
||||
dir = new Vector3(1, 1, 1);
|
||||
} else {
|
||||
const dir1 = new Vector3();
|
||||
const dir2 = new Vector3();
|
||||
dir = new Vector3();
|
||||
dir1.subVectors(new Vector3(...current), new Vector3(...previous)).normalize();
|
||||
dir2.subVectors(new Vector3(...next), new Vector3(...current)).normalize();
|
||||
dir.addVectors(dir1, dir2).normalize();
|
||||
}
|
||||
let normal = [ -dir.y, dir.x, 0 ];
|
||||
normal = [ normal[0] * width, normal[1] * width, 0 ];
|
||||
const n1 = [ normal[0], normal[1], 0 ];
|
||||
const n2 = [ -normal[0], -normal[1], 0 ];
|
||||
const p1 = new Vector3();
|
||||
const p2 = new Vector3();
|
||||
p1.addVectors(new Vector3(...current), new Vector3(...n1));
|
||||
p2.addVectors(new Vector3(...current), new Vector3(...n2));
|
||||
points.push([ p1.x, p1.y, dem ], [ p2.x, p2.y, dem ]);
|
||||
}// end of for
|
||||
for (let i = 0; i < points.length - 2; i += 2) {
|
||||
const ct = i;
|
||||
const cb = i + 1;
|
||||
const nt = i + 2;
|
||||
const nb = i + 3;
|
||||
posArray.push(points[ct], points[cb], points[nt]);
|
||||
posArray.push(points[nt], points[cb], points[nb]);
|
||||
indexArray.push(index, index, index);
|
||||
indexArray.push(index, index, index);
|
||||
}
|
||||
return { positions: posArray, indexes: indexArray };
|
||||
}
|
||||
|
||||
/**
|
||||
* shape arc
|
||||
|
|
@ -150,7 +94,7 @@ export function Line(path, props, positionsIndex) {
|
|||
indexArray[c++] = i + 2;
|
||||
indexArray[c++] = i + 3;
|
||||
}
|
||||
point[2] = size[1];
|
||||
// point[2] = size[1];
|
||||
positions.push(...point);
|
||||
positions.push(...point);
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export function polygonPath(pointCount) {
|
|||
const step = Math.PI * 2 / pointCount;
|
||||
const line = [];
|
||||
for (let i = 0; i < pointCount; i++) {
|
||||
line.push(step * i);
|
||||
line.push(step * i - Math.PI / 12);
|
||||
}
|
||||
const path = line.map(t => {
|
||||
const x = Math.sin(t + Math.PI / 4),
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @author dxq613
|
||||
*/
|
||||
// const Global = {};
|
||||
const FONT_FAMILY = '"-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, "sans-serif"';
|
||||
const Global = {
|
||||
version: '1.0.0',
|
||||
scene: {
|
||||
|
|
@ -11,24 +12,28 @@ const Global = {
|
|||
center: [ 107.622, 39.266 ],
|
||||
minZoom: 0,
|
||||
maxZoom: 22,
|
||||
pitch: 0
|
||||
pitch: 0,
|
||||
hash: false
|
||||
},
|
||||
trackable: true,
|
||||
animate: true,
|
||||
snapArray: [ 0, 1, 2, 4, 5, 10 ],
|
||||
height: 0,
|
||||
activeColor: '#2f54eb',
|
||||
colors: [ 'rgb(103,0,31)', 'rgb(178,24,43)', 'rgb(214,96,77)', 'rgb(244,165,130)', 'rgb(253,219,199)', 'rgb(247,247,247)', 'rgb(209,229,240)', 'rgb(146,197,222)', 'rgb(67,147,195)', 'rgb(33,102,172)', 'rgb(5,48,97)' ],
|
||||
// 指定固定 tick 数的逼近值
|
||||
snapCountArray: [ 0, 1, 1.2, 1.5, 1.6, 2, 2.2, 2.4, 2.5, 3, 4, 5, 6, 7.5, 8, 10 ],
|
||||
size: 10000,
|
||||
shape: 'circle',
|
||||
snapArray: [ 0, 1, 2, 4, 5, 10 ],
|
||||
pointShape: {
|
||||
'2d': [ 'circle', 'square', 'hexagon', 'triangle' ],
|
||||
'3d': [ 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' ]
|
||||
},
|
||||
sdfHomeUrl: 'https://sdf.amap.com',
|
||||
scales: {
|
||||
scales: { },
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fill: '#ccc',
|
||||
textBaseline: 'middle',
|
||||
fontFamily: FONT_FAMILY,
|
||||
textAlign: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
13
src/index.js
13
src/index.js
|
|
@ -2,10 +2,19 @@
|
|||
// import Util from './util';
|
||||
import Scene from './core/scene';
|
||||
import Global from './global';
|
||||
|
||||
import Source from './core/source';
|
||||
import { registerParser, registerTransform } from './source';
|
||||
import { registerInteraction, getInteraction } from './interaction';
|
||||
import { registerLayer } from './layer';
|
||||
const version = Global.version;
|
||||
export {
|
||||
version,
|
||||
Scene
|
||||
Scene,
|
||||
Source,
|
||||
registerParser,
|
||||
registerTransform,
|
||||
registerLayer,
|
||||
registerInteraction,
|
||||
getInteraction
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import Interaction from './base';
|
||||
export default class Active extends Interaction {
|
||||
constructor(cfg) {
|
||||
super({
|
||||
processEvent: 'mousemove',
|
||||
resetEvent: 'mouseleave',
|
||||
...cfg
|
||||
});
|
||||
}
|
||||
process(ev) {
|
||||
this.layer._addActiveFeature(ev);
|
||||
}
|
||||
reset() {
|
||||
this.layer._resetStyle();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import * as _ from '@antv/util';
|
||||
const EVENT_TYPES = [ 'start', 'process', 'end', 'reset' ];
|
||||
|
||||
export default class Interaction {
|
||||
constructor(cfg) {
|
||||
const defaultCfg = this._getDefaultCfg();
|
||||
Object.assign(this, defaultCfg, cfg);
|
||||
this._eventHandlers = [];
|
||||
this._bindEvents();
|
||||
}
|
||||
_getDefaultCfg() {
|
||||
return {
|
||||
startEvent: 'mousedown',
|
||||
processEvent: 'mousemove',
|
||||
endEvent: 'mouseup',
|
||||
resetEvent: 'dblclick'
|
||||
};
|
||||
}
|
||||
_start(ev) {
|
||||
this.preStart(ev);
|
||||
this.start(ev);
|
||||
this.afterStart(ev);
|
||||
}
|
||||
|
||||
preStart() {}
|
||||
|
||||
start() {}
|
||||
|
||||
afterStart() {}
|
||||
|
||||
_process(ev) {
|
||||
this.preProcess(ev);
|
||||
this.process(ev);
|
||||
this.afterProcess(ev);
|
||||
}
|
||||
|
||||
preProcess() {}
|
||||
|
||||
process() {
|
||||
}
|
||||
|
||||
afterProcess() {}
|
||||
|
||||
_end(ev) {
|
||||
this.preEnd(ev);
|
||||
this.end(ev);
|
||||
this.afterEnd(ev);
|
||||
}
|
||||
preEnd() {}
|
||||
|
||||
end() {}
|
||||
|
||||
afterEnd() {}
|
||||
|
||||
_reset() {
|
||||
this.preReset();
|
||||
this.reset();
|
||||
this.afterReset();
|
||||
}
|
||||
|
||||
preReset() {}
|
||||
|
||||
reset() {}
|
||||
|
||||
afterReset() {}
|
||||
|
||||
_bindEvents() {
|
||||
_.each(EVENT_TYPES, type => {
|
||||
const eventName = this[`${type}Event`];
|
||||
const handler = _.wrapBehavior(this, `_${type}`);
|
||||
this.layer.on(eventName, handler);
|
||||
this._eventHandlers.push({ type: eventName, handler });
|
||||
});
|
||||
}
|
||||
|
||||
_unbindEvents() {
|
||||
const eventHandlers = this._eventHandlers;
|
||||
_.each(eventHandlers, eh => {
|
||||
this.layer.off(eh.type, eh.handler);
|
||||
});
|
||||
}
|
||||
|
||||
destory() {
|
||||
this._unbindEvents();
|
||||
this._reset();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
export const INTERACTION_MAP = {};
|
||||
|
||||
export const getInteraction = type => {
|
||||
return INTERACTION_MAP[type];
|
||||
};
|
||||
|
||||
export const registerInteraction = (type, ctor) => {
|
||||
// 注册的时候，需要校验 type 重名，不区分大小写
|
||||
if (getInteraction(type)) {
|
||||
throw new Error(`Interaction type '${type}' existed.`);
|
||||
}
|
||||
// 存储到 map 中
|
||||
INTERACTION_MAP[type] = ctor;
|
||||
};
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import Interaction from './base';
|
||||
import throttle from '@antv/util/src/throttle.js';
|
||||
export default class Hash extends Interaction {
|
||||
constructor(cfg) {
|
||||
super({
|
||||
endEvent: 'camerachange',
|
||||
...cfg
|
||||
});
|
||||
window.addEventListener('hashchange', this._onHashChange.bind(this), false);
|
||||
this._updateHash = throttle(this._updateHashUnthrottled.bind(this), 20 * 1000 / 100);
|
||||
}
|
||||
end() {
|
||||
this._updateHash();
|
||||
}
|
||||
reset() {
|
||||
this.layer._resetStyle();
|
||||
}
|
||||
_getHashString() {
|
||||
const center = this.layer.getCenter(),
|
||||
zoom = Math.round(this.layer.getZoom() * 100) / 100,
|
||||
// derived from equation: 512px * 2^z / 360 / 10^d < 0.5px
|
||||
precision = Math.ceil((zoom * Math.LN2 + Math.log(512 / 360 / 0.5)) / Math.LN10),
|
||||
m = Math.pow(10, precision),
|
||||
lng = Math.round(center.lng * m) / m,
|
||||
lat = Math.round(center.lat * m) / m,
|
||||
bearing = this.layer.getRotation(),
|
||||
pitch = this.layer.getPitch();
|
||||
let hash = '';
|
||||
hash += `#${zoom}/${lat}/${lng}`;
|
||||
if (bearing || pitch) hash += (`/${Math.round(bearing * 10) / 10}`);
|
||||
if (pitch) hash += (`/${Math.round(pitch)}`);
|
||||
return hash;
|
||||
}
|
||||
_onHashChange() {
|
||||
const loc = window.location.hash.replace('#', '').split('/');
|
||||
if (loc.length >= 3) {
|
||||
this.layer.setStatus({
|
||||
center: [ +loc[2], +loc[1] ],
|
||||
zoom: +loc[0],
|
||||
bearing: +(loc[3] || 0),
|
||||
pitch: +(loc[4] || 0)
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
_updateHashUnthrottled() {
|
||||
const hash = this._getHashString();
|
||||
window.history.replaceState(window.history.state, '', hash);
|
||||
}
|
||||
destory() {
|
||||
window.removeEventListener('hashchange', this._onHashChange, false);
|
||||
this.layer.off('camerachange', this._updateHash);
|
||||
clearTimeout(this._updateHash());
|
||||
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import Interaction from './base';
|
||||
import Active from './active';
|
||||
import Select from './select';
|
||||
import Hash from './hash';
|
||||
import { getInteraction, registerInteraction } from './factory';
|
||||
|
||||
registerInteraction('active', Active);
|
||||
registerInteraction('select', Select);
|
||||
registerInteraction('hash', Hash);
|
||||
|
||||
export { Interaction, registerInteraction, getInteraction };
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import Interaction from './base';
|
||||
export default class Select extends Interaction {
|
||||
constructor(cfg) {
|
||||
super({
|
||||
processEvent: 'click',
|
||||
...cfg
|
||||
});
|
||||
}
|
||||
process(ev) {
|
||||
this.layer._addActiveFeature(ev);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,12 +10,7 @@ export default class HeatMapLayer extends Layer {
|
|||
this.shapeType = type;
|
||||
return this;
|
||||
}
|
||||
render() {
|
||||
this._prepareRender();
|
||||
return this;
|
||||
}
|
||||
_prepareRender() {
|
||||
this.init();
|
||||
draw() {
|
||||
this.type = 'heatmap';
|
||||
switch (this.shapeType) {
|
||||
case 'grid' :
|
||||
|
|
@ -56,10 +51,4 @@ export default class HeatMapLayer extends Layer {
|
|||
this.add(girdMesh);
|
||||
}
|
||||
|
||||
// afterRender() {
|
||||
// if (this.shapeType !== 'grid' && this.shapeType !== 'hexagon') {
|
||||
// updateIntensityPass(this);
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ import ImageBuffer from '../geom/buffer/image';
|
|||
// import ImageGeometry from '../geom/bufferGeometry/image';
|
||||
import ImageMaterial from '../geom/material/imageMaterial';
|
||||
export default class imageLayer extends Layer {
|
||||
render() {
|
||||
this.init();
|
||||
draw() {
|
||||
this.type = 'image';
|
||||
const source = this.layerSource;
|
||||
const { opacity } = this.get('styleOptions');
|
||||
|
|
|
|||
|
|
@ -14,4 +14,5 @@ registerLayer('RasterLayer', RasterLayer);
|
|||
registerLayer('HeatmapLayer', HeatmapLayer);
|
||||
|
||||
export { LAYER_MAP } from './factory';
|
||||
export { registerLayer };
|
||||
|
||||
|
|
|
|||
|
|
@ -1,112 +1,45 @@
|
|||
import Layer from '../core/layer';
|
||||
import * as THREE from '../core/three';
|
||||
import DrawLine from './render/line/drawMeshLine';
|
||||
import DrawArc from './render/line/drawArc';
|
||||
import { LineBuffer } from '../geom/buffer/index';
|
||||
import { LineMaterial, ArcLineMaterial, MeshLineMaterial, DashLineMaterial } from '../geom/material/lineMaterial';
|
||||
export default class LineLayer extends Layer {
|
||||
shape(type) {
|
||||
this.shapeType = type;
|
||||
return this;
|
||||
}
|
||||
render() {
|
||||
this.type = 'polyline';
|
||||
this.init();
|
||||
const layerData = this.layerData;
|
||||
const style = this.get('styleOptions');
|
||||
const buffer = this._buffer = new LineBuffer({
|
||||
layerData,
|
||||
shapeType: this.shapeType,
|
||||
style
|
||||
});
|
||||
const { opacity } = this.get('styleOptions');
|
||||
const animateOptions = this.get('animateOptions');
|
||||
const activeOption = this.get('activedOptions');
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const { attributes } = buffer;
|
||||
|
||||
if (this.shapeType === 'arc') {
|
||||
geometry.setIndex(attributes.indexArray);
|
||||
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
|
||||
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
|
||||
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
|
||||
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.instances, 4));
|
||||
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
|
||||
const material = new ArcLineMaterial({
|
||||
u_opacity: opacity,
|
||||
u_zoom: this.scene.getZoom(),
|
||||
activeColor: activeOption.fill
|
||||
});
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
this.add(mesh);
|
||||
} else if (this.shapeType === 'line') {
|
||||
|
||||
geometry.setIndex(attributes.indexArray);
|
||||
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
|
||||
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
|
||||
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
|
||||
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
|
||||
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
|
||||
geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
|
||||
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
|
||||
const lineType = style.lineType;
|
||||
let material;
|
||||
|
||||
if (lineType !== 'dash') {
|
||||
|
||||
material = new MeshLineMaterial({
|
||||
u_opacity: opacity,
|
||||
u_zoom: this.scene.getZoom(),
|
||||
activeColor: activeOption.fill
|
||||
});
|
||||
|
||||
if (animateOptions.enable) {
|
||||
|
||||
material.setDefinesvalue('ANIMATE', true);
|
||||
this.scene.startAnimate();
|
||||
const { duration, interval, trailLength, repeat = Infinity } = animateOptions;
|
||||
this.animateDuration = this.scene._engine.clock.getElapsedTime() + duration * repeat;
|
||||
material.upDateUninform({
|
||||
u_duration: duration,
|
||||
u_interval: interval,
|
||||
u_trailLength: trailLength
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
} else {
|
||||
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
|
||||
material = new DashLineMaterial({
|
||||
u_opacity: opacity,
|
||||
u_zoom: this.scene.getZoom(),
|
||||
activeColor: activeOption.fill
|
||||
});
|
||||
}
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
this.add(mesh);
|
||||
} else { // 直线
|
||||
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
|
||||
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
|
||||
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
|
||||
const material = new LineMaterial({
|
||||
u_opacity: opacity,
|
||||
u_time: 0,
|
||||
activeColor: activeOption.fill
|
||||
});
|
||||
if (animateOptions.enable) {
|
||||
material.setDefinesvalue('ANIMATE', true);
|
||||
this.scene.startAnimate();
|
||||
}
|
||||
|
||||
const mesh = new THREE.LineSegments(geometry, material);
|
||||
this.add(mesh);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
preRender() {
|
||||
if (this.animateDuration > 0 && this.animateDuration < this.scene._engine.clock.getElapsedTime()) {
|
||||
if (
|
||||
this.animateDuration > 0 &&
|
||||
this.animateDuration < this.scene._engine.clock.getElapsedTime()
|
||||
) {
|
||||
this.layerMesh.material.setDefinesvalue('ANIMATE', false);
|
||||
this.emit('animateEnd');
|
||||
this.scene.stopAnimate();
|
||||
this.animateDuration = Infinity;
|
||||
}
|
||||
}
|
||||
draw() {
|
||||
this.type = 'polyline';
|
||||
const layerData = this.layerData;
|
||||
const style = this.get('styleOptions');
|
||||
const animateOptions = this.get('animateOptions');
|
||||
const activeOption = this.get('activedOptions');
|
||||
const layerCfg = {
|
||||
zoom: this.scene.getZoom(),
|
||||
style,
|
||||
animateOptions,
|
||||
activeOption
|
||||
};
|
||||
const buffer = (this._buffer = new LineBuffer({
|
||||
layerData,
|
||||
shapeType: this.shapeType,
|
||||
style
|
||||
}));
|
||||
const { attributes } = buffer;
|
||||
if (this.shapeType === 'arc') {
|
||||
DrawArc(attributes, layerCfg, this);
|
||||
} else {
|
||||
DrawLine(attributes, layerCfg, this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,21 +14,8 @@ const { pointShape } = Global;
|
|||
*/
|
||||
|
||||
export default class PointLayer extends Layer {
|
||||
render() {
|
||||
draw() {
|
||||
this.type = 'point';
|
||||
this.init();
|
||||
if (!this._hasRender) {
|
||||
this._prepareRender(this.shapeType);
|
||||
this._hasRender = true;
|
||||
} else {
|
||||
this._initAttrs();
|
||||
this._needUpdateFilter || this._needUpdateColor
|
||||
? this._updateFilter()
|
||||
: null;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
_prepareRender() {
|
||||
const { stroke, fill } = this.get('styleOptions');
|
||||
const style = this.get('styleOptions');
|
||||
const activeOption = this.get('activedOptions');
|
||||
|
|
@ -37,6 +24,7 @@ export default class PointLayer extends Layer {
|
|||
activeColor: activeOption.fill
|
||||
};
|
||||
const pointShapeType = this._getShape();
|
||||
this.shapeType = pointShapeType;
|
||||
switch (pointShapeType) {
|
||||
case 'fill': { // 填充图形
|
||||
if (fill !== 'none') {
|
||||
|
|
@ -112,4 +100,33 @@ export default class PointLayer extends Layer {
|
|||
}
|
||||
return 'text';
|
||||
}
|
||||
zoomchange(ev) {
|
||||
super.zoomchange(ev);
|
||||
this._updateData();
|
||||
}
|
||||
dragend(ev) {
|
||||
super.dragend(ev);
|
||||
this._updateData();
|
||||
|
||||
}
|
||||
_updateData() {
|
||||
if (this.layerSource.get('isCluster')) {
|
||||
const bounds = this.scene.getBounds().toBounds();
|
||||
const SW = bounds.getSouthWest();
|
||||
const NE = bounds.getNorthEast();
|
||||
const zoom = this.scene.getZoom();
|
||||
const step = Math.max(NE.lng - SW.lng, NE.lat - SW.lat) / 2;
|
||||
const bbox = [ SW.lng, SW.lat, NE.lng, NE.lat ];
|
||||
// const bbox = [ SW.lng - step, SW.lat - step, NE.lng + step, NE.lat + step ];
|
||||
const cfg = this.layerSource.get('cluster');
|
||||
const preBox = cfg.bbox;
|
||||
const preZoom = cfg.zoom;
|
||||
if (!(preBox && preBox[0] < bbox[0] && preBox[1] < bbox[1] && preBox[2] > bbox[2] && preBox[3] < bbox[3] && // 当前范围在范围内
|
||||
(Math.abs(zoom - preZoom)) < 0.5)) {
|
||||
const newbbox = [ SW.lng - step, SW.lat - step, NE.lng + step, NE.lat + step ];
|
||||
this.layerSource.updateCusterData(Math.floor(zoom - 1), newbbox);
|
||||
this.repaint();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,19 +6,7 @@ export default class PolygonLayer extends Layer {
|
|||
this.shape = type;
|
||||
return this;
|
||||
}
|
||||
render() {
|
||||
if (!this._hasRender) { // 首次渲染
|
||||
this._hasRender = true;
|
||||
this._prepareRender();
|
||||
} else {
|
||||
|
||||
this._initAttrs();
|
||||
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter(this.layerMesh) : null;
|
||||
// TODO update Style;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
_prepareRender() {
|
||||
draw() {
|
||||
this.init();
|
||||
this.type = 'polygon';
|
||||
this._buffer = new PolygonBuffer({
|
||||
|
|
@ -29,7 +17,6 @@ export default class PolygonLayer extends Layer {
|
|||
}
|
||||
update() {
|
||||
this.updateFilter(this.layerMesh);
|
||||
// 动态更新相关属性
|
||||
}
|
||||
_getLayerRender() {
|
||||
const animateOptions = this.get('animateOptions');
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@ import { RasterBuffer } from '../geom/buffer/raster';
|
|||
|
||||
export default class RasterLayer extends Layer {
|
||||
|
||||
render() {
|
||||
draw() {
|
||||
this.type = 'raster';
|
||||
this.init();
|
||||
const source = this.layerSource;
|
||||
// 加载 完成事件
|
||||
const styleOptions = this.get('styleOptions');
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ import * as THREE from '../../../core/three';
|
|||
export function drawHeatmap(layer) {
|
||||
|
||||
const colors = layer.get('styleOptions').rampColors;
|
||||
layer.colorRamp = createColorRamp(colors);
|
||||
|
||||
layer.rampColors = createColorRamp(colors);
|
||||
const heatmap = new heatmapPass(layer);
|
||||
const copy = new copyPass(layer);
|
||||
copy.renderToScreen = true;
|
||||
|
|
@ -18,10 +19,21 @@ export function drawHeatmap(layer) {
|
|||
composer.addPass(heatmap);
|
||||
composer.addPass(copy);
|
||||
layer.add(composer);
|
||||
layer.scene._engine.update();
|
||||
layer._updateStyle = style => {
|
||||
if (style.rampColors) {
|
||||
style.rampColors = createColorRamp(style.rampColors);
|
||||
}
|
||||
const newOption = { };
|
||||
for (const key in style) {
|
||||
newOption['u_' + key] = style[key];
|
||||
}
|
||||
heatmap.scene.children[0].material.updateUninform(newOption);
|
||||
copy.scene.children[0].material.updateUninform(newOption);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
function heatmapPass(layer) {
|
||||
const scene = new THREE.Scene();
|
||||
const style = layer.get('styleOptions');
|
||||
|
|
@ -39,10 +51,10 @@ function heatmapPass(layer) {
|
|||
geometry.addAttribute('a_dir', new THREE.Float32BufferAttribute(attributes.dirs, 2));
|
||||
geometry.addAttribute('a_weight', new THREE.Float32BufferAttribute(attributes.weights, 1));
|
||||
const material = new HeatmapIntensityMaterial({
|
||||
intensity: style.intensity,
|
||||
radius: style.radius,
|
||||
zoom: layer.scene.getZoom()
|
||||
});
|
||||
u_intensity: style.intensity,
|
||||
u_radius: style.radius,
|
||||
u_zoom: layer.scene.getZoom()
|
||||
}, {});
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
scene.add(mesh);
|
||||
scene.onBeforeRender = () => { // 每次渲染前改变状态
|
||||
|
|
@ -55,9 +67,9 @@ function heatmapPass(layer) {
|
|||
function copyPass(layer) {
|
||||
const style = layer.get('styleOptions');
|
||||
const material = new HeatmapColorizeMaterial({
|
||||
colorRamp: layer.colorRamp,
|
||||
opacity: style.opacity
|
||||
});
|
||||
u_rampColors: layer.rampColors,
|
||||
u_opacity: style.opacity
|
||||
}, {});
|
||||
const copyPass = new ShaderPass(material, 'u_texture');
|
||||
return copyPass;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as THREE from '../../../core/three';
|
||||
import { ArcLineMaterial } from '../../../geom/material/lineMaterial';
|
||||
export default function DrawArcLine(attributes, style) {
|
||||
export default function DrawArcLine(attributes, cfg, layer) {
|
||||
const { style, activeOption } = cfg;
|
||||
const { opacity, zoom } = style;
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
geometry.setIndex(attributes.indexArray);
|
||||
|
|
@ -10,10 +11,11 @@ export default function DrawArcLine(attributes, style) {
|
|||
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
|
||||
const lineMaterial = new ArcLineMaterial({
|
||||
u_opacity: opacity,
|
||||
u_zoom: zoom
|
||||
u_zoom: zoom,
|
||||
activeColor: activeOption.fill
|
||||
}, {
|
||||
SHAPE: false
|
||||
});
|
||||
const arcMesh = new THREE.Mesh(geometry, lineMaterial);
|
||||
return arcMesh;
|
||||
layer.add(arcMesh);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as THREE from '../../../core/three';
|
||||
import { MeshLineMaterial } from '../../../geom/material/lineMaterial';
|
||||
export default function DrawLine(attributes, style) {
|
||||
const { opacity, zoom, animate, duration, interval, trailLength } = style;
|
||||
export default function DrawLine(attributes, cfg, layer) {
|
||||
const { style, animateOptions, activeOption, zoom } = cfg;
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
geometry.setIndex(attributes.indexArray);
|
||||
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
|
||||
|
|
@ -11,17 +11,34 @@ export default function DrawLine(attributes, style) {
|
|||
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
|
||||
geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
|
||||
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
|
||||
|
||||
const lineMaterial = new MeshLineMaterial({
|
||||
u_opacity: opacity,
|
||||
u_opacity: style.opacity,
|
||||
u_zoom: zoom,
|
||||
u_duration: duration,
|
||||
u_interval: interval,
|
||||
u_trailLength: trailLength,
|
||||
u_time: 0
|
||||
u_time: 0,
|
||||
activeColor: activeOption.fill
|
||||
}, {
|
||||
SHAPE: false,
|
||||
ANIMATE: animate
|
||||
ANIMATE: false
|
||||
});
|
||||
const arcMesh = new THREE.Mesh(geometry, lineMaterial);
|
||||
return arcMesh;
|
||||
|
||||
const lineMesh = new THREE.Mesh(geometry, lineMaterial);
|
||||
if (animateOptions.enable) {
|
||||
layer.scene.startAnimate();
|
||||
const {
|
||||
duration = 2,
|
||||
interval = 0.5,
|
||||
trailLength = 0.5,
|
||||
repeat = Infinity
|
||||
} = animateOptions;
|
||||
layer.animateDuration =
|
||||
layer.scene._engine.clock.getElapsedTime() + duration * repeat;
|
||||
lineMaterial.updateUninform({
|
||||
u_duration: duration,
|
||||
u_interval: interval,
|
||||
u_trailLength: trailLength
|
||||
});
|
||||
lineMaterial.setDefinesvalue('ANIMATE', true);
|
||||
}
|
||||
layer.add(lineMesh);
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ export default function DrawText(attributes, style) {
|
|||
attributes.fontAtlas.width,
|
||||
attributes.fontAtlas.height
|
||||
],
|
||||
u_gamma: 0.2,
|
||||
u_gamma: (1.0 / 12.0) * (1.4142135623730951 / (2.0)),
|
||||
u_buffer: 0.75,
|
||||
u_opacity: opacity,
|
||||
u_glSize: [ width, height ],
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function DrawAnimate(attributes, style) {
|
|||
}
|
||||
|
||||
DrawAnimate.prototype.updateStyle = function(style) {
|
||||
this.fillPolygonMesh.material.upDateUninform({
|
||||
this.fillPolygonMesh.material.updateUninform({
|
||||
u_opacity: style.opacity,
|
||||
u_baseColor: style.baseColor,
|
||||
u_brightColor: style.brightColor,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,137 @@
|
|||
// import * as THREE from '../../core/three';
|
||||
// import Tile from './tile';
|
||||
// export default class ImageTile extends Tile {
|
||||
// constructor(layer, z, x, y) {
|
||||
|
||||
// }
|
||||
// requestTileAsync() {
|
||||
// // Making this asynchronous really speeds up the LOD framerate
|
||||
// setTimeout(() => {
|
||||
// if (!this._mesh) {
|
||||
// this._mesh = this._createMesh();
|
||||
// this._requestTile();
|
||||
// }
|
||||
// }, 0);
|
||||
// }
|
||||
// _requestTile() {
|
||||
// const urlParams = {
|
||||
// x: this._tile[0],
|
||||
// y: this._tile[1],
|
||||
// z: this._tile[2]
|
||||
// };
|
||||
|
||||
// const url = this._getTileURL(urlParams);
|
||||
|
||||
// const image = document.createElement('img');
|
||||
|
||||
// image.addEventListener('load', event => {
|
||||
// const texture = new THREE.Texture();
|
||||
|
||||
// texture.image = image;
|
||||
// texture.needsUpdate = true;
|
||||
|
||||
// // Silky smooth images when tilted
|
||||
// texture.magFilter = THREE.LinearFilter;
|
||||
// texture.minFilter = THREE.LinearMipMapLinearFilter;
|
||||
|
||||
// // TODO: Set this to renderer.getMaxAnisotropy() / 4
|
||||
// texture.anisotropy = 4;
|
||||
|
||||
// texture.needsUpdate = true;
|
||||
|
||||
// // Something went wrong and the tile or its material is missing
|
||||
// //
|
||||
// // Possibly removed by the cache before the image loaded
|
||||
// if (!this._mesh || !this._mesh.children[0] || !this._mesh.children[0].material) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// this._mesh.children[0].material.map = texture;
|
||||
// this._mesh.children[0].material.needsUpdate = true;
|
||||
|
||||
// this._texture = texture;
|
||||
// this._ready = true;
|
||||
// }, false);
|
||||
|
||||
// // image.addEventListener('progress', event => {}, false);
|
||||
// // image.addEventListener('error', event => {}, false);
|
||||
|
||||
// image.crossOrigin = '';
|
||||
|
||||
// // Load image
|
||||
// image.src = url;
|
||||
|
||||
// this._image = image;
|
||||
// }
|
||||
|
||||
// _createMesh() {
|
||||
// // Something went wrong and the tile
|
||||
// //
|
||||
// // Possibly removed by the cache before loaded
|
||||
// if (!this._center) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const mesh = new THREE.Object3D();
|
||||
// const geom = new THREE.PlaneBufferGeometry(this._side, this._side, 1);
|
||||
|
||||
// let material;
|
||||
// if (!this._world._environment._skybox) {
|
||||
// material = new THREE.MeshBasicMaterial({
|
||||
// depthWrite: false
|
||||
// });
|
||||
|
||||
// // const material = new THREE.MeshPhongMaterial({
|
||||
// // depthWrite: false
|
||||
// // });
|
||||
// } else {
|
||||
// // Other MeshStandardMaterial settings
|
||||
// //
|
||||
// // material.envMapIntensity will change the amount of colour reflected(?)
|
||||
// // from the environment map–can be greater than 1 for more intensity
|
||||
|
||||
// material = new THREE.MeshStandardMaterial({
|
||||
// depthWrite: false
|
||||
// });
|
||||
// material.roughness = 1;
|
||||
// material.metalness = 0.1;
|
||||
// material.envMap = this._world._environment._skybox.getRenderTarget();
|
||||
// }
|
||||
|
||||
// const localMesh = new THREE.Mesh(geom, material);
|
||||
// localMesh.rotation.x = -90 * Math.PI / 180;
|
||||
|
||||
// localMesh.receiveShadow = true;
|
||||
|
||||
// mesh.add(localMesh);
|
||||
// mesh.renderOrder = 0.1;
|
||||
|
||||
// mesh.position.x = this._center[0];
|
||||
// mesh.position.z = this._center[1];
|
||||
|
||||
// // const box = new BoxHelper(localMesh);
|
||||
// // mesh.add(box);
|
||||
// //
|
||||
// // mesh.add(this._createDebugMesh());
|
||||
|
||||
// return mesh;
|
||||
// }
|
||||
// _abortRequest() {
|
||||
// if (!this._image) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// this._image.src = '';
|
||||
// }
|
||||
|
||||
// destroy() {
|
||||
// // Cancel any pending requests
|
||||
// this._abortRequest();
|
||||
|
||||
// // Clear image reference
|
||||
// this._image = null;
|
||||
|
||||
// super.destroy();
|
||||
// }
|
||||
|
||||
// }
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import LRUCache from '../../util/lru-cache';
|
||||
export default class TileCache {
|
||||
constructor(limit = 50) {
|
||||
this._cache = new LRUCache(limit);
|
||||
}
|
||||
|
||||
getTile(z, x, y) {
|
||||
const key = this._generateKey(z, x, y);
|
||||
return this._cache.get(key);
|
||||
}
|
||||
|
||||
setTile(tile, z, x, y) {
|
||||
const key = this._generateKey(z, x, y);
|
||||
this._cache.set(key, tile);
|
||||
}
|
||||
_generateKey(z, x, y) {
|
||||
return [ z, x, y ].join('_');
|
||||
}
|
||||
destory() {
|
||||
this._cache.clear();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
// const r2d = 180 / Math.PI;
|
||||
// const tileURLRegex = /\{([zxy])\}/g;
|
||||
// export class Tile {
|
||||
// constructor(layer, z, x, y) {
|
||||
// this.layer = layer;
|
||||
// this._tile = [ z, x, y ];
|
||||
|
||||
// }
|
||||
// _createMesh() {}
|
||||
// _createDebugMesh() {}
|
||||
|
||||
// _getTileURL(urlParams) {
|
||||
// if (!urlParams.s) {
|
||||
// // Default to a random choice of a, b or c
|
||||
// urlParams.s = String.fromCharCode(97 + Math.floor(Math.random() * 3));
|
||||
// }
|
||||
|
||||
// tileURLRegex.lastIndex = 0;
|
||||
// return this._path.replace(tileURLRegex, function(value, key) {
|
||||
// // Replace with paramter, otherwise keep existing value
|
||||
// return urlParams[key];
|
||||
// });
|
||||
// }
|
||||
|
||||
// _tileBoundsFromWGS84(boundsWGS84) {
|
||||
// const sw = this._layer._world.latLonToPoint(LatLon(boundsWGS84[1], boundsWGS84[0]));
|
||||
// const ne = this._layer._world.latLonToPoint(LatLon(boundsWGS84[3], boundsWGS84[2]));
|
||||
|
||||
// return [sw.x, sw.y, ne.x, ne.y];
|
||||
// }
|
||||
|
||||
// // Get tile bounds in WGS84 coordinates
|
||||
// _tileBoundsWGS84(tile) {
|
||||
// const e = this._tile2lon(tile[0] + 1, tile[2]);
|
||||
// const w = this._tile2lon(tile[0], tile[2]);
|
||||
// const s = this._tile2lat(tile[1] + 1, tile[2]);
|
||||
// const n = this._tile2lat(tile[1], tile[2]);
|
||||
// return [ w, s, e, n ];
|
||||
// }
|
||||
|
||||
// _tile2lon(x, z) {
|
||||
// return x / Math.pow(2, z) * 360 - 180;
|
||||
// }
|
||||
|
||||
// _tile2lat(y, z) {
|
||||
// const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
|
||||
// return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
|
||||
// }
|
||||
|
||||
// _boundsToCenter(bounds) {
|
||||
// const x = bounds[0] + (bounds[2] - bounds[0]) / 2;
|
||||
// const y = bounds[1] + (bounds[3] - bounds[1]) / 2;
|
||||
|
||||
// return [ x, y ];
|
||||
// }
|
||||
// destory() {
|
||||
|
||||
// }
|
||||
// }
|
||||
|
|
@ -128,6 +128,9 @@ export default class GaodeMap extends Base {
|
|||
scene.setZoom = zoom => {
|
||||
return map.setZoom(zoom);
|
||||
};
|
||||
scene.getBounds = () => {
|
||||
return map.getBounds();
|
||||
};
|
||||
scene.setZoomAndCenter = (zoom, center) => {
|
||||
const lnglat = new AMap.LngLat(center[0], center[1]);
|
||||
return map.setZoomAndCenter(zoom, lnglat);
|
||||
|
|
@ -138,6 +141,9 @@ export default class GaodeMap extends Base {
|
|||
scene.setRotation = rotation => {
|
||||
return map.setRotation(rotation);
|
||||
};
|
||||
scene.setStatus = status => {
|
||||
return map.setStatus(status);
|
||||
};
|
||||
scene.zoomIn = () => {
|
||||
return map.zoomIn();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import * as turfMeta from '@turf/meta';
|
||||
import { default as cleanCoords } from '@turf/clean-coords';
|
||||
import { getCoords } from '@turf/invariant';
|
||||
|
||||
export default function geoJSON(data) {
|
||||
const resultData = [];
|
||||
turfMeta.flattenEach(data, (currentFeature, featureIndex) => { // 多个polygon 拆成一个
|
||||
const coord = getCoords(cleanCoords(currentFeature));
|
||||
const coord = getCoords(currentFeature);
|
||||
const dataItem = {
|
||||
...currentFeature.properties,
|
||||
coordinates: coord,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Supercluster from 'supercluster';
|
||||
export function cluster(data, option) {
|
||||
const { radius = 40, maxZoom = 16, minZoom = 0, field, zoom = 2 } = option;
|
||||
const { radius = 80, maxZoom = 18, minZoom = 0, field, zoom = 2 } = option;
|
||||
if (data.pointIndex) {
|
||||
const clusterPoint = data.pointIndex.getClusters(data.extent, zoom);
|
||||
data.dataArray = formatData(clusterPoint);
|
||||
|
|
@ -38,10 +38,9 @@ export function cluster(data, option) {
|
|||
};
|
||||
});
|
||||
data.dataArray = resultData;
|
||||
data.pointIndex = pointIndex;
|
||||
return data;
|
||||
return { data, pointIndex };
|
||||
}
|
||||
function formatData(clusterPoint) {
|
||||
export function formatData(clusterPoint) {
|
||||
return clusterPoint.map((point, index) => {
|
||||
return {
|
||||
coordinates: point.geometry.coordinates,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import * as _ from '@antv/util';
|
||||
export default function diff(a, b) {
|
||||
// Throw is a or b are not objects.
|
||||
if (!_.isPlainObject(a)) {
|
||||
throw new Error('First parameter to diff() is not an object');
|
||||
}
|
||||
if (!_.isPlainObject(b)) {
|
||||
throw new Error('Second parameter to diff() is not an object');
|
||||
}
|
||||
|
||||
const changes = [];
|
||||
const keysA = _.keys(a);
|
||||
const keysB = _.keys(b);
|
||||
|
||||
// Find the items in A that are not in B.
|
||||
_.each(_.difference(keysA, keysB), key => {
|
||||
changes.push({ type: 'remove', key, value: a[key] });
|
||||
});
|
||||
|
||||
// Find the items in B that are not in A.
|
||||
_.each(_.difference(keysB, keysA), key => {
|
||||
changes.push({ type: 'add', key, value: b[key] });
|
||||
});
|
||||
|
||||
// Find the items that are in both, but have changed.
|
||||
_.each(intersection(keysA, keysB), key => {
|
||||
if (!_.isEqual(a[key], b[key])) {
|
||||
changes.push({ type: 'update', key, value: b[key] });
|
||||
}
|
||||
});
|
||||
|
||||
return changes;
|
||||
}
|
||||
function intersection(keysA, keysB) {
|
||||
return keysA.filter(key => {
|
||||
return keysB.indexOf(key) > -1;
|
||||
});
|
||||
}
|
||||
|
|
@ -41,3 +41,73 @@ export function buildMapping({
|
|||
canvasHeight: nextPowOfTwo(yOffset + (row + 1) * rowHeight)
|
||||
};
|
||||
}
|
||||
|
||||
function buildRowMapping(mapping, columns, yOffset) {
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
const { icon, xOffset } = columns[i];
|
||||
mapping[icon.id] = Object.assign({}, icon, {
|
||||
x: xOffset,
|
||||
y: yOffset,
|
||||
image: icon.image
|
||||
});
|
||||
}
|
||||
}
|
||||
export function resizeImage(ctx, imageData, width, height) {
|
||||
const { naturalWidth, naturalHeight } = imageData;
|
||||
if (width === naturalWidth && height === naturalHeight) {
|
||||
return imageData;
|
||||
}
|
||||
|
||||
ctx.canvas.height = height;
|
||||
ctx.canvas.width = width;
|
||||
|
||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
|
||||
// image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
|
||||
ctx.drawImage(imageData, 0, 0, naturalWidth, naturalHeight, 0, 0, width, height);
|
||||
|
||||
return ctx.canvas;
|
||||
}
|
||||
|
||||
export function buildIconMaping({ icons, buffer, maxCanvasWidth }) {
|
||||
let xOffset = 0;
|
||||
let yOffset = 0;
|
||||
let rowHeight = 0;
|
||||
let columns = [];
|
||||
const mapping = {};
|
||||
for (let i = 0; i < icons.length; i++) {
|
||||
const icon = icons[i];
|
||||
if (!mapping[icon.id]) {
|
||||
const { height, width } = icon;
|
||||
|
||||
// fill one row
|
||||
if (xOffset + width + buffer > maxCanvasWidth) {
|
||||
buildRowMapping(mapping, columns, yOffset);
|
||||
|
||||
xOffset = 0;
|
||||
yOffset = rowHeight + yOffset + buffer;
|
||||
rowHeight = 0;
|
||||
columns = [];
|
||||
}
|
||||
|
||||
columns.push({
|
||||
icon,
|
||||
xOffset
|
||||
});
|
||||
|
||||
xOffset = xOffset + width + buffer;
|
||||
rowHeight = Math.max(rowHeight, height);
|
||||
}
|
||||
}
|
||||
|
||||
if (columns.length > 0) {
|
||||
buildRowMapping(mapping, columns, yOffset);
|
||||
}
|
||||
|
||||
const canvasHeight = nextPowOfTwo(rowHeight + yOffset + buffer);
|
||||
|
||||
return {
|
||||
mapping,
|
||||
canvasHeight
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import CommonUtil from './common';
|
||||
import DomUtil from './dom';
|
||||
|
||||
const Util = {};
|
||||
|
||||
CommonUtil.merge(Util, CommonUtil, DomUtil, {
|
||||
mixin(c, mixins) {
|
||||
const Param = c.CFG ? 'CFG' : 'ATTRS';
|
||||
if (c && mixins) {
|
||||
c._mixins = mixins;
|
||||
c[Param] = c[Param] || {};
|
||||
const temp = {};
|
||||
Util.each(mixins, function(mixin) {
|
||||
Util.augment(c, mixin);
|
||||
const attrs = mixin[Param];
|
||||
if (attrs) {
|
||||
Util.merge(temp, attrs);
|
||||
}
|
||||
});
|
||||
c[Param] = Util.merge(temp, c[Param]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default Util;
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* LRU Cache class with limit
|
||||
*
|
||||
* Update order for each get/set operation
|
||||
* Delete oldest when reach given limit
|
||||
*/
|
||||
|
||||
export default class LRUCache {
|
||||
constructor(limit = 5) {
|
||||
this.limit = limit;
|
||||
|
||||
this.clear();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this._cache = {};
|
||||
// access/update order, first item is oldest, last item is newest
|
||||
this._order = [];
|
||||
}
|
||||
|
||||
get(key) {
|
||||
const value = this._cache[key];
|
||||
if (value) {
|
||||
// update order
|
||||
this._deleteOrder(key);
|
||||
this._appendOrder(key);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
set(key, value) {
|
||||
if (!this._cache[key]) {
|
||||
// if reach limit, delete the oldest
|
||||
if (Object.keys(this._cache).length === this.limit) {
|
||||
this.delete(this._order[0]);
|
||||
}
|
||||
|
||||
this._cache[key] = value;
|
||||
this._appendOrder(key);
|
||||
} else {
|
||||
// if found in cache, delete the old one, insert new one to the first of list
|
||||
this.delete(key);
|
||||
|
||||
this._cache[key] = value;
|
||||
this._appendOrder(key);
|
||||
}
|
||||
}
|
||||
|
||||
delete(key) {
|
||||
const value = this._cache[key];
|
||||
if (value) {
|
||||
this._deleteCache(key);
|
||||
this._deleteOrder(key);
|
||||
}
|
||||
}
|
||||
|
||||
_deleteCache(key) {
|
||||
delete this._cache[key];
|
||||
}
|
||||
|
||||
_deleteOrder(key) {
|
||||
const index = this._order.findIndex(o => o === key);
|
||||
if (index >= 0) {
|
||||
this._order.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
_appendOrder(key) {
|
||||
this._order.push(key);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { expect } from 'chai';
|
||||
import { pointData } from '../../../asset/data/point';
|
||||
import { cluster } from '../../../../src/source/transform/cluster';
|
||||
describe('hexagon Test', function() {
|
||||
describe('cluster Test', function() {
|
||||
|
||||
it('pointToCuster', function() {
|
||||
const dataArray = pointData.map(item => {
|
||||
|
|
@ -17,7 +17,7 @@ describe('hexagon Test', function() {
|
|||
dataArray,
|
||||
extent: [ -180, -85, 180, 85 ]
|
||||
};
|
||||
const grid = cluster(data, { radius: 40, field: 'v', zoom: 13 });
|
||||
expect(grid.dataArray.length).eql(26);
|
||||
const grid = cluster(data, { radius: 40, field: 'v', zoom: 13, bbox: [ -180, -85, 180, 85 ] });
|
||||
expect(grid.data.dataArray.length).eql(26);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue