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;
top: 0;
border: 0;
padding: 0;
font-size: 25px;
line-height: 20px;
border-radius: 0 3px 0 0;
cursor: pointer;
background-color: transparent;

View File

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

View File

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

View File

@ -107,7 +107,7 @@ export default class GaodeMap extends Base {
this.amapContainer = this.map.getContainer().getElementsByClassName('amap-maps')[0];
this.renderDom = document.createElement('div');
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.amapContainer.appendChild(this.renderDom);
@ -130,7 +130,6 @@ export default class GaodeMap extends Base {
default:
this.set('mapStyle', style);
}
map.setMapStyle(this.get('mapStyle'));
if (style === 'blank') {
map.setLayers([]);