天地图电子地图矢量地图底图联合图像学实现风格底图地图 ...

   一、基础概念     

        天地图（TianDiTu），全称为“国家地理信息公共服务平台”，是中国国家测绘地理信息局主导建设的国家级地理信息服务平台。它提供了一系列的地图服务和地理信息数据，包括基础地理信息、专题地理信息、地理编码、地名地址查询、三维地图浏览等功能。天地图的目标是为当局决策、社会管理和公众生活提供权威、统一、标准的地理信息服务。
天地图的特点包括：
1. 权威性：数据来源于国家测绘地理信息局，确保了数据的权威性和准确性。
2. 全面性：提供全国范围的基础地理信息和专题地理信息。
3. 开放性：提供Web API和SDK，便于第三方开发人员集成地理信息服务。
4. 互动性：用户可以举行地名搜刮、门路规划、三维浏览等交互式操作。
5. 安全性：依照国家书息安全等级掩护要求，保障数据安全。
天地图的服务主要包括：
•电子地图服务：提供矢量地图、影像地图、地形图等多种地图样式。
•地名地址服务：支持地名地址查询、地名地址编码等。
•三维地图服务：提供三维地图浏览，加强空间感知。
•专题地图服务：如人口分布、天气、交通等专题地图。
•定制化服务：根据用户需求提供定制化的地理信息服务。
天地图广泛应用于国土规划、情况掩护、应急救济、交通管理、旅游服务等多个领域，为用户提供便捷、准确的地理信息服务。假如您必要使用天地图的服务，可以访问其官方网站注册账号，并按照指引使用相关功能。
        图像学（Iconology）是艺术史研究的一个分支，专注于探索图像的含义、符号和象征，以及它们在汗青和文化中的作用。图像学不仅仅关注艺术作品的表面形式，而是深入发掘图像背后的深层含义，明白图像如何反映并影响社会、文化和哲学观念。这一学科的发展可以追溯到19世纪末期，但真正被体系化是在20世纪，主要得益于像恩斯特·贡布里希（Ernst Gombrich）、阿洛伊斯·李格尔（Alois Riegl）、埃里希·帕诺夫斯基（E.H. Panofsky）和阿比·瓦尔堡（Aby Warburg）如许的学者的工作。
图像学的三个层次分析，最初由帕诺夫斯基提出，包括：
1. 前图像志描述（Pre-iconographic Description）：这一阶段涉及对艺术作品的直接观察和描述，记录作品中的全部元素和细节，不涉及任何解释。
2. 图像志分析（Iconographic Analysis）：在此阶段，研究者辨认并解释图像中的符号和传统主题，好比神话、圣经故事或汗青变乱，这要求对文化、汗青和宗教背景有深刻的明白。
3. 图像学解释（Iconological Interpretation）：这是最深层次的分析，旨在揭示作品的内涵意义或象征代价，探讨作品如何反映特定时代的头脑、信仰和社会状况。
图像学的应用不仅限于绘画，还扩展到雕塑、建筑、摄影和其他视觉艺术形式，甚至可以用于分析非艺术领域的图像，如商标、广告和政治宣传。
图像学与图像志（Iconography）的区别在于，图像志主要关注图像的分类和辨认，而图像学则深入探讨图像的意义和影响。图像学研究者通常会联合汗青文献、哲学理论、社会学和心理学来全面明白图像的多维度含义。
本次应用主要是“图像学公式”在gis风格底图的实践应用，假如是在图像处理或计算机视觉的上下文中，可能是指用于分析、修改或天生图像的各种算法和数学表达式。在这些领域，有许多公式用于不同的目标，比方：
1. 图像加强：
•亮度调整：

•对比度调整：对比度通常通过拉伸或压缩图像的动态范围来实现，这可能涉及到直方图均衡化或对比度限定的自顺应直方图均衡化（CLAHE）等技能。
2. 图像转换：

3. 边缘检测和梯度计算：
•图像梯度：

•Sobel算子：

，
•梯度幅值：

4. 色彩空间转换：
•RGB转灰度：

5. 图像滤波：
•高斯滤波器：

然而，假如你所指的“图像学公式”是在艺术史和图像学研究的语境下，那么就不存在详细的数学公式。在这种情况下，“图像学”更多地是一种分析图像符号和含义的方法论，它依赖于对图像的视觉解读、文化背景和汗青脉络的明白。这种类型的图像学不使用数学公式，而是采用驳倒性头脑和学术研究来剖析图像的深层意义。
二、gis风格底图实践应用

“风格地图”(Style Map)这个概念通常被用来描述在不同艺术运动或风格之间的关系和位置。在艺术史中，风格地图可以资助我们明白不同艺术流派的发展历程，它们之间的相互影响以及它们各自的特点。比方，从文艺复兴到现代主义，我们可以绘制出一个风格地图，展示出古典主义、浪漫主义、现实主义、印象派、后印象派、表现主义、立体主义、抽象表现主义等等的艺术风格演变。而在机器学习和人工智能领域，特殊是在图像天生和风格迁移技能中，风格地图可以指代一种算法上的概念。这种概念允许用户在多个预定义的风格之间举行插值，从而创造出新的、混淆的风格结果。比方，给定两个或更多的风格图像，AI体系能够创建出一个风格空间，在这个空间中，不同的点代表了不同的风格。用户可以通过选择空间中的不同位置来控制输出图像的风格特性，从而实现风格的连续变化。假如是在AI图像天生的背景下讨论风格地图，它可能涉及复杂的神经网络模型，如天生对抗网络（GANs）、变分主动编码器（VAEs）或其变种，这些模型能够在高维空间中捕获和使用风格特性。
1、设置天地图服务及风格信息

1. wyl: {
2.   layerCode:'wyl',
3.   sourceType:'XYZ',
4.   projection: "EPSG:4326",
5.   isRLayerPanel: true,
6.   title:'午夜蓝',
7.   crossOrigin: 'anonymous',
8.   themeStyle:'blue',
9.   opacity: 1,
10.   url:'https://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=46a08ed576eb9ad93d6a465a55544a5b',
11.   visible: true
12. },
13. black: {
14.   layerCode:'black',
15.   sourceType:'XYZ',
16.   projection: "EPSG:4326",
17.   isRLayerPanel: true,
18.   title:'中国黑',
19.   crossOrigin: 'anonymous',
20.   themeStyle:'black',
21.   opacity: 1,
22.   url:'https://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=46a08ed576eb9ad93d6a465a55544a5b',
23.   visible: false
24. },
25. gray: {
26.   layerCode:'gray',
27.   sourceType:'XYZ',
28.   projection: "EPSG:4326",
29.   isRLayerPanel: true,
30.   title:'中国灰',
31.   crossOrigin: 'anonymous',
32.   themeStyle:'gray',
33.   opacity: 1,
34.   url:'https://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=46a08ed576eb9ad93d6a465a55544a5b',
35.   visible: false
36. },
37. reversal: {
38.   layerCode:'reversal',
39.   sourceType:'XYZ',
40.   projection: "EPSG:4326",
41.   isRLayerPanel: true,
42.   title:'反转色',
43.   crossOrigin: 'anonymous',
44.   themeStyle:'reversal',
45.   opacity: 1,
46.   url:'https://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=46a08ed576eb9ad93d6a465a55544a5b',
47.   visible: false
48. }

复制代码

2、核心转换代码实现

1. export function getStyleSource(layer, type) {
2.     let reverseFunc = undefined
3.     if (type == 'gray') {
4.         reverseFunc = function (pixelsTemp) {
5.             //灰色
6.             for (var i = 0; i < pixelsTemp.length; i += 4) {
7.                 var r = pixelsTemp[i];
8.                 var g = pixelsTemp[i + 1];
9.                 var b = pixelsTemp[i + 2];
10.                 //运用图像学公式，设置灰度值
11.                 var grey = 0;
12.                 //将rgb的值替换为灰度值
13.                 pixelsTemp[i] = grey;
14.                 pixelsTemp[i + 1] = grey;
15.                 pixelsTemp[i + 2] = grey;
16.             }
17.         };
18.     } else if (type == 'blue') {
19.         reverseFunc = function (pixelsTemp) {
20.             //蓝色
21.             for (var i = 0; i < pixelsTemp.length; i += 4) {
22.                 var r = pixelsTemp[i];
23.                 var g = pixelsTemp[i + 1];
24.                 var b = pixelsTemp[i + 2];
25.                 //运用图像学公式，设置灰度值
26.                 var grey = 0;
27.                 //将rgb的值替换为灰度值
28.                 pixelsTemp[i] = grey;
29.                 pixelsTemp[i + 1] = grey;
30.                 pixelsTemp[i + 2] = grey;
32.                 pixelsTemp[i] = 0;
33.                 pixelsTemp[i + 1] = 2;
34.                 pixelsTemp[i + 2] = 30;
35.             }
36.         };
37.     } else if (type == 'black') {
38.         reverseFunc = function (pixelsTemp) {
39.             //灰色
40.             for (var i = 0; i < pixelsTemp.length; i += 4) {
41.                 var r = pixelsTemp[i];
42.                 var g = pixelsTemp[i + 1];
43.                 var b = pixelsTemp[i + 2];
44.                 //运用图像学公式，设置灰度值
45.                 var grey = ;
46.                 //将rgb的值替换为灰度值
47.                 pixelsTemp[i] = grey;
48.                 pixelsTemp[i + 1] = grey;
49.                 pixelsTemp[i + 2] = grey;
51.                 //黑色，依赖上边的灰色
52.                 pixelsTemp[i] = 0;
53.                 pixelsTemp[i + 1] = 0;
54.                 pixelsTemp[i + 2] = 0;
55.             }
56.         };
57.     } else if (type == 'reversal') {
58.         reverseFunc = function (pixelsTemp) {
59.             //反转色
60.             for (var i = 0; i < pixelsTemp.length; i += 4) {
61.                 pixelsTemp[i] = 0;
62.                 pixelsTemp[i + 1] = 0;
63.                 pixelsTemp[i + 2] = 0;
64.             }
65.         };
66.     }
68.     if (reverseFunc) {
69.         const raster = new RasterSource({
70.             sources: [
71.                 layer,
72.             ],
73.             operationType: 'image',
74.             operation: function (pixels, data) {
75.                 reverseFunc(pixels[0].data)
76.                 return pixels[0];
77.             },
78.             threads: 10,
79.             lib: {
80.                 reverseFunc: reverseFunc,
81.             }
83.         });
84.         // raster.refresh()
85.         return raster;
86.     } else {
87.         return layer;
88.     }
89. }

复制代码

3、前端代码实现

1. <html lang="en">
2. <head>
3.     <meta charSet="utf-8">
4.     <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
5.     <link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
6.     <style>
7.         /* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
8.         .map {
9.             height: 1080px;
10.             width: 100%;
11.             float: left;
12.         }
13.     </style>
14.     <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
15.     <script src="http://openlayers.vip/examples/resources/ol.js"></script>
16.     <script src="./tileSourceColor.js"></script>
17.     <script src="./tiandituLayers.js"></script>
18.     <title>OpenLayers example</title>
19. </head>
20. <body>
21. <!--<h2>OpenLayers style</h2>-->
22. <!--地图容器，需要指定 id -->
23. <div id="map" class="map"></div>
25. <script type="text/javascript">
26.     var map = new ol.Map({
27.         // 地图容器
28.         target: 'map',
29.         // 地图图层，比如底图、矢量图等
30.         layers: [
31.             getVEC_CLayer(),
32.             getCVA_CLayer(),
33.         ],
34.         // 地图视野
35.         view: new ol.View({
36.             projection: "EPSG:4326",
37.             // 定位
38.             center: [115.67724700667199, 37.73879478106912],
39.             // 缩放
40.             zoom: 6,
41.             maxZoom: 18,
42.             minZoom: 1,
43.         })
44.     });
46.     var defaultStyle = new ol.style.Style({
47.         //边框样式
48.         stroke: new ol.style.Stroke({
49.             color: 'white',
50.             width: 2,
51.         }),
52.         //填充样式
53.         fill: new ol.style.Fill({
54.             color: 'rgba(255, 255, 255, 0.7)',
55.         }),
56.         image: new ol.style.Circle({
57.             radius: 5,
58.             fill: new ol.style.Fill({
59.                 color: 'white',
60.             })
61.         })
62.     })
64. </script>
65. </body>
66. </html>

复制代码

三、技能实现结果

1、半夜蓝风格

2、中国黑风格

3、中国灰风格

4、翻转色风格

  假如对您有所资助，请点赞打赏支持！
技能互助交流qq：2401315930
最后分享一下地图下载器设计及下载地址：
链接：https://pan.baidu.com/s/1RZX7JpTpxES-G7GiaVUxOw 
提取码：61cn
地图下载器代码结构设计及功能实现_地图下载管理器剖析-CSDN博客

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。