arcgis for js实现阴影立体效果
效果
实现
主要通过effect属性实现
代码: (这里以GeoJSON图层为例, 代码复制即可用)
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yang的案例</title>
<style>
body {
margin: 0;
}
#mapview {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
</head>
<body>
<div id="mapview"></div>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/Basemap',
'esri/layers/WebTileLayer',
'esri/layers/GroupLayer',
'esri/layers/GeoJSONLayer',
'esri/layers/VectorTileLayer'
], function (Map, MapView, Basemap, WebTileLayer, GroupLayer, GeoJSONLayer) {
// 初始化底图
window.map = new Map({
basemap: 'hybrid'
})
// 创建2维视图
let view = new MapView({
container: 'mapview',
map: map,
zoom: 13, // 初始化级别
center: [103.97992123657217, 30.680738016500914] // 初始化中心点坐标
})
view.when(() => {
// 去除原本底图
map.basemap = null
// 使用geojson实现
const boundaryLineLayer = new GeoJSONLayer({
url: 'https://geo.datav.aliyun.com/areas_v3/bound/510105.json',
effect: 'drop-shadow(0, 8px, 3px, rgba(0,0,0,1))',
// effect: 'brightness(150%) drop-shadow(20px, 20px, 10px, #000)',
outFields: ['*'],
renderer: {
type: 'simple',
symbol: {
type: 'simple-line',
color: '#000',
width: 1
}
}
})
map.add(boundaryLineLayer)
})
})
</script>
</body>
</html>
effect值说明
| 关键字 | 说明 | 示例 |
|---|---|---|
| brightness | 亮度 | 1.5 |
| drop-shadow | 阴影 | 50px, 40px, 20px, #000 |
| blur | 滤镜/模糊度 | 4px |
| grayscale | 灰度 | 2 |
| hue-rotate | 色调翻转 | 120deg |
| contrast | 对比度 | 200% |
| bloom | ? | |
| invert | ? | |
| opacity | 透明度 | 50% |
| saturate | 饱和度 | 150% |
| sepia | ? | 50% |
其他arcgis js效果实例
其他效果后续有时间了再更新
-
天地图只显示部分区域，其余为透明遮罩
-
天地图区域高亮
-
立体效果
-
层叠立体效果
-
旋转底座 （css实现， 先记录在这儿， 后续更新）
原文地址：https://blog.csdn.net/qq_33982898/article/details/142536238
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！