feat(text): text add textAllowOverlap propertry

新增文本避让开关方法
style({
 textAllowOverlap: true
})
This commit is contained in:
thinkinggis 2019-10-08 10:32:59 +08:00
parent caca3eaca0
commit 1ffc84e5d7
4 changed files with 20 additions and 12 deletions

View File

@ -108,6 +108,9 @@
right: 0; right: 0;
top: 0; top: 0;
border: 0; border: 0;
padding: 0;
font-size: 25px;
line-height: 20px;
border-radius: 0 3px 0 0; border-radius: 0 3px 0 0;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;

View File

@ -43,7 +43,8 @@ function drawGlyph(
spacing = 2, spacing = 2,
textAnchor = 'center', textAnchor = 'center',
textOffset = [ 0, 0 ], textOffset = [ 0, 0 ],
padding = [ 4, 4 ] padding = [ 4, 4 ],
textAllowOverlap
}, },
fontAtlasManager, fontAtlasManager,
collisionIndex, collisionIndex,
@ -87,7 +88,7 @@ function drawGlyph(
}, mvpMatrix); }, mvpMatrix);
// 无碰撞则加入空间索引 // 无碰撞则加入空间索引
if (box && box.length) { if (textAllowOverlap || box && box.length) {
// TODOfeatureIndex // TODOfeatureIndex
collisionIndex.insertCollisionBox(box, 0); collisionIndex.insertCollisionBox(box, 0);

View File

@ -10,7 +10,8 @@ const defaultTextStyle = {
padding: [ 4, 4 ], padding: [ 4, 4 ],
stroke: 'white', stroke: 'white',
strokeWidth: 2, strokeWidth: 2,
strokeOpacity: 1.0 strokeOpacity: 1.0,
textAllowOverlap: false
}; };
export default function DrawText(layerData, layer) { export default function DrawText(layerData, layer) {
const style = { const style = {
@ -19,16 +20,19 @@ export default function DrawText(layerData, layer) {
}; };
layer.set('styleOptions', style); layer.set('styleOptions', style);
const activeOption = layer.get('activedOptions'); const activeOption = layer.get('activedOptions');
const { strokeWidth, stroke, opacity } = style; const { strokeWidth, stroke, opacity, textAllowOverlap } = style;
const { width, height } = layer.scene.getSize(); const { width, height } = layer.scene.getSize();
const { geometry, texture, fontAtlas } = _updateGeometry(layerData, layer); const { geometry, texture, fontAtlas } = _updateGeometry(layerData, layer);
layer.scene.on('camerachange', () => { const updateGeometryHander = () => {
const { geometry } = _updateGeometry(layerData, layer); const { geometry } = _updateGeometry(layerData, layer);
layer.layerMesh.geometry = geometry; layer.layerMesh.geometry = geometry;
layer.layerMesh.geometry.needsUpdate = true; layer.layerMesh.geometry.needsUpdate = true;
}); };
if (!textAllowOverlap) {
layer.scene.on('camerachange', updateGeometryHander);
} else {
layer.scene.off('camerachange', updateGeometryHander);
}
const material = new TextMaterial({ const material = new TextMaterial({
name: layer.layerId, name: layer.layerId,
u_sdf_map: texture, u_sdf_map: texture,
@ -56,7 +60,7 @@ export default function DrawText(layerData, layer) {
function _updateGeometry(layerData, layer) { function _updateGeometry(layerData, layer) {
const style = layer.get('styleOptions'); const style = layer.get('styleOptions');
const { const {
fontFamily, fontWeight, spacing, textAnchor, textOffset, padding } = style; fontFamily, fontWeight, spacing, textAnchor, textOffset, padding, textAllowOverlap } = style;
const { width, height } = layer.scene.getSize(); const { width, height } = layer.scene.getSize();
const collisionIndex = new CollisionIndex(width, height); const collisionIndex = new CollisionIndex(width, height);
const { _camera: { projectionMatrix, matrixWorldInverse } } = layer.scene._engine; const { _camera: { projectionMatrix, matrixWorldInverse } } = layer.scene._engine;
@ -85,7 +89,8 @@ function _updateGeometry(layerData, layer) {
spacing, spacing,
textAnchor, textAnchor,
textOffset, textOffset,
padding padding,
textAllowOverlap
}, },
layer.scene.fontAtlasManager, layer.scene.fontAtlasManager,
collisionIndex, collisionIndex,

View File

@ -107,7 +107,7 @@ export default class GaodeMap extends Base {
this.amapContainer = this.map.getContainer().getElementsByClassName('amap-maps')[0]; this.amapContainer = this.map.getContainer().getElementsByClassName('amap-maps')[0];
this.renderDom = document.createElement('div'); this.renderDom = document.createElement('div');
this.renderDom.style.cssText += this.renderDom.style.cssText +=
'position: absolute;top: 0;height: 100%;width: 100%;pointer-events: none;background: white;'; 'position: absolute;top: 0;height: 100%;width: 100%;pointer-events: none;';
this.renderDom.id = 'l7_canvaslayer'; this.renderDom.id = 'l7_canvaslayer';
this.amapContainer.appendChild(this.renderDom); this.amapContainer.appendChild(this.renderDom);
@ -130,7 +130,6 @@ export default class GaodeMap extends Base {
default: default:
this.set('mapStyle', style); this.set('mapStyle', style);
} }
map.setMapStyle(this.get('mapStyle')); map.setMapStyle(this.get('mapStyle'));
if (style === 'blank') { if (style === 'blank') {
map.setLayers([]); map.setLayers([]);