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

Merge branch 'map' into 'master' 

Map

L7 实例化支持传入地图实例

See merge request !26
This commit is contained in:
thinkinggis 2019-04-16 11:24:16 +08:00
parent efbed8a820 a49c5bf388
commit 6d9354d758
9 changed files with 243 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demos/01_point_circle.html
View File

@ -31,11 +31,19 @@ const colorObj ={
yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"].reverse(),
purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"].reverse()
}
var mapinstance = new AMap.Map('map',{
center: [ 120.19382669582967, 30.258134 ],
viewMode: '3D',
pitch: 0,
zoom: 12,
maxZoom:20,
minZoom:0,
});
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
map:mapinstance,
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 12,

93
demos/04_choropleths_polygon.html Normal file
View File

@ -0,0 +1,93 @@
<!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>hexagon demo</title>
<style>
body {margin: 0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<div id ="info" class ="tooltip" style="display:none"></div>
<div class='info-panel top-right'>
<p>
<label>min</label><input name="minaqi" type="range" step="1" min="0" max="200" value=0> <label>0</label>
</p>
<p>
<label>max</label><input name="maxaqi" type="range" step="1" min="0" max="300" value=300><label>300</label>
</p>
<p><label>color</label><select>
<option value ="default">default</option>
<option value ="blue">blue</option>
<option value ="red">red</option>
<option value="orange">orange</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="purple">purple</option>
</select> </p>
<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>
const colorObj ={
blue: ["#E8FCFF", "#CFF6FF", "#98E3FA", "#65CEF7", "#3CB4F0", "#2894E0", "#1A76C7", "#105CB3", "#0D408C", "#002466"],
red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"],
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"],
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"],
yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"],
purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"],
}
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [104.838088,34.075889 ],
pitch: 0,
zoom: 4.5,
});
window.scene = scene;
scene.on('loaded', () => {
var colors = ["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"];
$.getJSON('https://gw.alipayobjects.com/os/basement_prod/7224a078-e3a3-4cc3-8749-7026af9e5c7f.json', city => {
const citylayer = scene.PolygonLayer()
.source(city)
.color('#F27049')
.shape('fill')
.active(true)
.style({
opacity: 0.8
})
.render();
const citylayer2 = scene.PolygonLayer()
.source(city)
.shape('line')
.color('#fff')
.style({
opacity: 1.0
})
.render();
console.log(citylayer);
});
});
</script>
</body>
</html>

78
demos/tile.html Normal file
View File

@ -0,0 +1,78 @@
<!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>hexagon demo</title>
<style>
body {margin: 0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</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>
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [104.838088,34.075889 ],
pitch: 0,
zoom: 4.5,
});
window.scene = scene;
scene.on('loaded', () => {
// https://gw.alipayobjects.com/os/basement_prod/24883cde-3352-4e53-af52-f6e59d4fe2c8.json
//tile https://gw.alipayobjects.com/os/basement_prod/c400bd4e-5b46-4769-b969-c1f09feaf908.json
$.getJSON('https://gw.alipayobjects.com/os/basement_prod/c400bd4e-5b46-4769-b969-c1f09feaf908.json', city => {
city.type = "FeatureCollection";
city.features = city.features.map((item)=>{
return {
type: "Feature",
properties:item.tags,
"geometry":{
"type": "Polygon",
"coordinates":item.geometry
}
}
})
console.log(city.features[0]);
const citylayer = scene.PolygonLayer()
.source(city)
.color('Code',["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"])
.shape('fill')
.active(true)
.style({
opacity: 1
})
.render();
console.log(citylayer);
/**
const citylayer2 = scene.PolygonLayer()
.source(city)
.shape('line')
.color('#fff')
.style({
opacity: 1.0
})
.render();
**/
});
});
</script>
</body>
</html>

2
src/core/scene.js
View File

@ -39,7 +39,7 @@ export default class Scene extends Base {
const MapProvider = getMap(this.mapType);
const Map = new MapProvider(this._attrs);
Map.mixMap(this);
this._container = document.getElementById(Map.container);
this._container = Map.container;
// const Map = new MapProvider(this.mapContainer, this._attrs);
Map.on('mapLoad', () => {
this.map = Map.map;

3
src/core/source.js
View File

@ -130,7 +130,8 @@ export default class Source extends Base {
const data = this.get('data');
// 如果是GeoJSON 数据返回原数
// 颜色编码从1开始，要素索引从0开始，所以颜色转变要素需要减1
return data.features
const isCluster = this.get('isCluster') || false;
return (data.features && !isCluster)
? data.features[featureId - 1]
: this.data.dataArray[featureId - 1];
}

28
src/geom/material/tile/polygon.js Normal file
View File

@ -0,0 +1,28 @@
import Material from '../material';
import { getModule } from '../../../util/shaderModule';
export default class TileMaterial extends Material {
getDefaultParameters() {
return {
uniforms: {
u_opacity: { value: 1.0 },
u_time: { value: 0 },
u_activeId: { value: 0 },
u_activeColor: { value: [ 1.0, 0, 0, 1.0 ] }
},
defines: {
}
};
}
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms, defines } = this.getDefaultParameters();
const { vs, fs } = getModule('tilepolygon');
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'tile_polygon_Material';
this.defines = Object.assign(defines, _defines);
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
}
}

5
src/geom/shader/tile/polygon_frag.glsl Normal file
View File

@ -0,0 +1,5 @@
varying vec4 v_color;
void main(){
gl_FragColor = v_color;
}

17
src/geom/shader/tile/polygon_vert.glsl Normal file
View File

@ -0,0 +1,17 @@
attribute vec4 a_color;
uniform float u_zoom;
uniform float u_opacity;
varying vec4 v_color;
uniform float u_activeId;
uniform vec4 u_activeColor;
void main(){
mat4 matModelViewProjection=projectionMatrix*modelViewMatrix;
v_color=a_color;
v_color.a*=u_opacity;
if(pickingId==u_activeId){
v_color = u_activeColor;
}
gl_Position=projectionMatrix*vec4(position.xy / 4096.,0.,1.);
}

18
src/map/AMap.js
View File

@ -28,7 +28,7 @@ export default class GaodeMap extends Base {
}
constructor(cfg) {
super(cfg);
this.container = this.get('id');
this.container = document.getElementById(this.get('id'));
this.initMap();
this.addOverLayer();
setTimeout(() => {
@ -38,7 +38,6 @@ export default class GaodeMap extends Base {
initMap() {
const mapStyle = this.get('mapStyle');
switch (mapStyle) {
case 'dark':
this.set('mapStyle', Theme.DarkTheme.mapStyle);
@ -50,7 +49,14 @@ export default class GaodeMap extends Base {
this.set('mapStyle', mapStyle);
}
this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]);
this.map = new AMap.Map(this.container, this._attrs);
const map = this.get('map');
if (map instanceof AMap.Map) {
this.map = map;
this.container = map.getContainer();
this.map.setMapStyle(this.get('mapStyle'));
} else {
this.map = new AMap.Map(this.container, this._attrs);
}
}
asyncCamera(engine) {
this._engine = engine;
@ -74,10 +80,6 @@ export default class GaodeMap extends Base {
camera.lookAt(0, 0, 0);
camera.position.x += e.camera.position.x;
camera.position.y += -e.camera.position.y;
// scene.position.x = -e.camera.position.x;
// scene.position.y = e.camera.position.y;
// pickScene.position.x = -e.camera.position.x;
// pickScene.position.y = e.camera.position.y;
});
}
@ -91,7 +93,7 @@ export default class GaodeMap extends Base {
return this.projectFlat(this.getCenter());
}
addOverLayer() {
const canvasContainer = document.getElementById(this.container);
const canvasContainer = this.container instanceof HTMLElement ? this.container : document.getElementById(this.container);
this.canvasContainer = canvasContainer;
this.renderDom = document.createElement('div');
this.renderDom.style.cssText +=