arcgis js（六）设置不透明度

1、在上一章节我们已经能够自由切换天地图底图了，这一节继续接着上节的代码往里面添加新功能，我们知道，在地图学中地图是可以不断叠加的，即使像天地图这么庞大的地图显示也是由不同的图层叠加现实的，当然它用的是瓦片形式，比如影像地图上面叠加影像注记，就得到了我们看到的这种形式，包括在上面进行的点、线、面等绘图功能，都是一层一层的图层，既然是图层就会发生覆盖，我们经常会对比上面和下面的图层，一种方式是采用swipe卷帘工具，但是它不能看到叠加的情况，一般我们都是设置最上面一层的图层的不透明度来实现上下层的对比。

2、在英文中opacity是不透明度的意思，在arcgis js中opacity的取值范围是[0,1]，0代表完全透明，1代表完全不透明。

3、在地图上加载其他图层的方式也比较简单，这里采用url的形式，我是在arcgis server上发布数据，可以发布在本地，也可以是服务器上的，没有服务器的小伙伴用本机的arcgis发布一个本地服务即可。如何安装arcgis server、如何发布arcgis服务请在网上查找资料，实在搞不定的可以留言给我。需要注意的是发布的服务图层和底图应在同一个坐标系。

4、假设提取了某地的图斑信息，发布为arcgis服务，用esri/widgets/LayerList将需要做的操作放置到列表当中，这里的功能主要有"全局显示"、"图层信息"、"增加不透明度"、"减少不透明度"，具体代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>ArcGIS API for JavaScript</title><link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.20/"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script>require(["esri/config","esri/Map","esri/views/MapView","esri/layers/FeatureLayer","esri/layers/WebTileLayer","esri/layers/MapImageLayer","esri/widgets/LayerList","esri/widgets/BasemapLayerList","esri/widgets/Expand","esri/geometry/SpatialReference","esri/geometry/Point","esri/layers/support/TileInfo",],function (esriConfig, Map, MapView, FeatureLayer, WebTileLayer, MapImageLayer,LayerList, BasemapLayerList, Expand,SpatialReference, Point, TileInfo) {var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址var token = ""; //天地图token，在官网申请var tileInfo = new TileInfo({"rows": 256,"cols": 256,"origin": {"x": -180,"y": 90},"spatialReference": {"wkid": 4490},"lods": [{ "level": "1", "scale": 295829355.45, "resolution": 0.703125 },{ "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },{ "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },{ "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },{ "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },{ "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },{ "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },{ "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },{ "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },{ "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },{ "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },{ "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },{ "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },{ "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },{ "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },{ "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },{ "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },{ "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },{ "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }]});//影像地图var tdtImageLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图影像地图",visible: true});//影像注记var tdtAnnoImageLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图影像注记",visible: true});//矢量地图var tdtVecLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图矢量地图",visible: false});//矢量注记var tdtAnnoVecLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图矢量注记",visible: false});const map = new Map({basemap: {baseLayers: [tdtImageLayer, tdtAnnoImageLayer, tdtVecLayer, tdtAnnoVecLayer]}});//定位到济南市中心var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));const view = new MapView({map: map,center: cityCenter,zoom: 13,container: "viewDiv",ui: {components: ["zoom", "compass"]},});let basemapLayerList = new BasemapLayerList({view: view,});var layerListExpand = new Expand({expandIconClass: "esri-icon-layer-list",view: view,content: basemapLayerList});view.ui.add(layerListExpand, "top-right");const featureLayer = new FeatureLayer({url: "http://localhost:6080/arcgis/rest/services/XC/xcgengdibianhua/MapServer",title: "变化图斑"});map.add(featureLayer);function defineActions(event) {var item = event.item;if (item.title === "变化图斑") {item.actionsSections = [[{title: "全局显示",className: "esri-icon-zoom-out-fixed",id: "full-extent"},{title: "图层信息",className: "esri-icon-description",id: "information"}],[{title: "减少透明度",className: "esri-icon-up",id: "increase-opacity"},{title: "增加透明度",className: "esri-icon-down",id: "decrease-opacity"}]];}}view.when(function () {var layerList = new LayerList({view: view,listItemCreatedFunction: defineActions});layerList.on("trigger-action", function (event) {var visibleLayer = featureLayer;var id = event.action.id;if (id === "full-extent") {view.goTo(visibleLayer.fullExtent).catch(function (error) {if (error.name != "AbortError") {console.error(error);alert(error);}});} else if (id === "information") {window.open(visibleLayer.url);} else if (id === "increase-opacity") {if (visibleLayer.opacity < 1) {visibleLayer.opacity += 0.2;}} else if (id === "decrease-opacity") {if (visibleLayer.opacity > 0) {visibleLayer.opacity -= 0.2;}}});view.ui.add(layerList, "top-right");});});</script></head><body><div id="viewDiv"></div></body></html>

5、代码说明：首先用FeatureLayer实例化一个对象用来加载服务数据，将url和title作为参数放到构造函数中，定义layerList传入列表对象，列表对象用一个列表对象函数defineActions创建，在该函数里面定义item，每个item都有三个属性：title、className、id，title负责显示在web端，id用于判断点击的是哪个item，这些事件会在"trigger-action"中触发，来执行具体的操作，效果如下：

arcgis js（六）设置不透明度相关推荐

ArcGIS JS API实现地图场景视频融合
ArcGIS JS API实现地图场景视频融合效果展示实现步骤 1.创建地图场景 2.引入相应模块并创建地图场景 3.获取点坐标 4.生成网格 5.生成图形并添加进场景中总结完整代码效果展示 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
文章目录需求背景需求分析开发过程效果图注意事项参考链接在线示例需求背景有一个二维数组,里面包含几万个表示高度的值,现在要把这些高度值在地图上展示出来.可以通过小立方体的方式展现,长宽 ...
ArcGIS JS API加载GeoServer发布的WFS服务
文章目录前言主要代码总结参考链接前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
arcgis js 4.x 地图中加入图片
arcgis js 4.x版本,如何加入图片问题:如何将自定义图片放入到arcgis的图层当中? 本人在网上查找的方法中,发现大部分方法只适用于3.x版本,只有一种引入自定义BaseDynamicL ...
基于ArcGIS JS API实现的两种距离和面积测量方式
文章目录前言开发思路主要代码效果测试效果图测试页面开发总结参考链接前言在一些地图地图应用中,距离.面积测量属于基础功能.ArcGIS API for JavaScript有单独提供 ...
（一）ArcGIS JS 发布动态地图服务
前言在 WebGIS开发的过程中,地图服务的发布和获取是项目的第一步,也是进行WebGIS开发的基础.我们需要发布自己的数据服务,在本篇博客中主要说明一下如何利用ArcGIS Server发布自己的 ...
ArcGIS JS 天地图之深色地图地图夜间模式
项目中需要使用酷炫模式的底图,高德地图提供了多种样式的底图,但不是通过wmts瓦片服务的方式提供,无法通过ArcGIS JS调用,且存在较大的偏移量.通过测试,尝试调用了MapBox地图,GEQ地图服 ...
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制,因为这些图表绘制其实是跟地理坐标无关的,只需要设置图表的位置即可,所以仅仅用了纯前端的方式去实现.这 ...

arcgis js（六）设置不透明度

arcgis js（六）设置不透明度相关推荐

最新文章

热门文章