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

fix(style): update bug

This commit is contained in:
thinkinggis 2019-09-05 15:49:43 +08:00
parent 8d5f2d539e
commit 6c95d647a8
6 changed files with 136 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/03_choropleths_polygon.html
View File

@ -71,6 +71,10 @@ scene.on('loaded', () => {
opacity: 1 opacity: 1
}) })
.render(); .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'] const colorsEnum = ['blue','red','orange','green','purple','purple']

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
package.json
View File

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

24
src/core/layer.js
View File

@ -423,7 +423,6 @@ export default class Layer extends Base {
!Util.isEqual(preAttrs.shape, nextAttrs.shape) !Util.isEqual(preAttrs.shape, nextAttrs.shape)
) { ) {
this.repaint(); this.repaint();
this._setPreOption();
} }
if (!Util.isEqual(preStyle, nextStyle)) { if (!Util.isEqual(preStyle, nextStyle)) {
// 判断新增，修改，删除 // 判断新增，修改，删除
@ -434,6 +433,7 @@ export default class Layer extends Base {
}); });
this._updateStyle(newStyle); this._updateStyle(newStyle);
} }
this._setPreOption();
} }
_updateSize(zoom) { _updateSize(zoom) {
@ -470,7 +470,6 @@ export default class Layer extends Base {
} }
getSelectFeature(featureId, lnglat) { getSelectFeature(featureId, lnglat) {
// return {};
if (this.get('layerType') === 'tile') { if (this.get('layerType') === 'tile') {
const sourceCache = this.getSourceCache(this.get('sourceOption').id); const sourceCache = this.getSourceCache(this.get('sourceOption').id);
const feature = sourceCache.getSelectFeature(featureId, this.layerId, lnglat); const feature = sourceCache.getSelectFeature(featureId, this.layerId, lnglat);
@ -488,27 +487,6 @@ export default class Layer extends Base {
_updateFilter() { _updateFilter() {
this.get('mappingController').reMapping(); this.get('mappingController').reMapping();
} }
/**
* 用于过滤数据
* @param {*} object 更新颜色和数据过滤
*/
_updateAttributes(object) {
this.get('mappingController').update();
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);
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;
}
_visibleWithZoom() { _visibleWithZoom() {
if (this._object3D === null) return; if (this._object3D === null) return;
const zoom = this.scene.getZoom(); const zoom = this.scene.getZoom();

16
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 TextBuffer from '../../../geom/buffer/point/text';
import ColorUtil from '../../../attr/color-util'; import ColorUtil from '../../../attr/color-util';
import CollisionIndex from '../../../util/collision-index'; 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) { 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 activeOption = layer.get('activedOptions');
const { strokeWidth, strokeColor, opacity } = style; const { strokeWidth, strokeColor, opacity } = style;

9
src/map/AMap.js
View File

@ -3,6 +3,7 @@ import Global from '../global';
import * as Theme from '../theme/index'; import * as Theme from '../theme/index';
import Util from '../util'; import Util from '../util';
const DEG2RAD = Math.PI / 180; const DEG2RAD = Math.PI / 180;
const defaultMapFeatures = ['bg', 'point', 'road', 'building' ];
export default class GaodeMap extends Base { export default class GaodeMap extends Base {
getDefaultCfg() { getDefaultCfg() {
return Util.assign(Global.scene, { return Util.assign(Global.scene, {
@ -57,6 +58,8 @@ export default class GaodeMap extends Base {
this.get('mapStyle') && this.map.setMapStyle(this.get('mapStyle')); this.get('mapStyle') && this.map.setMapStyle(this.get('mapStyle'));
if (this.get('mapStyle') === 'blank') { if (this.get('mapStyle') === 'blank') {
map.setFeatures([]); map.setFeatures([]);
} else {
map.setFeatures(defaultMapFeatures);
} }
this.addOverLayer(); this.addOverLayer();
setTimeout(() => { this.emit('mapLoad'); }, 50); setTimeout(() => { this.emit('mapLoad'); }, 50);
@ -65,6 +68,8 @@ export default class GaodeMap extends Base {
this.map.on('complete', () => { this.map.on('complete', () => {
if (this.get('mapStyle') === 'blank') { if (this.get('mapStyle') === 'blank') {
this.map.setFeatures([]); this.map.setFeatures([]);
} else {
this.map.setFeatures(defaultMapFeatures);
} }
this.addOverLayer(); this.addOverLayer();
this.emit('mapLoad'); this.emit('mapLoad');
@ -224,5 +229,9 @@ export default class GaodeMap extends Base {
const ll = new AMap.LngLat(lnglat[0], lnglat[1]); const ll = new AMap.LngLat(lnglat[0], lnglat[1]);
return map.lngLatToContainer(ll); return map.lngLatToContainer(ll);
}; };
scene.lngLatToGeodeticCoord = lnglat => {
const ll = new AMap.LngLat(lnglat[0], lnglat[1]);
return map.lngLatToGeodeticCoord(ll);
};
} }
} }