arcgis 做凹凸起伏的分类图
arcgis 在做二维的 class-break 往往是用simplefillSymol 来做面,比较单一,除了颜色和边框,不能再设置更多的方式了
不过可以用gl-matrix 结合来做凹凸起伏的可视化。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>凹凸边缘效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>
<style type="text/css" media="screen">
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;
}
</style>
<script id="features-vs" type="x-shader/x-vertex">
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;
}
</script>
<script id="features-fs" type="x-shader/x-fragment">
precision highp float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
</script>
更多消息参考小专栏https://xiaozhuanlan.com/topic/7965108234