深色系天地图
通过截取请求后的image，修改image样式实现
实现效果
不足之处
arcgis绘制上去的图形、聚合图层、图标都被遮罩住，黑蒙蒙的，目前还在寻找解决办法。
示例代码
esriLoader
.loadModules([
'esri/Map',
'esri/views/MapView',
'esri/Color',
'esri/layers/BaseTileLayer',
'esri/request'
])
.then(
([
Map,
MapView,
Color,
BaseTileLayer,
esriRequest
]) => {
const TintLayer = BaseTileLayer.createSubclass({
isFulfilled: () => {
return false
},
properties: {
urlTemplate: null,
tint: {
value: null,
type: Color
}
},
getTileUrl: function (level, row, col) {
let length = this.subDomains.length
let idx = col % length
return this.urlTemplate //请求url模板
.replace('{level}', level)
.replace('{col}', col)
.replace('{row}', row)
.replace('{subDomain}', this.subDomains[idx])
},
fetchTile: function (level, row, col, options) {
const url = this.getTileUrl(level, row, col)
return esriRequest(url, {
responseType: 'image',
signal: options && options.signal
}).then(
function (response) {
const image = response.data
const width = this.tileInfo.size[0]
const height = this.tileInfo.size[0]
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
canvas.width = width
canvas.height = height
//在此修改image样式
// if (this.tint) {//通过tint转换css修改样式
// context.fillStyle = this.tint.toCss()
if (this.darkType === 'brown') {//自定义darkType属性
//叠加样式
context.fillStyle = 'rgba(255, 250, 250, 0.0)'
context.filter = 'grayscale(5%) invert(100%) opacity(50%)'
} else if (this.darkType === 'black') {
context.fillStyle = 'rgba(255, 165, 0, 0.05)'
context.filter = 'grayscale(50%) invert(100%) opacity(80%)'
}
context.fillRect(0, 0, width, height)
context.globalCompositeOperation = 'difference'
// }
context.drawImage(image, 0, 0, width, height)
return canvas
}.bind(this)//this为fetchTile到的TintLayer，截取到的TintLayer图层
)
}
})
const tdtMapVecTint = new TintLayer({
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=' + this.tdtkey,
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6'],
tileInfo: this.tileInfoWeb,
// tint: new Color('#000000'),
title: '矢量底图',
darkType: 'black'//自定义darkType属性
})
const tdtMapVecAnoTint = new TintLayer({
urlTemplate: 'http://{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=' + this.tdtkey,
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6'],
tileInfo: this.tileInfoWeb,
// tint: new Color('#000000'),
title: '矢量注记',
darkType: 'brown',
blendMode: 'multiply'
})
const tdtMapImgBioTint = new TintLayer({
urlTemplate: 'http://{subDomain}.tianditu.gov.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=' + this.tdtkey,
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6'],
tileInfo: this.tileInfoWeb,
// tint: new Color('#000000'),
title: '全球境界',
darkType: 'brown',
blendMode: 'multiply'
})
this.map = new Map({
layers: [tdtMapVecTint, tdtMapVecAnoTint, tdtMapImgBioTint]
})
this.mapView = new MapView({
container: this.$refs.mapView,
map: this.map,
center: [104.06, 30.67],
zoom: 2
})
}
)
.catch(err => {
console.error(err)
})
/*深色样式div背景色*/
.darkMode {
background-color: rgba(43, 51, 73, 0.82);
background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
}
参考文章
arcgis api for js 4.x 加载高德地图、谷歌地图、天地图_zhengjie0722的博客-CSDN博客
ArcGIS JS 天地图之深色地图 地图夜间模式u012839776的博客-CSDN博客天地图 深色
官方文档
Custom TileLayer | Sample Code | ArcGIS API for JavaScript 4.22 | ArcGIS Developer
BaseTileLayer | API Reference | ArcGIS API for JavaScript 4.22 | ArcGIS Developer
