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

Merge pull request #28 from antvis/touch 

fix map bug
This commit is contained in:
@thinkinggis 2019-09-07 10:47:12 +08:00 committed by GitHub
parent cf5254c8f9 b54ad1093c
commit bbc16a263d
18 changed files with 263 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
bin/shader2js.js Normal file
View File

@ -0,0 +1,30 @@
const fs = require('fs');
const Path = require('path');
const dirpath = Path.join(__dirname, '../src/geom/shader/');
// const shaderdir = fs.readdirSync(dirpath);
readDirSync(dirpath);
function readDirSync(path) {
const pa = fs.readdirSync(path);
let dir = '../lib/geom/shader/';
pa.forEach(function(ele) {
const info = fs.statSync(path + '/' + ele);
if (info.isDirectory()) {
dir += (ele + '/');
readDirSync(path + '/' + ele);
} else {
if (Path.extname(path + ele) === '.glsl') {
if (!fs.existsSync(Path.join(__dirname, dir + '/'))) {
fs.mkdirSync(Path.join(__dirname, dir + '/'));
}
const newpath = Path.join(__dirname, dir + '/' + ele + '.js');
const shaderContent = fs.readFileSync(path + '/' + ele).toString();
const res = `export default /* glsl */\` \n${shaderContent};\``;
fs.writeFileSync(newpath, res);
}
}
});
}

33
demos/03_choropleths_polygon.html
View File

@ -64,7 +64,24 @@ scene.on('loaded', () => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
const citylayer = scene.PolygonLayer()
.source(city)
.color('pm2_5_24h',(p)=>{
.color('pm2_5_24h',colorObj['green'])
.shape('fill')
.active(true)
.style({
opacity: 1
})
.render();
var highlight = scene.LineLayer().source(city).color('red').filter('name',(name)=>{
return name === '上海'
}).shape('line').size(2).render();
/**
const colorsEnum = ['blue','red','orange','green','purple','purple']
setInterval(()=>{
const index = parseInt(Math.random() * 5)
const colors = colorObj[colorsEnum[index]]
citylayer.color('pm2_5_24h',(p)=>{
if(p>120){
return colors[5];
} else if(p>65){
@ -78,13 +95,12 @@ scene.on('loaded', () => {
}else {
return colors[0];
}
})
.shape('fill')
.active(true)
.style({
opacity: 1
})
.render();
}).render()
},10000)
**/
const citylayer2 = scene.PolygonLayer()
.source(city)
@ -113,7 +129,6 @@ scene.on('loaded', () => {
$('.info-panel select').change(function(){
const color = $(this).val();
citylayer.color('pm2_5_24h',colorObj[color]).render();
console.timeEnd('color')
})
});
});

2
demos/dashline.html
View File

@ -41,7 +41,7 @@ scene.on('loaded', () => {
.shape('line')
.style({
lineType: 'dash',
dashArray: 200,
dashArray: 20,
dashOffset: 0.2,
dashRatio: 0.5
})

106
demos/markertest.html Normal file
View File

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
<title>绘制动效Marker</title>
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="../build/L7.js"></script>
<script src="https://gw.alipayobjects.com/os/antvdemo/assets/js/g.min.js"></script>\
<script>
var scene = new L7.Scene({
id: 'map',
mapStyle: 'amap://styles/normal', // 样式URL
center: [121.178655,31.24608],
pitch: 0,
zoom: 12
});
scene.on('loaded', function() {
scene.map.on('mousemove',(e)=>{
console.log('mousemove', e.pixel, e.lnglat.lng, e.lnglat.lat);
console.log('lngLatToContainer', scene.map.lngLatToContainer([120.178655,30.24608]),120.178655,30.24608)
})
var el = document.createElement('div');
el.style.width = '100px';
var canvas = new G.Canvas({
containerDOM: el,
width: 100,
height: 100,
renderer: 'canvas'
});
var group = canvas.addGroup();
var shape1 = group.addShape('circle', {
zIndex: 3,
attrs: {
x: 50,
y: 50,
r: 50,
stroke: 'rgb(255,200, 200)',
lineWidth: 1,
opacity: 1
}
});
var shape2 = group.addShape('circle', {
zIndex: 2,
attrs: {
x: 50,
y: 50,
r: 50,
stroke: 'rgb(255,200, 200)',
lineWidth: 1,
opacity: 1
}
});
var shape3 = group.addShape('circle', {
zIndex: 1,
attrs: {
x: 50,
y: 50,
r: 50,
stroke: 'rgb(255,0, 0)',
lineWidth: 1,
opacity: 1
}
});
var shape = group.addShape('circle', {
zIndex: 5,
attrs: {
x: 50,
y: 50,
r: 20,
fill: 'red',
stroke: '#fff',
lineWidth: 2
}
});
function updateMarker() {
var t = performance.now() % duration / duration;
shape.attr('lineWidth', 2 + 4 * (1 - t));
//shape2.attr('opacity', 1 - t );
shape1.attr('r', 40 * 0.7 * t + 5);
shape2.attr('r', 40 * 0.7 * t + 10);
shape3.attr('r', 40 * 0.7 * t + 15);
requestAnimationFrame(updateMarker);
canvas.draw();
}
var duration = 1000;
updateMarker();
new L7.Marker({
color: 'blue',
element: el
}).setLnglat([120.178655,30.24608]).addTo(scene);
});
</script>
</body>
</html>

2
demos/text.html
View File

@ -51,7 +51,7 @@ scene.on('loaded', () => {
})
.render();
scene.TextLayer({
scene.PointLayer({
zIndex: 5
})
.source(data.list, {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "1.3.3-beta.1",
"version": "1.3.3-beta.3",
"description": "Large-scale WebGL-powered Geospatial Data Visualization",
"main": "build/L7.js",
"homepage": "https://github.com/antvis/l7",

2
rollup.config.js
View File

@ -41,11 +41,9 @@ const config = [
),
minified ? terser() : false,
json(),
// css({ raw: './build/l7.css' }),
postcss({
plugins: [ url({ url: 'inline' }) ]
}),
// url({ url: 'inline' }),
buble({
transforms: { dangerousForOf: true },
objectAssign: 'Object.assign'

11
src/component/control/base.js
View File

@ -23,6 +23,7 @@ export default class Control extends Base {
}
addTo(scene) {
this.remove();
this.isShow = true;
this._scene = scene;
const container = this._container = this.onAdd(scene);
const pos = this.get('position');
@ -36,6 +37,16 @@ export default class Control extends Base {
}
return this;
}
hide() {
const container = this._container;
DOM.addClass(container, 'l7-control-hide');
this.isShow = false;
}
show() {
const container = this._container;
DOM.removeClass(container, 'l7-control-hide');
this.isShow = true;
}
remove() {
if (!this._scene) {
return this;

3
src/component/css/l7.css
View File

@ -230,6 +230,9 @@
.l7-control-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.l7-control-hide {
display: none;
}
.l7-control {
position: relative;
z-index: 800;

1
src/core/controller/mapping.js
View File

@ -169,7 +169,6 @@ export default class Mapping {
for (let i = 0; i < fields.length; i++) {
const field = fields[i];
const scale = self._createScale(field);
if (type === 'color' && Util.isNil(option.values)) { // 设置 color 的默认色值
option.values = Global.colors;
}

56
src/core/layer.js
View File

@ -416,24 +416,12 @@ export default class Layer extends Base {
this.draw();
return;
}
// 更新数据过滤 filter
if (!Util.isEqual(preAttrs.filter, nextAttrs.filter)) {
this.repaint();
this._setPreOption();
return;
}
if (!Util.isEqual(preAttrs.color, nextAttrs.color)) {
this._updateAttributes(this.layerMesh);
}
// 更新Size
if (!Util.isEqual(preAttrs.size, nextAttrs.size)) {
// 更新color；
this.repaint();
}
// 更新形状
if (!Util.isEqual(preAttrs.shape, nextAttrs.shape)) {
// 更新color；
if (!Util.isEqual(preAttrs.filter, nextAttrs.filter) ||
!Util.isEqual(preAttrs.color, nextAttrs.color) ||
!Util.isEqual(preAttrs.size, nextAttrs.size) ||
!Util.isEqual(preAttrs.shape, nextAttrs.shape)
) {
this.repaint();
}
if (!Util.isEqual(preStyle, nextStyle)) {
@ -445,6 +433,7 @@ export default class Layer extends Base {
});
this._updateStyle(newStyle);
}
this._setPreOption();
}
_updateSize(zoom) {
@ -481,7 +470,6 @@ export default class Layer extends Base {
}
getSelectFeature(featureId, lnglat) {
// return {};
if (this.get('layerType') === 'tile') {
const sourceCache = this.getSourceCache(this.get('sourceOption').id);
const feature = sourceCache.getSelectFeature(featureId, this.layerId, lnglat);
@ -499,38 +487,6 @@ export default class Layer extends Base {
_updateFilter() {
this.get('mappingController').reMapping();
}
/**
* 用于过滤数据
* @param {*} object 更新颜色和数据过滤
*/
_updateAttributes(object) {
this.get('mappingController').update();
const filterData = this.layerData;
this._activeIds = null; // 清空选中元素
const colorAttr = object.geometry.attributes.a_color;
const pickAttr = object.geometry.attributes.pickingId;
pickAttr.array.forEach((id, index) => {
id = Math.abs(id);
const color = [ ...this.layerData[id - 1].color ];
id = Math.abs(id);
const item = filterData[id - 1];
if (item.hasOwnProperty('filter') && item.filter === false) {
colorAttr.array[index * 4 + 0] = 0;
colorAttr.array[index * 4 + 1] = 0;
colorAttr.array[index * 4 + 2] = 0;
colorAttr.array[index * 4 + 3] = 0;
pickAttr.array[index] = -id; // 通过Id数据过滤 id<0 不显示
} else {
colorAttr.array[index * 4 + 0] = color[0];
colorAttr.array[index * 4 + 1] = color[1];
colorAttr.array[index * 4 + 2] = color[2];
colorAttr.array[index * 4 + 3] = color[3];
pickAttr.array[index] = id;
}
});
colorAttr.needsUpdate = true;
pickAttr.needsUpdate = true;
}
_visibleWithZoom() {
if (this._object3D === null) return;
const zoom = this.scene.getZoom();

10
src/core/scene.js
View File

@ -36,13 +36,17 @@ export default class Scene extends Base {
const controlCtr = new Controller({ scene: this });
this.set('controlController', controlCtr);
if (this.get('zoomControl')) {
new Control.Zoom().addTo(this);
const zoomControl = new Control.Zoom().addTo(this);
this.set('zoomControl', zoomControl);
}
if (this.get('scaleControl')) {
new Control.Scale().addTo(this);
const scaleControl = new Control.Scale().addTo(this);
this.set('scaleControl', scaleControl);
}
if (this.get('attributionControl')) {
new Control.Attribution().addTo(this);
const attributionControl = new Control.Attribution().addTo(this);
this.set('attributionControl', attributionControl);
}
}
// 为pickup场景添加 object 对象

2
src/geom/shader/meshline_vert.glsl
View File

@ -35,7 +35,7 @@ void main() {
// extrude along normal
float extrude_scale = pow(2.0, 20.0 - u_zoom);
v_color = a_color;
v_dash_array = a_dash_array;
v_dash_array = a_dash_array * pow(2.0, 20.0 - u_zoom);
float distance_ratio = a_distance / a_total_distance;
#if defined DASHLINE || defined ANIMATE
v_distance_ratio = distance_ratio;

10
src/geom/shader/text_frag.glsl
View File

@ -1,9 +1,9 @@
uniform sampler2D u_sdf_map;
uniform float u_gamma_scale : 0.5;
uniform float u_font_size : 24;
uniform float u_font_opacity : 1.0;
uniform vec4 u_halo_color : [0, 0, 0, 1];
uniform float u_halo_width : 2.0;
uniform float u_opacity : 1.0;
uniform vec4 u_strokeColor : [0, 0, 0, 1];
uniform float u_strokeWidth : 2.0;
uniform float u_halo_blur : 0.5;
varying vec4 v_color;
@ -16,13 +16,13 @@ void main() {
float fontScale = u_font_size / 24.0;
lowp float buff = (6.0 - u_halo_width / fontScale) / SDF_PX;
lowp float buff = (6.0 - u_strokeWidth / fontScale) / SDF_PX;
highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
highp float gamma_scaled = gamma * v_gamma_scale;
highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
gl_FragColor = mix(v_color * u_font_opacity, u_halo_color, smoothstep(0., 0.5, 1. - dist)) * alpha;
gl_FragColor = mix(v_color * u_opacity, u_strokeColor, smoothstep(0., 0.5, 1. - dist)) * alpha;
#pragma include "pick"
}

1
src/layer/image_layer.js
View File

@ -21,6 +21,7 @@ export default class imageLayer extends Layer {
});
const imageMesh = new THREE.Mesh(this.geometry, material);
this.add(imageMesh);
this.scene._engine.update();
});
return this;

7
src/layer/line_layer.js
View File

@ -5,9 +5,10 @@ export default class LineLayer extends Layer {
super(scene, cfg);
this.set('type', 'line');
}
shape(type) {
this.shapeType = type;
this.set('shape', type);
shape(field, values) {
super.shape(field, values);
this.shapeType = field;
this.set('shape', field);
return this;
}
preRender() {

22
src/layer/render/text/drawText.js
View File

@ -3,8 +3,22 @@ import TextMaterial from '../../../geom/material/textMaterial';
import TextBuffer from '../../../geom/buffer/point/text';
import ColorUtil from '../../../attr/color-util';
import CollisionIndex from '../../../util/collision-index';
const defaultTextStyle = {
fontWeight: 500,
textAnchor: 'center',
textOffset: [ 0, 0 ],
spacing: 2,
padding: [ 4, 4 ],
strokeColor: 'white',
strokeWidth: 2,
strokeOpacity: 1.0
};
export default function DrawText(layerData, layer) {
const style = layer.get('styleOptions');
const style = {
...defaultTextStyle,
...layer.get('styleOptions')
};
layer.set('styleOptions', style);
const activeOption = layer.get('activedOptions');
const { strokeWidth, strokeColor, opacity } = style;
@ -20,10 +34,10 @@ export default function DrawText(layerData, layer) {
const material = new TextMaterial({
name: layer.layerId,
u_sdf_map: texture,
u_halo_color: ColorUtil.toRGB(strokeColor).map(e => e / 255),
u_halo_width: strokeWidth,
u_strokeColor: ColorUtil.toRGB(strokeColor).map(e => e / 255),
u_strokeWidth: strokeWidth,
u_halo_blur: 0.5,
u_font_opacity: opacity,
u_opacity: opacity,
u_sdf_map_size: [ fontAtlas.width, fontAtlas.height ],
u_viewport_size: [ width, height ],
u_activeColor: activeOption.fill

85
src/map/AMap.js
View File

@ -3,6 +3,7 @@ import Global from '../global';
import * as Theme from '../theme/index';
import Util from '../util';
const DEG2RAD = Math.PI / 180;
const defaultMapFeatures = [ 'bg', 'point', 'road', 'building' ];
export default class GaodeMap extends Base {
getDefaultCfg() {
return Util.assign(Global.scene, {
@ -34,38 +35,33 @@ export default class GaodeMap extends Base {
initMap() {
const mapStyle = this.get('mapStyle');
if (mapStyle) {
switch (mapStyle) {
case 'dark':
this.set('mapStyle', Theme.DarkTheme.mapStyle);
break;
case 'light':
this.set('mapStyle', Theme.LightTheme.mapStyle);
break;
case 'blank':
this.set('mapStyle', 'blank');
break;
default:
this.set('mapStyle', mapStyle);
}
}
// if (mapStyle) {
// switch (mapStyle) {
// case 'dark':
// this.set('mapStyle', Theme.DarkTheme.mapStyle);
// break;
// case 'light':
// this.set('mapStyle', Theme.LightTheme.mapStyle);
// break;
// case 'blank':
// this.set('mapStyle', 'blank');
// break;
// default:
// this.set('mapStyle', mapStyle);
// }
// }
this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]);
const map = this.get('map');
if (map instanceof AMap.Map) {
this.map = map;
this.container = map.getContainer();
this.get('mapStyle') && this.map.setMapStyle(this.get('mapStyle'));
if (this.get('mapStyle') === 'blank') {
map.setFeatures([]);
}
this.setMapStyle(mapStyle);
this.addOverLayer();
setTimeout(() => { this.emit('mapLoad'); }, 50);
} else {
this.map = new AMap.Map(this.container, this._attrs);
this.map.on('complete', () => {
if (this.get('mapStyle') === 'blank') {
map.setFeatures([]);
}
this.setMapStyle(mapStyle);
this.addOverLayer();
this.emit('mapLoad');
});
@ -122,6 +118,27 @@ export default class GaodeMap extends Base {
this.l7_marker_Container.className = 'l7_marker';
this.amapContainer.appendChild(this.l7_marker_Container);
}
setMapStyle(style) {
const map = this.map;
switch (style) {
case 'dark':
this.set('mapStyle', Theme.DarkTheme.mapStyle);
break;
case 'light':
this.set('mapStyle', Theme.LightTheme.mapStyle);
break;
default:
this.set('mapStyle', style);
}
map.setMapStyle(this.get('mapStyle'));
if (style === 'blank') {
map.setFeatures([]);
} else {
map.setFeatures(defaultMapFeatures);
}
return;
}
mixMap(scene) {
const map = this.map;
scene.project = GaodeMap.project;
@ -153,22 +170,7 @@ export default class GaodeMap extends Base {
return map.getBounds();
};
scene.setMapStyle = style => {
switch (style) {
case 'dark':
this.set('mapStyle', Theme.DarkTheme.mapStyle);
break;
case 'light':
this.set('mapStyle', Theme.LightTheme.mapStyle);
break;
default:
this.set('mapStyle', style);
}
map.setMapStyle(this.get('mapStyle'));
if (style === 'blank') {
map.setFeatures([]);
}
return;
return this.setMapStyle(style);
};
scene.setZoomAndCenter = (zoom, center) => {
const lnglat = new AMap.LngLat(center[0], center[1]);
@ -208,9 +210,6 @@ export default class GaodeMap extends Base {
scene.lngLatToPixel = lnglat => {
return map.lnglatToPixel(new AMap.LngLat(lnglat[0], lnglat[1]));
};
scene.setMapStyle = style => {
return map.setMapStyle(style);
};
scene.fitBounds = extent => {
return map.setBounds(
new AMap.Bounds([ extent[0], extent[1] ], [ extent[2], extent[3] ])
@ -224,5 +223,9 @@ export default class GaodeMap extends Base {
const ll = new AMap.LngLat(lnglat[0], lnglat[1]);
return map.lngLatToContainer(ll);
};
scene.lngLatToGeodeticCoord = lnglat => {
const ll = new AMap.LngLat(lnglat[0], lnglat[1]);
return map.lngLatToGeodeticCoord(ll);
};
}
}