GIS若干相关的概念

投影

常用的投影坐标系：
- CGCS2000_3_Degree_GK_CM_111E
- CGCS2000_3_Degree_GK_Zone_37
- CGCS2000_GK_Zone_19
- Beijing_1954_3_Degree_GK_CM_111E
- Xian_1980_3_Degree_GK_Zone_111E
注释：
- CGCS2000、Beijing_1954表示地理坐标系
- 3_Degree表示三度带，默认六度带
- GK表示高斯-克吕格投影：Gauss Kruger
- CM表示中央子午线：Central Meridian
- Zone_xxx表示带号
- E表示东经
参考资料：
- 命名规则见：奥维平面投影坐标系中固定参数的选用说明 | 奥维互动地图浏览器 (ovital.com)
- 带号计算见：3度带6度带区别、中央经线及带号的计算 - 追风浪子 - 博客园 (cnblogs.com)
- 我国常用投影坐标系及解释见：
  - 我国常用的投影坐标系_ArcGIS中的坐标系_韦先波的博客-CSDN博客
  - 我国常用的投影坐标系_【干货】arcgis中坐标系问题详解_圣范锦意的博客-CSDN博客
坐标系

我国常见地理坐标系：
- 北京54
- 西安80
- 2000国家大地坐标系（CGCS2000：China Geodetic Coordinate System 2000）
- WGS-84（World Geodetic System）
注释：

地理坐标系（三维球体，不同坐标系代表着不同的椭球体参数）-->选择合适的投影方式（常用高斯-克吕格投影）-->投影坐标系（投影坐标系由地理坐标系+投影方式）

高德地图使用的坐标系是GCJ-02；百度地图使用的坐标系是BD-09

我国常用投影方式
- 通用横轴墨卡托投影（UTM）-->横轴等角割圆柱投影
  - UTM投影=0.996高斯投影
  - 遥感中常用
- 墨卡托投影（Mercator）-->正轴等角圆柱投影
- 兰伯特投影（Lambert）-->等角圆锥投影
  - 无角度变形
- 阿伯斯投影（Albers）
- Web墨卡托投影（Web Mercator）
参考资料：
- UTM和Web 墨卡托见：WGS84与WGS84 Web Mercator - wenglabs - 博客园 (cnblogs.com)
- 投影类型：
- 参心坐标系和地心坐标系见：参心坐标系与地心坐标系 - wenglabs - 博客园 (cnblogs.com)
  - 北京54、西安80为参心坐标系
  - WGS84、CGCS2000为地心坐标系
- EPSG见：EPSG.io：全球坐标系
- WKID、SRID见：SRID、EPSG和WKID - Dreamice - 博客园 (cnblogs.com)
地图切片
- 地图切片：采用预生成的方法存放在服务器端，然后根据用户提交的不同请求，把相应的地图瓦片发送给客户端的过程，它是一种多分辨率层次模型，从瓦片金字塔底层到顶层，分辨率越来越低，但表示的地理范围不变
- 地图缓存：又称地图瓦片，是一个包含了不同比例尺下整个地图范围的地图切片的目录，即一个缓存的地图服务就是能够利用静态图片来快速地提供地图的服务
- 矢量切片：将矢量数据以建立金字塔的方式，像栅格切片那样分割成一个个描述性文件，以GeoJson格式或者PDF等自定义格式组织，然后在前端根据显示需要按需请求不同的矢量瓦片数据进行Web绘图
- 优缺点：
  
  1）速度快，预先配色，显示效果佳，满足高并发访问，适合做底图
  
  2）瓦片地图缓存非常高效，如果你曾经查看过某一区域的瓦片，当你再次查看该区域的瓦片时，浏览器可能使用之前缓存的相同的瓦片，而不用重新下载一次
  
  3）瓦片地图可以渐进加载。中心区域的瓦片可能优先于边缘区域的瓦片加载，你可以移动或定位某一点，即使当前地图边缘区域还未加载
  
  4）简单易用。所以很容易在服务器、网络、桌面或移动设备上实现技术集成
  
  5）需要额外占用磁盘空间，需要预先生成切片，无法自定义地图
  
  资料参考：
  - 地图切片的概念与原理_weixin_33912246的博客-CSDN博客
  - WebGIS教程切片地图切片原理

ol加载地图

加载内部封装的地图:

<div id="map" class="map"></div>

<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([37.41, 8.82]),
            zoom: 10
        })
    });
</script>

利用XYZ加载：

<div id="mymap"></div>
<script>
    var openStreetMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        })
    });
    var map = new ol.Map({
        layers: [
            openStreetMapLayer
        ],
        view: new ol.View({
            center: [12570904.1896, 3269680.4449],
            projection: 'EPSG:3857',
            zoom: 10
        }),
        target: 'mymap'
    });
</script>

加载矢量地图：

        <div id="mymap"></div>
        <script type="text/javascript">
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: "green",
                    width: 3
                })
            })
            var map = new ol.Map({
                target: "mymap",
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    projection: "EPSG:4326",
                    center: [0, 0],
                    zoom: 2
                })
            })
            var vectorSource = new ol.source.Vector({
                url: "./data/data/geojson/buildings.geojson",
                format: new ol.format.GeoJSON()
            })
            var vectorLayer = new ol.layer.Vector({
                style: style,
                source: vectorSource
            })
            map.addLayer(vectorLayer)
</script>

加载WMS：

<div id="map"></div>

<script>

    var projection = ol.proj.get('EPSG:4326');//地图投影坐标系
    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2,
        }),
        layers: [
            new ol.layer.Tile({ source: new ol.source.OSM() })]
    });

    var wmsLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: { 'LAYERS': 'topp:states' }
        })
    });
    map.addLayer(wmsLayer)

</script>

加载WMTS：

    <div id="map"></div>

    <script>
        var projection = ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent();
        var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = [];
        for (var z = 2; z < 19; ++z) {
            resolutions[z] = size / Math.pow(2, z);
        }
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.WMTS({
                        url: "http://t{0-6}.tianditu.gov.cn/vec_c/wmts?tk=1d109683f4d84198e37a38c442d68311", 
                        name: "中国矢量1-4级",
                        layer: "vec",
                        style: "default", 
                        matrixSet: "c", 
                        format: "tiles", 
                        wrapX: true,
                        tileGrid: new ol.tilegrid.WMTS({
                            origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions,
                            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                        })
                    }),
                })
            ],
            target: "map",
            view: new ol.View({
                center: [120.14805, 30.26971], 
                projection: projection,
                zoom: 3,
                maxZoom: 17, minZoom: 1
            })
        });


    </script>

加载WFS：

    <div id="map"></div>

    <script>

        var projection = ol.proj.get('EPSG:3857');//地图投影坐标系
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [-8908887.277395891, 5381918.072437216],
                zoom: 12,
            }),
            layers: [
                new ol.layer.Tile({ source: new ol.source.OSM() })]
        });

        var vectorSource = new ol.source.Vector();
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0，0，255,1.0)',
                    width: 2,
                }),
            }),
        });

        var vectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function (extent) {
                return (
                    "https://ahocevar.com/geoserver/wfs?service=WFS&" +
                    "version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
                    "outputFormat=application/json&srsname=EPSG:3857&" +
                    "bbox=" +
                    extent.join(',') + ',EPSG:3857'
                );
            },
            strategy: ol.loadingstrategy.bboxStrategy,
        });
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0，255,1.0)', width: 2,
                }),
            }),
        });


        map.addLayer(vector)

    </script>

地图切片格式
- 一般有JPEG、PNG、GIF格式，其中缓存地图服务的图片格式一般有 JPEG和PNG两种，JPEG是不支持透明的，通常适用于影像地图服务，PNG支持透明，适用于不同地图服务叠加的情况。详见：常见GIS地图切图格式 - 星火spark - 博客园 (cnblogs.com)
- SuperMap的iServer支持的图片瓦片是 PNG、JPG、GIF、WebP。详见：瓦片格式 (supermap.com.cn)
- MapServer主要是PNG、JPEG、TIF、GIF。详见：WMS output formats — GeoServer 2.21.x User Manual
WMS、WMTS的区别

WMTS相比WMS，牺牲掉灵活性来换取性能，返回的都是基础地图，所有静态数据的范围框和比例尺统统被限定在各个图块（瓦片）中。然后这些图块集使得对WMTS的实现只需要一个仅仅返回简单已有文件的web服务器即可。WFS与两者都不同，返回的是矢量数据，用于增删改操作。

参考资料：
- wms、wmts和wfs的区别 - yiwenzhang - 博客园 (cnblogs.com)
- wms、wmts、wfs等地图服务的区别 - 爱吃玉米的猫儿 - 博客园 (cnblogs.com)
OGC服务

开放地理空间信息联盟（Open Geospatial Consortium-OGC）

OGC服务：
- WMS
- WFS
- WCS（栅格（Coverage））
- WMTS
- WPS（Web Processing Server）
  
  参考资料：OGC地图服务的定义wms，wmts，wfs，tms等 - 花火灬流年 - 博客园 (cnblogs.com)
大量数据的加载问题

数据量过大、刷新会卡顿、肉眼可见是有限的－＞点聚合

openlayers聚合参考：Dynamic clusters (openlayers.org)

聚合算法参考：地图点聚合优化方案 - zhanlijun - 博客园 (cnblogs.com)

posted @ 2022-04-01 23:04 当时明月在曾照彩云归阅读(931) 评论(0) 收藏举报

刷新页面返回顶部

当时明月在曾照彩云归

个人的日常随笔

GIS若干相关的概念

公告