GeoDaoyu

Promise是一个异步编程的解决方案。

之前的方案是回调函数的方式。优点是指定回调函数的位置更灵活，和解决了回调地狱问题。

规范是Promise A+。

下面手写实现一遍Promise便于理解。

对象属性的增删改查

背景

接口返回的是geojson格式，但是使用GeojsonLayer加载的时候，高亮的坐标有问题。排查发现，是接口返回的坐标全是string类型。

所以要写一个方法，把string类型的坐标转换为double类型，其他的数据保持不变。

背景

前段时间发现了ramda这个函数式的JavaScript的库。一直没机会用。今天遇到个需求，刚好可以使用上。

要求是把后台接口返回的数据格式转化成与echart对接的数据格式，如图：

UI设计了一个空心矩形样式，所以这边找了段CSS代码来实现：

1
2
3
4
5
6
7

div {
  width: 80px;
  height: 80px;
  background-color: red;
  background-clip: content-box;
  border: 40px solid orange;
}

参数说明：

• background-color—控制圆心颜色.
• background-clip—规定背景的绘制区域.
• border— 控制外环大小和颜色.

遇到个问题，二维样式在三维下，显示异常：显示不全，样式随地图拖拽会闪烁、变化。如下图：

有时候加个border-left，可以有分割的效果。

但是直接设置，高度顶满之后，感觉不好看。

1
2
3

.navbar-right .navbar-temperature {
  border-left: 1px solid #FFF;
}

UI设计了一个空心圆样式，所以这边找了段CSS代码来实现：

1
2
3
4
5
6
7

div {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  border: 20px solid orange;
}

参数说明：

• background-color—控制圆心颜色.

• border-radius— 控制圆角.

• border— 控制圆环大小和颜色.

UI上，有时候加上半透明，会比较好看。

下面列两种常用的设置半透明。

设置div或者图片的半透明，可以使用下面的设置。

1

filter: alpha(Opacity=60);-moz-opacity: 0.6;opacity: 0.6;

在设置输入框的时候，发现上面的写法不太适合。推荐下面的写法。

1
2
3

background:transparent;
background-color: rgba(255,255,255,0.25);
color: #fff;

有时，文字很长，从展示的地方溢出，导致UI上看着很乱。

这时候，通过CSS控制文字的宽度，把溢出的文字处理为缩略号，保证了UI上的美观。

下面列两种CSS处理文字溢出的方式，分别针对单行文字和多行文字。

单行文字

1
2
3

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;