arcgis 在做二维的 class-break 往往是用simplefillSymol 来做面，比较单一，除了颜色和边框，不能再设置更多的方式了
不过可以用gl-matrix 结合来做凹凸起伏的可视化。
```html
凹凸边缘效果
html,
body,
#viewDiv {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#controlsDiv {
padding: 1em;
width: 500px;
}
#legendDiv {
padding: 2em;
}
#sliderDiv {
margin-top: 30px;
}
#explanation div {
display: none;
}
#explanation div a:visited {
color: #ccc;
}
#explanation div a:hover {
color: #fff;
}
#explanation div a:visited {
color: #ccc;
}
#explanation div.active {
display: block;
animation-duration: 1.5s;
animation-name: fadeIn;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#legendGradient {
margin-top: 3em;
margin-left: auto;
margin-right: auto;
font: 12px sans-serif;
color: rgb(105, 220, 255);
border: 1px solid rgb(105, 220, 255);
width: 80px;
height: 150px;
background-image: linear-gradient(#f88, #888);
text-align: center;
border-radius: 2px;
}
#legendMax {
margin: 0.5em;
border: 1px solid rgb(105, 220, 255);
border-radius: 2px;
background-color: rgb(36, 36, 36);
position: relative;
top: -14px;
}
#legendMin {
margin: 0.5em;
border: 1px solid rgb(105, 220, 255);
border-radius: 2px;
background-color: rgb(36, 36, 36);
position: relative;
top: 112px;
}
precision highp float;
uniform mat3 u_transform;
uniform mat3 u_display;
attribute vec2 a_position;
attribute vec4 a_color;
varying vec4 v_color;
void main() {
gl_Position.xy = (u_display * (u_transform * vec3(a_position, 1.0))).xy;
gl_Position.zw = vec2(0.0, 1.0);
v_color = a_color;
}
precision highp float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
更多消息参考小专栏https://xiaozhuanlan.com/topic/7965108234
网友评论