mirror of https://gitee.com/antv-l7/antv-l7
feat(text): text add textAllowOverlap propertry
新增文本避让开关方法 style({ textAllowOverlap: true })
This commit is contained in:
parent
caca3eaca0
commit
1ffc84e5d7
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
// TODO:featureIndex
|
// TODO:featureIndex
|
||||||
collisionIndex.insertCollisionBox(box, 0);
|
collisionIndex.insertCollisionBox(box, 0);
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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([]);
|
||||||
|
|
Loading…
Reference in New Issue