feat(text): text add textAllowOverlap propertry

新增文本避让开关方法 style({ textAllowOverlap: true })
antvis · Oct 8, 2019 · 4dcc177 · 4dcc177
1 parent 09ebe29
commit 4dcc177
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/src/component/css/l7.css b/src/component/css/l7.css
@@ -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;

diff --git a/src/geom/buffer/point/text.js b/src/geom/buffer/point/text.js
@@ -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) {
         // TODO：featureIndex
         collisionIndex.insertCollisionBox(box, 0);
 

diff --git a/src/layer/render/text/drawText.js b/src/layer/render/text/drawText.js
@@ -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,

diff --git a/src/map/AMap.js b/src/map/AMap.js
@@ -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([]);