arcgis for js 的阴影立体效果
最编程
2024-10-02 19:12:48
...
<!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>
推荐阅读
-
arcgis for js 的阴影立体效果
-
【Three.js】知识梳理六：深入理解Three.js中的光源、光照和阴影投影
-
JS代码混淆加密工具的实际效果是否能够有效加密JS代码？
-
用CSS3的text-shadow属性轻松打造文字阴影效果
-
深入理解 CSS 中的文本阴影效果
-
玩转CSS text-shadow: 实现文字阴影效果的几种炫酷样式及代码示例
-
改进用户体验：告别原生拖拽，纯JS打造丝滑流畅的拖拽效果
-
用 HTML、CSS 和 JS 创造浪漫的 3D 飘浮粒子动画效果
-
使用Turn.js 实现翻页效果的实例分析
-
用React、DataV、Three.js和Blender打造炫酷的3D大屏展示效果