p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(worker):test

This commit is contained in:
thinkinggis 2019-07-02 20:27:23 +08:00
parent 5086aa1d73
commit 5a1cfded2d
18 changed files with 253 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
demos/gaode.html Normal file
View File

@ -0,0 +1,81 @@
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script type="text/javascript">
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
html,body,.map{
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<title>简易行政区图-世界</title>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
<script type="text/javascript">
var SOC = 'CHN'
var colors = {};
var getColorBySOC = function(SOC){
//可按需改为其他实现
if(SOC){
if(!colors[SOC]){
var R = SOC.charCodeAt(0)*2
var G = R;//SOC.charCodeAt(1)*2
var B = 255;
colors[SOC] = 'rgb('+R+','+G+','+B +')';
}
return colors[SOC]
}else{
return 'rgb(200,200,240)'
}
}
var disWorld = new AMap.DistrictLayer.World({
zIndex:10,
styles:{
// 颜色格式: #RRGGBB、rgba()、rgb()、[r,g,b,a]
'nation-stroke':function(props){
//props:{type:Nation_Border_China/Nation_Border_Foreign}
if(props.type=='Nation_Border_China'){
return 'red'
}else{
return 'white'
}
},
'coastline-stroke': [0.8, 0.63, 1, 1],
'fill':function(props){
//props:{NAME_CHH,NAME_ENG,SOC}
return getColorBySOC(props.SOC)
}
}
})
var map = new AMap.Map("container",{
zooms: [3, 15],
center:[100,36],
showIndoorMap:false,
zoom: 3,
isHotspot:false,
defaultCursor:'pointer',
touchZoomCenter:1,
pitch: 0,
layers:[
disWorld
],
viewMode:'3D',
resizeEnable: true
})
map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar({liteStyle:true}));
</script>
</body>
</html>

73
demos/hz.html Normal file
View File

@ -0,0 +1,73 @@
<!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">
<title>city demo</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
<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=" https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.1.10/dist/l7.min.js"></script>
<script>
var buildLayer =null;
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [120.173104, 30.244072],
pitch: 66.50572,
zoom: 15.79,
minZoom:10
});
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', data => {
scene.LineLayer({
zIndex: 2
})
.source(data)
.size(2)
.color('#ff893a')
.animate({
enable:false,
interval:0.2,
duration:5,
trailLength:0.1
})
.render();
});
$.get('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', data => {
buildLayer = scene.PolygonLayer({
zIndex: 2
})
.source(data)
.shape('extrude')
.size('floor',[0,2000])
.color('rgba(242,246,250,1.0)')
.animate({enable:true})
.style({
opacity:1.0,
baseColor:'rgb(16,16,16)',
windowColor:'rgb(30,60,89)',
brightColor:'rgb(255,176,38)',
})
.render();
});
});
</script>
</body>
</html>

17
demos/taxi.html
View File

@ -54,24 +54,7 @@ scene.on('loaded', () => {
opacity:1.0, opacity:1.0,
baseColor:'rgb(16,16,16)', baseColor:'rgb(16,16,16)',
windowColor:'rgb(30,60,89)', windowColor:'rgb(30,60,89)',
//brightColor:'rgb(155,217,255)'
brightColor:'rgb(255,176,38)', brightColor:'rgb(255,176,38)',
lights: [
{
type: 'directional',
direction: [ 1, 10.5, 12 ],
ambient: [ 0.2, 0.2, 0.2 ],
diffuse: 'red',
specular: [ 0.1, 0.1, 0.1 ]
},
{
type: 'directional',
direction: [ 1, -10.5, 12 ],
ambient: [ 0.2, 0.2, 0.2 ],
diffuse: 'green',
specular: [ 0.1, 0.1, 0.1 ]
},
]
}) })
.render(); .render();

23
demos/vectorTilepolygon.html
View File

@ -23,7 +23,7 @@
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/L7.js"></script>
<script> <script>
window.L7 = L7;
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
@ -38,30 +38,23 @@ var colorHash = new ColorHash();
scene.on('loaded', () => { scene.on('loaded', () => {
const layer = scene.VectorTileLayer({ const layer = scene.VectorTileLayer({
zIndex:0, zIndex:0,
layerType:'polygon' layerType:'polygon'
}) })
.source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/province/{z}/{x}/{y}.pbf',{ // http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/county/{z}/{x}/{y}.pbf
.source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/county/{z}/{x}/{y}.pbf',{
parser:{ parser:{
type: 'mvt', type: 'mvt',
sourceLayer:'layer', sourceLayer:'county',
idField:'code', idField:'id',
maxZoom: 5, maxZoom: 9,
} }
}) })
.scale({ .shape('line')
total:{
type:'linear',
min:0,
max:5000000
}
})
.shape('fill')
.size(2) .size(2)
.active(false) .active(false)
.color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506']) .color('red')
.style({ .style({
opacity:1.0 opacity:1.0
}) })

2
package.json
View File

@ -51,6 +51,8 @@
"rollup": "^1.16.2", "rollup": "^1.16.2",
"rollup-plugin-buble": "^0.19.6", "rollup-plugin-buble": "^0.19.6",
"rollup-plugin-commonjs": "^9.2.1", "rollup-plugin-commonjs": "^9.2.1",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-resolve": "^4.0.1", "rollup-plugin-node-resolve": "^4.0.1",
"rollup-plugin-terser": "^4.0.4", "rollup-plugin-terser": "^4.0.4",
"serve-static": "^1.13.2", "serve-static": "^1.13.2",

17
rollup.config.js
View File

@ -1,8 +1,10 @@
import fs from 'fs'; import fs from 'fs';
// import sourcemaps from 'rollup-plugin-sourcemaps'; // import sourcemaps from 'rollup-plugin-sourcemaps';
import json from 'rollup-plugin-json';
import buble from 'rollup-plugin-buble'; import buble from 'rollup-plugin-buble';
import resolve from 'rollup-plugin-node-resolve'; import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs'; import commonjs from 'rollup-plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';
import { createFilter } from 'rollup-pluginutils'; import { createFilter } from 'rollup-pluginutils';
import { terser } from 'rollup-plugin-terser'; import { terser } from 'rollup-plugin-terser';
const { BUILD, MINIFY } = process.env; const { BUILD, MINIFY } = process.env;
@ -25,13 +27,18 @@ const config = [
chunkFileNames: 'shared.js' chunkFileNames: 'shared.js'
}, },
// experimentalCodeSplitting: true, // experimentalCodeSplitting: true,
treeshake: false, treeshake: production,
onwarn(warning, warn) {
if (warning.code === 'CIRCULAR_DEPENDENCY') return;
warn(warning);
},
plugins: [ plugins: [
glsl( glsl(
[ './src/geom/shader/*.glsl', './src/core/engine/picking/*.glsl', './src/geom/shader/**/*.glsl' ], [ './src/geom/shader/*.glsl', './src/core/engine/picking/*.glsl', './src/geom/shader/**/*.glsl' ],
production production
), ),
minified ? terser() : false, minified ? terser() : false,
json(),
buble({ buble({
transforms: { dangerousForOf: true }, transforms: { dangerousForOf: true },
objectAssign: 'Object.assign' objectAssign: 'Object.assign'
@ -41,10 +48,9 @@ const config = [
preferBuiltins: false preferBuiltins: false
}), }),
commonjs({ commonjs({
// global keyword handling causes Webpack compatibility issues, so we disabled it:
// https://github.com/mapbox/mapbox-gl-js/pull/6956
ignoreGlobal: true ignoreGlobal: true
}) }),
builtins()
] ]
}, },
{ {
@ -62,9 +68,6 @@ const config = [
}, },
treeshake: false, treeshake: false,
plugins: [ plugins: [
// Ingest the sourcemaps produced in the first step of the build.
// This is the only reason we use Rollup for this second pass
// sourcemaps()
] ]
} }
]; ];

4
src/core/layer.js
View File

@ -274,13 +274,13 @@ export default class Layer extends Base {
} }
_setAttrOptions(attrName, attrCfg) { _setAttrOptions(attrName, attrCfg) {
const options = this.get('attrOptions'); const options = this.get('attrOptions');
if (attrName === 'size' && this._zoomScale) { if (attrName === 'size' && this._zoomScale) {
attrCfg.zoom = this.map.getZoom(); attrCfg.zoom = this.map.getZoom();
} }
options[attrName] = attrCfg; options[attrName] = attrCfg;
} }
_createAttrOption(attrName, field, cfg, defaultValues) { _createAttrOption(attrName, field, cfg, defaultValues) {
const attrCfg = {}; const attrCfg = {};
attrCfg.field = field; attrCfg.field = field;
if (cfg) { if (cfg) {
@ -384,8 +384,8 @@ export default class Layer extends Base {
const nextStyle = this.get('styleOptions'); const nextStyle = this.get('styleOptions');
if (preAttrs === undefined && preStyle === undefined) { // 首次渲染 if (preAttrs === undefined && preStyle === undefined) { // 首次渲染
// this._mapping(); // this._mapping();
// this._scaleByZoom();
this._setPreOption(); this._setPreOption();
this._scaleByZoom();
this._initInteraction(); this._initInteraction();
this._initMapEvent(); this._initMapEvent();
this.draw(); this.draw();

4
src/core/scene.js
View File

@ -25,8 +25,8 @@ export default class Scene extends Base {
_initEngine(mapContainer) { _initEngine(mapContainer) {
this._engine = new Engine(mapContainer, this); this._engine = new Engine(mapContainer, this);
this.registerMapEvent(); // this.registerMapEvent();
// this._engine.run(); this._engine.run();
this.workerPool = new WorkerPool(); this.workerPool = new WorkerPool();
compileBuiltinModules(); compileBuiltinModules();
} }

2
src/layer/polygon_layer.js
View File

@ -6,7 +6,7 @@ export default class PolygonLayer extends Layer {
return this; return this;
} }
draw() { draw() {
this.init(); // this.init();
this.type = 'polygon'; this.type = 'polygon';
const animateOptions = this.get('animateOptions'); const animateOptions = this.get('animateOptions');
if (animateOptions.enable) { if (animateOptions.enable) {

4
src/layer/tile/tile.js
View File

@ -47,6 +47,10 @@ export default class Tile extends Base {
} }
requestTileAsync(done) { requestTileAsync(done) {
// 获取数据 // 获取数据
this.layer.workerTileSource.loadTile({
tile: this._tile,
url: this.layer.tileSource.getRequestUrl(this._tile[0], this._tile[1], this._tile[2])
});
const data = this.layer.tileSource.getTileData(this._tile[0], this._tile[1], this._tile[2]); const data = this.layer.tileSource.getTileData(this._tile[0], this._tile[1], this._tile[2]);
if (data.loaded) { if (data.loaded) {
done(data.data); done(data.data);

18
src/layer/tile/tile_layer.js
View File

@ -2,6 +2,7 @@ import Layer from '../../core/layer';
import Util from '../../util'; import Util from '../../util';
import diff from '../../util/diff'; import diff from '../../util/diff';
import TileSource from '../../source/tile_source'; import TileSource from '../../source/tile_source';
import TileWorkerSource from '../../source/tile_worker_source';
import * as THREE from '../../core/three'; import * as THREE from '../../core/three';
import Controller from '../../core/controller/index'; import Controller from '../../core/controller/index';
import Global from '../../global'; import Global from '../../global';
@ -26,6 +27,9 @@ export default class TileLayer extends Layer {
this.tileList = {}; this.tileList = {};
this.type = this.get('layerType'); this.type = this.get('layerType');
this.workerPool = this.scene.workerPool; this.workerPool = this.scene.workerPool;
this.workerTileSource = new TileWorkerSource({
workerPool: this.scene.workerPool
});
} }
shape(field, values) { shape(field, values) {
const layerType = this.get('layerType'); const layerType = this.get('layerType');
@ -41,13 +45,12 @@ export default class TileLayer extends Layer {
this.tileSource = data; this.tileSource = data;
} else { } else {
cfg.mapType = this.scene.mapType; cfg.mapType = this.scene.mapType;
this.workerPool.runTask({
data,
cfg
}).then(res => {
console.log(res);
});
this.tileSource = new TileSource(data, cfg); this.tileSource = new TileSource(data, cfg);
this.sourceCfg = {
...cfg,
url: data
};
this.workerTileSource.set('sourceCfg', this.sourceCfg);
} }
return this; return this;
} }
@ -412,8 +415,9 @@ export default class TileLayer extends Layer {
const nextAttrs = this.get('attrOptions'); const nextAttrs = this.get('attrOptions');
const preStyle = this.get('preStyleOption'); const preStyle = this.get('preStyleOption');
const nextStyle = this.get('styleOptions'); const nextStyle = this.get('styleOptions');
this.workerTileSource.set('attrs', nextAttrs);
if (preAttrs === undefined && preStyle === undefined) { // 首次渲染 if (preAttrs === undefined && preStyle === undefined) { // 首次渲染
this._setPreOption(); // this._setPreOption();
this._scaleByZoom(); this._scaleByZoom();
this._initControllers(); this._initControllers();
this._initInteraction(); this._initInteraction();

2
src/layer/tile/vector_tile.js
View File

@ -1,5 +1,5 @@
import Tile from './tile'; import Tile from './tile';
import { getArrayBuffer } from '../../util/ajax';
import { destoryObject, updateObjecteUniform } from '../../util/object3d-util'; import { destoryObject, updateObjecteUniform } from '../../util/object3d-util';
import * as THREE from '../../core/three'; import * as THREE from '../../core/three';
import MaskMaterial from '../../geom/material/tile/maskMaterial'; import MaskMaterial from '../../geom/material/tile/maskMaterial';

3
src/source/parser/mvt.js
View File

@ -12,9 +12,6 @@ export default function mvt(data, cfg) {
for (let i = 0; i < vectorLayer.length; i++) { for (let i = 0; i < vectorLayer.length; i++) {
const feature = vectorLayer.feature(i); const feature = vectorLayer.feature(i);
const geofeature = feature.toGeoJSON(cfg.tile[0], cfg.tile[1], cfg.tile[2]); const geofeature = feature.toGeoJSON(cfg.tile[0], cfg.tile[1], cfg.tile[2]);
if (geofeature.geometry.type === 'Polygon' && geofeature.geometry.coordinates[0].length < 20) {
continue;
}
features.push(geofeature); features.push(geofeature);
} }
// console.log(features); // console.log(features);

13
src/source/tile_source.js
View File

@ -9,8 +9,6 @@ export default class TileSource extends Source {
this.urlTemplate = url; this.urlTemplate = url;
this._tileDataCache = new TileDataCache(50, this.tileDestroy); this._tileDataCache = new TileDataCache(50, this.tileDestroy);
this.type = 'tile'; this.type = 'tile';
} }
getTileData(x, y, z) { getTileData(x, y, z) {
const key = [ x, y, z ].join('_'); const key = [ x, y, z ].join('_');
@ -65,6 +63,11 @@ export default class TileSource extends Source {
done(tileData); done(tileData);
}); });
}
getRequestUrl(x, y, z) {
const urlParams = { x, y, z };
return this._getTileURL(urlParams);
} }
_getTileURL(urlParams) { _getTileURL(urlParams) {
if (!urlParams.s) { if (!urlParams.s) {
@ -78,15 +81,11 @@ export default class TileSource extends Source {
}); });
} }
tileDestroy(tile) { tileDestroy(tile) {
if (!tile || !tile.data || tile.loading || !tile.data.data.dataArray) { if (!tile || !tile.data || tile.loading || !tile.data.data || !tile.data.data.dataArray) {
return; return;
} }
const tileData = tile.data; const tileData = tile.data;
tileData.destroy(); tileData.destroy();
tileData.data.dataArray.length = 0;
tileData.data.featureKeys = null;
tileData.originData.dataArray.length = 0;
tileData.originData.featureKeys = null;
} }
} }

17
src/source/tile_worker_source.js Normal file
View File

@ -0,0 +1,17 @@
import Base from '../core/base';
export default class TileWorkerSource extends Base {
constructor(cfg) {
super(cfg);
this.workerPool = this.get('workerPool');
this.type = 'tile';
}
loadTile({ tile, url }) {
this.get('sourceCfg').parser.tile = tile;
return this.workerPool.runTask({
url,
attrs: this.get('attrs'),
sourceCfg: this.get('sourceCfg')
});
}
}

2
src/util/ajax.js
View File

@ -17,7 +17,7 @@ class AJAXError extends Error {
} }
function makeRequest(requestParameters) { function makeRequest(requestParameters) {
const xhr = new window.XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', requestParameters.url, true); xhr.open('GET', requestParameters.url, true);
for (const k in requestParameters.headers) { for (const k in requestParameters.headers) {

3
src/util/version.js
View File

@ -1,4 +1,3 @@
const fs = require('fs'); import pkg from '../../package.json';
const pkg = JSON.parse(fs.readFileSync(__dirname + '/../../package.json', 'utf8'));
const version = 'v' + pkg.version; const version = 'v' + pkg.version;
export default version; export default version;

39
src/worker/worker.js
View File

@ -1,18 +1,45 @@
import Source from '../core/source'; import Source from '../core/source';
import TileSource from '../source/tile_source'; // import Controller from '../core/controller/index';
import { getArrayBuffer } from '../util/ajax'; import { getArrayBuffer } from '../util/ajax';
export default class Worker { export default class Worker {
constructor(self) { constructor(self) {
this.self = self; this.self = self;
this.self.addEventListener('message', cfg => { this.self.addEventListener('message', cfg => {
const sourceCfg = cfg.data; this.loadTile(cfg.data);
this.loadTile(sourceCfg);
}); });
} }
loadTile(cfg) { loadTile(cfg) {
const tileSource = new TileSource(cfg.data, cfg.cfg); // const tileSource = new TileSource(cfg.data, cfg.cfg);
console.log(tileSource); getArrayBuffer({ url: cfg.url }, (err, data) => {
this.self.postMessage('success'); if (err) {
this.self.postMessage(null);
return;
}
const tileData = this._generateSource(cfg, data.data);
console.log(tileData);
const uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
for (let i = 0; i < uInt8Array.length; ++i) {
uInt8Array[i] = i;
}
console.time('postmessage');
const b = function() {
return 'update';
};
this.self.postMessage({ a:
uInt8Array.buffer,
update: b
}, [ uInt8Array.buffer, b ]);
console.timeEnd('postmessage');
});
}
_generateSource(cfg, data) {
const tileData = new Source({
...cfg.sourceCfg,
data
});
return tileData;
} }
} }
self.worker = new Worker(self); self.worker = new Worker(self);