diff --git a/demos/legend.html b/demos/legend.html
new file mode 100644
index 0000000000..4813267f76
--- /dev/null
+++ b/demos/legend.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+ 自定义图例组件
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/line_bug.html b/demos/line_bug.html
index 4a7079c527..df954f0034 100644
--- a/demos/line_bug.html
+++ b/demos/line_bug.html
@@ -7,55 +7,127 @@
city demo
+
+
-
-
- 时间: 6时
-
diff --git a/src/component/control/index.js b/src/component/control/index.js
index 841c4f9117..58dc150f8e 100644
--- a/src/component/control/index.js
+++ b/src/component/control/index.js
@@ -1,11 +1,11 @@
-import Control from './base';
+import Base from './base';
import Zoom from './zoom';
import Scale from './Scale';
import Attribution from './attribution';
import Layers from './layer';
export {
- Control,
+ Base,
Zoom,
Scale,
Attribution,
diff --git a/src/core/controller/mapping.js b/src/core/controller/mapping.js
index e12d7df0e1..7b0d4e6495 100644
--- a/src/core/controller/mapping.js
+++ b/src/core/controller/mapping.js
@@ -2,6 +2,7 @@ import Util from '../../util';
import Global from '../../global';
import ScaleController from './scale';
import Attr from '../../attr/index';
+import ColorUtil from '../../attr/color-util';
export default class Mapping {
/** 初始化mapping
* 初始化mapping
@@ -182,4 +183,31 @@ export default class Mapping {
}
return [ field ];
}
+ /**
+ * 获取图例配置项
+ * @param {*} field 字段
+ * @param {*} type 图例类型 color, size
+ * @return {*} 图例配置项
+ */
+ getLegendCfg(field, type = 'color') {
+ // todo heatmap
+ if (this.layer.type === 'heatmap' && this.layer.shapeType === 'heatmap') {
+ return this.get('styleOptions').rampColors;
+ }
+ const scales = this.layer.get('scales');
+ const scale = scales[field];
+ const colorAttrs = this.layer.get('attrs')[type];
+ const lengendCfg = {};
+ if (scale) {
+ const ticks = scale.ticks;
+ lengendCfg.value = ticks;
+ lengendCfg.type = scale.type;
+ const values = ticks.map(value => {
+ const v = this._getAttrValues(colorAttrs, { [field]: value });
+ return type === 'color' ? ColorUtil.colorArray2RGBA(v) : v;
+ });
+ lengendCfg[type] = values;
+ }
+ return lengendCfg;
+ }
}
diff --git a/src/core/layer.js b/src/core/layer.js
index 027812e241..e76c2434a9 100644
--- a/src/core/layer.js
+++ b/src/core/layer.js
@@ -4,10 +4,10 @@
*/
import Base from './base';
import * as THREE from './three';
-import ColorUtil from '../attr/color-util';
import Controller from './controller/index';
import source from './source';
import diff from '../util/diff';
+import ColorUtil from '../attr/color-util';
import { updateObjecteUniform } from '../util/object3d-util';
import Util from '../util';
import Global from '../global';
@@ -666,25 +666,8 @@ export default class Layer extends Base {
* @return {*} 图例配置项
*/
getLegendCfg(field, type = 'color') {
- // todo heatmap
- if (this.type === 'heatmap' && this.shapeType === 'heatmap') {
- return this.get('styleOptions').rampColors;
- }
- const scales = this.get('scales');
- const scale = scales[field];
- const colorAttrs = this.get('attrs')[type];
- const lengendCfg = {};
- if (scale) {
- const ticks = scale.ticks;
- lengendCfg.value = ticks;
- lengendCfg.type = scale.type;
- const values = ticks.map(value => {
- const v = this._getAttrValues(colorAttrs, { [field]: value });
- return type === 'color' ? ColorUtil.colorArray2RGBA(v) : v;
- });
- lengendCfg[type] = values;
- }
- return lengendCfg;
+ const mapCtr = this.get('mappingController');
+ return mapCtr.getLegendCfg(field, type);
}
preRender() {
diff --git a/src/geom/material/lineMaterial.js b/src/geom/material/lineMaterial.js
index 47ab63fd7c..e0334a1845 100644
--- a/src/geom/material/lineMaterial.js
+++ b/src/geom/material/lineMaterial.js
@@ -38,7 +38,8 @@ export function ArcLineMaterial(options) {
vertexShader: vs,
fragmentShader: fs,
transparent: true,
- blending: THREE.AdditiveBlending
+ blending: THREE.AdditiveBlending,
+ side: THREE.DoubleSide
});
return material;
}
diff --git a/src/layer/render/line/drawArc.js b/src/layer/render/line/drawArc.js
index dd70ae5920..2ffb89d290 100644
--- a/src/layer/render/line/drawArc.js
+++ b/src/layer/render/line/drawArc.js
@@ -30,5 +30,6 @@ export default function DrawArcLine(layerData, layer, buffer) {
SHAPE: false
});
const arcMesh = new THREE.Mesh(geometry, lineMaterial);
+ arcMesh.frustumCulled = false;
return arcMesh;
}
diff --git a/src/source/parser/json.js b/src/source/parser/json.js
index d24d324aa1..cbc39b6e31 100644
--- a/src/source/parser/json.js
+++ b/src/source/parser/json.js
@@ -3,15 +3,23 @@ export default function json(data, cfg) {
const { x, y, x1, y1, coordinates } = cfg;
const resultdata = [];
- data.forEach((col, featureIndex) => {
+
+ data.slice(0).forEach((col, featureIndex) => {
let coords = [];
if (x && y) { coords = [ col[x], col[y] ]; } // 点数据
if (x1 && y1) { // 弧线 或者线段
coords = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
}
if (coordinates) {
+ let type = 'Polygon';
+ if (!Array.isArray(coordinates[0])) {
+ type = 'Point';
+ }
+ if (Array.isArray(coordinates[0]) && !Array.isArray(coordinates[0][0])) {
+ type = 'LineString';
+ }
const geometry = {
- type: 'Polygon',
+ type,
coordinates: [ ...col[coordinates] ]
};
rewind(geometry, true);