ArcGIS for js 图层灰度值grayscale

一、定义所需对象

import {onMounted, ref} from 'vue';
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js";


const isEffect = ref(false);

// 封装map,mapView，zoom
let ToolsConfig = {
    map:Map,
    view:MapView,
    baseLayer:[]
};

// 图层集合
onMounted(()=>{
    initMap();

    ToolsConfig.baseLayer.push(dzLayer,dzbzLayer);
   
})

二、图层

// 地图
const dzLayer = new WebTileLayer({
	urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
	subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});


// 标注
const dzbzLayer = new WebTileLayer({
	urlTemplate: "https://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
	subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});


ToolsConfig.map = new Map({
    basemap:{
        baseLayers:[dzLayer,ToolsConfig.featureLayer],
		referenceLayers:[dzbzLayer]
    }
});


const map = new Map({
    basemap:{
        baseLayers:[dzLayer],
		referenceLayers:[dzbzLayer]
    }
});


ToolsConfig.view = new MapView({
    // 长春坐标系
    center:[125.331345,43.8328],
    // 初始层级
    zoom:10,
    //container:"mapView",
    map:ToolsConfig.map,
    constraints: {
        minZoom: 10,// 最小层级
        maxZoom: 19 // 最大层级
    }
});

//清除放大缩小按钮
ToolsConfig.view.ui.remove('zoom')
// 清除底部powered by ESRI
ToolsConfig.view.ui.remove("attribution");

const initMap = function(){
    ToolsConfig.view.container = "mapView";
     // 下面的方法也可以
    //ToolsConfig.view.container = myMapView.value.id;
    
   
};

三、使用

       if(!isEffect.value){
            for (let item in ToolsConfig.baseLayer) {
                let layer =  ToolsConfig.baseLayer[item];  
                layer.effect = "grayscale(80%)";// 置灰
            }
            isEffect.value = !isEffect.value;
        }else{
            for (let item in ToolsConfig.baseLayer) {
            let layer =  ToolsConfig.baseLayer[item];  
            layer.effect = "grayscale(0%)";// 恢复
            }
            isEffect.value = !isEffect.value;
        }