了解GIS地图和可视化如何改变我们对地理信息的理解

Posted xzj3900

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了了解GIS地图和可视化如何改变我们对地理信息的理解相关的知识,希望对你有一定的参考价值。

GIS地图和可视化是紧密相关的概念,因为GIS系统通常需要将地理数据以直观的方式呈现给用户。这就需要使用各种可视化技术,将抽象的地理信息转换为易于理解和使用的图形和图像。

GIS(地理信息系统)可视化(visualization是两个紧密相关的领域。GIS是一种用于管理、分析和展示地理空间数据的技术,而可视化则是一种用图形、图表、动画等形式展示数据的方式。GIS地图则是指基于地理信息系统技术,将各种地理数据在一个地图上进行展示的地图。

 

GIS地图和可视化是紧密相关的概念,因为GIS系统通常需要将地理数据以直观的方式呈现给用户。这就需要使用各种可视化技术,将抽象的地理信息转换为易于理解和使用的图形和图像。GIS和可视化可以结合起来,使得地理空间数据可以以更加直观、形象、生动的方式呈现出来。例如,在一个GIS应用中,可以利用可视化技术展示地图、气泡图、线条图、柱状图等等,以便更好地理解和分析数据。

 

GIS地图在数据可视化中具有广泛的应用,以山海鲸可视化中的GIS地图为例,如:

①通过将地理信息与其他数据结合,可以更加直观地展示数据分布、空间关系和趋势变化。

通过在GIS地图上叠加人口分布数据,可以更加清晰地了解不同地区的人口密度和人口流动情况。

GIS地图可以帮助企业更好地分析不同地区的资源分布情况,帮助决策者制定合理的资源分配方案。

通过GIS地图,可以更加直观地展示城市的规划和交通情况,帮助政府决策者和城市规划师更好地进行规划和管理。

将环境监测数据与GIS地图结合,可以更好地了解环境状况和资源保护情况,帮助决策者采取更加科学有效的环境保护措施。

 

GIS地图有以下优点

空间分析能力:GIS地图可以将不同的数据集集成到地图中进行空间分析,例如测量距离、面积和体积,计算空间关系等,能够帮助用户更好地理解和分析地理空间数据。

数据可视化:GIS地图可以将各种地理空间数据以不同的形式进行可视化呈现,包括点、线、面、图表等,可以更清晰地展示数据分布、趋势和关系。

数据共享:GIS地图可以将数据共享给用户,帮助他们更好地理解地理空间数据,并且可以提供可视化的数据呈现,使得数据更加直观和易于理解。

空间决策支持:GIS地图可以为用户提供空间决策支持,帮助用户更好地理解和分析地理空间数据,制定更合理的决策。

实时性:GIS地图可以将数据实时更新到地图中,保持数据的及时性和准确性,帮助用户更好地了解和应对地理空间变化。

 

总之,GIS地图在数据可视化中的应用非常广泛,可以帮助我们更好地理解数据,做出更加准确的决策。

Openlayer加载切片地图改变地图样式

数据是GIS的灵魂,没有数据GIS一无用处。在我国对地理数据管控极为严格,购买数据也是及其昂贵的,在webgis开发的过程种,为了节省成本一般选择加载第三方的底图,力图天地图、谷歌、OSM等。但是这些底图已经渲染成样式了。我们如何在改变这些切片的样式。接下来讲一下实现的原理及其过程:

一、原理及其实现过程
1、原理
逐像素获取切片的rgba值进行赋值,从而改变切片底图的样式。
2、如何实现
在ol.source.XYZ的tileLoadFunction函数中,获取每一张切片。将切片重新绘制到canvas上,逐像素获取rgba的值进行判断赋值,因为涉及到渐变色的问题。这里采用将rgb三个值取平均值,使其三维变成一维形式。能够方便对rgb同色的阈值判断。
二、代码
代码是群里一位网友给出的,并非作业原创,个人只是稍加应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../script/ol3/ol.css" rel="stylesheet" />
    <script src="../script/ol3/ol.js"></script>
    <style>

    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function getTdtLayer(lyr) 
            var url = "http://t0-7.tianditu.com/DataServer?T=" + lyr + "&tk=‘token值’&X=x&Y=y&L=z";
            var layer = new ol.layer.Tile(
                source: new ol.source.XYZ(
                    url: url,
                    tileLoadFunction: function (imageTile, src) 
                        let img = new Image();
                        img.crossOrigin = '';
                        img.onload = function () 
                            let canvas = document.createElement('canvas');
                            let w = img.width;
                            let h = img.height;
                            canvas.width = w;
                            canvas.height = h;
                            let context = canvas.getContext('2d');
                            context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
                            let imageData = context.getImageData(0, 0, w, h);
                            for (var index = 0; index < w * h * 4;index+=4) 
                                let r = imageData.data[index];
                                let g = imageData.data[index+1];
                                let b = imageData.data[index+2];
                                let a = imageData.data[index + 3];

                                let rgbAverage = (r + g + b) / 3;
                                if (rgbAverage > 238 && rgbAverage<245) 
                                    console.log("AAAAA");
                                   imageData.data[index]=16;
                                   imageData.data[index + 1]=30;
                                   imageData.data[index + 2] = 67;
                                   imageData.data[index + 3] = a;
                                

                            
                            context.putImageData(imageData, 0, 0);
                            imageTile.getImage().src = canvas.toDataURL('image/png');
                        
                        img.src = src;
                    
                )
            );
            return layer;
        
        let vec_c = getTdtLayer("vec_w");
        //var cva_c = getTdtLayer("cva_w");
        let projection = new ol.proj.Projection(
            code: 'EPSG:4326',
            units: 'degrees'
        );
        let map = new ol.Map(
            target: 'map',
            layers: [vec_c],
            view: new ol.View(
                projection: projection,
                center: [116.456, 40.251],
                zoom: 4
            )

        )

    </script>
</body>
</html>

三、效果
参考文献:
1、https://www.cnblogs.com/naaoveGIS/p/11175634.html#4300200

以上是关于了解GIS地图和可视化如何改变我们对地理信息的理解的主要内容,如果未能解决你的问题,请参考以下文章

数字孪生智慧物流之 Web GIS 地图应用

Openlayer加载切片地图改变地图样式

GIS方面:如何对已经数字化的地图进行配准?

有没有地理信息可视化的绘图软件

基于GIS的视频管理指挥平台

前端gis开发以及2D地图和3D地图开发策略