arcgis 做凹凸起伏的分类图

最新推荐文章于 2022-08-16 14:08:02 发布

haibalai2009

最新推荐文章于 2022-08-16 14:08:02 发布

阅读量4.2k

点赞数

文章标签： arcgis

本文链接：https://blog.csdn.net/haibalai2009/article/details/122608450

版权

arcgis 在做二维的 class-break 往往是用simplefillSymol 来做面，比较单一，除了颜色和边框，不能再设置更多的方式了
不过可以用gl-matrix 结合来做凹凸起伏的可视化。

<!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

haibalai2009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcgis 做凹凸起伏的分类图

arcgis 在做二维的 class-break 往往是用simplefillSymol 来做面，比较单一，除了颜色和边框，不能再设置更多的方式了不过可以用gl-matrix 结合来做凹凸起伏的可视化。<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scala
复制链接

扫一扫