项目中需要使用酷炫模式的底图，高德地图提供了多种样式的底图，但不是通过wmts瓦片服务的方式提供，无法通过ArcGIS JS调用，且存在较大的偏移量。通过测试，尝试调用了MapBox地图，GEQ地图服务(http://map.geoq.cn/ArcGIS/rest/services)，效果都不是很满意。

后经过检索，发现如下相关内容

1.css filter修改地图样式

https://blog.csdn.net/yue31313/article/details/91411983

该帖子提到了通过 css 图片的滤镜 filter修改地图样式，但是并无具体实现。

2.天地图官网地图样式设置

经过测试后发现，天地图无深色模式瓦片资源，其深色模式的实现通过如下两个步骤实现：

（1）设置地图背景色为黑色

（2）设置css filter

设置天地图瓦片的样式的filter为下图，并设置透明度，通过瓦片的滤镜变换，并设置透明度，透视地图div的黑色背景，实现地图的主题变换。

3.ArcGIS JS官方瓦片地图样式自定义示例

关键是通过canvas绘图的方式，修改瓦片的样式。核心代码为fetchTile函数

https://developers.arcgis.com/javascript/latest/sample-code/layers-custom-tilelayer/index.html

示例方案：

var t = BaseTileLayer.createSubclass({properties: {urlTemplate: null},// generate the tile url for a given level, row and columngetTileUrl: function(level: number, row: number, col: number) {var length = this.subDomains.length;var idx = col % length;return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", row).replace("{subDomain}", this.subDomains[idx]);},fetchTile: function(level: number,row: number,col: number,options: any) {// call getTileUrl() method to construct the URL to tiles// for a given level, row and col provided by the LayerViewvar url = this.getTileUrl(level, row, col);// request for tiles based on the generated url// the signal option ensures that obsolete requests are abortedreturn esriRequest(url, {responseType: "image",signal: options && options.signal}).then(function(response: any) {// when esri request resolves successfully// get the image from the responsevar image = response.data;var width = this.tileInfo.size[0];var height = this.tileInfo.size[0];// create a canvas with 2D rendering contextvar canvas = document.createElement("canvas");var context = canvas.getContext("2d");canvas.width = width;canvas.height = height;// Apply the tint color provided by// by the application to the canvasif (ip.useDarkMode) {// 样式在此修改 包括滤镜、背景颜色等if (ip.maptype == maptype.label) {context.fillStyle = "rgba(255, 165, 0, 0.05)";context.filter = "grayscale(50%) invert(100%) opacity(80%)";} else {context.fillStyle = "rgba(255, 250, 250, 0.0)";context.filter = "grayscale(5%) invert(100%) opacity(50%)";}context.fillRect(0, 0, width, height);// context.filter="hue-rotate(120.3deg)"}// Draw the blended image onto the canvas.context.drawImage(image, 0, 0, width, height);return canvas;}.bind(this));}});if (ip.srtype == SRtype.jwd) {switch (ip.maptype) {case maptype.vec:tp = "vec_c";break;case maptype.img:tp = "img_c";break;case maptype.label:tp = "cia_c";break;default:tp = "vec_c";break;}var lyr2 = new t({urlTemplate:"http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" +this.tdt_token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tt,spatialReference: new SpatialReference({ wkid: 4326 })});return lyr2;} else if (ip.srtype == SRtype.mercator) {switch (ip.maptype) {case maptype.vec:tp = "vec_w";break;case maptype.img:tp = "img_w";break;case maptype.label:tp = "cva_w";break;default:tp = "vec_w";break;}var layer = new t({urlTemplate:"http://{subDomain}.tianditu.gov.cn/DataServer?T=" +tp +"&x={col}&y={row}&l={level}&tk=" +this.tdt_token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tt,tint: new esriColor("#191970")});return layer;

地图div样式设置

/*深色样式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);
}

地图最终效果：

通过css滤镜，修改图片样式示例

https://blog.csdn.net/qq_35018214/article/details/103815412

地图样式修改示例

https://odoe.net/blog/quick-tip-css-filters-and-your-esri-tiles/

ArcGIS JS 天地图之深色地图地图夜间模式相关推荐

ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
夜间模式 css,网站夜间模式的实现
整体流程夜间模式开关按钮:用来手动切换夜间模式的,会存储cookie. 自动夜间模式:当cookie为空时,浏览器时间大于22点小于6点时会自动进入夜间模式,并存储cookie. 后端配合:php判 ...
ArcGIS JS API实现地图场景视频融合
ArcGIS JS API实现地图场景视频融合效果展示实现步骤 1.创建地图场景 2.引入相应模块并创建地图场景 3.获取点坐标 4.生成网格 5.生成图形并添加进场景中总结完整代码效果展示 ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
arcgis js 4.x 地图中加入图片
arcgis js 4.x版本,如何加入图片问题:如何将自定义图片放入到arcgis的图层当中? 本人在网上查找的方法中,发现大部分方法只适用于3.x版本,只有一种引入自定义BaseDynamicL ...
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定
Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便. 下面是我做的例子: <!DOCTYPE ...
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定（转）
Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便. 下面是我做的例子: <!DOCTYPE ...
ArcGIS API for Silverlight 实现修改地图上的工程点位置
ArcGIS API for Silverlight 实现修改地图上的工程点位置原文:ArcGIS API for Silverlight 实现修改地图上的工程点位置 #region 处理工程点点击 ...

ArcGIS JS 天地图之深色地图地图夜间模式

1.css filter修改地图样式

2.天地图官网地图样式设置

（1）设置地图背景色为黑色

（2）设置css filter

3.ArcGIS JS官方瓦片地图样式自定义示例

示例方案：

ArcGIS JS 天地图之深色地图地图夜间模式相关推荐

最新文章

热门文章

ArcGIS JS 天地图之深色地图 地图夜间模式

1.css filter修改地图样式

2.天地图官网地图样式设置

（1）设置地图背景色为 黑色

（2）设置css filter

3.ArcGIS JS官方瓦片地图样式自定义示例

示例方案：

ArcGIS JS 天地图之深色地图 地图夜间模式相关推荐

最新文章

热门文章

ArcGIS JS 天地图之深色地图地图夜间模式

（1）设置地图背景色为黑色

ArcGIS JS 天地图之深色地图地图夜间模式相关推荐