开源WebGIS开发——Map的视图管理（view）

最新推荐文章于 2022-02-24 09:07:43 发布

YUANXLLL

最新推荐文章于 2022-02-24 09:07:43 发布

阅读量485

点赞数 1

文章标签： mvc

本文链接：https://blog.csdn.net/yl14774636230/article/details/120641391

版权

1、坐标系统及投影简介

（1）坐标系统框架

参心坐标系：以参考椭球几何中心为原点的地理坐标系。

①北京54坐标：是前苏联1942年坐标系延伸，坐标原点在前苏联的普尔科沃。

②西安80坐标：我国自主研发坐标系，相对于北京54精度更高，坐标原点在陕西省泾阳县永乐镇。

自然资源部宣布自2019年1月1日起，这两款坐标系就已经彻底退出历史舞台。但是我们目前很多单位，老旧资料和原始的地形图，仍然是这两款坐标系。

地心坐标系：以地球质心为原点的地理坐标系

①WGS84坐标：美国国防部研制确定的，目前我们使用的GPS定位得到的坐标就是该坐标系。

②大地2000坐标系：国产地心坐标系，与国际接轨，目前全国全面推广使用。

（2）坐标的表达方式

①地理坐标系

通过经纬度对地球表面进行定位的坐标系。

如：东经E121°31′3.00″北纬N31°20′42.69″ 或者 31.2013°，29.3821°

本初子午线：英国伦敦格林尼治天文台。

WGS84默认投影代号：EPSG4326

②投影坐标系

使用X,Y值对地球表面进行定位的坐标系。

如： 36594233米，2933249米

WGS84经过墨卡托投影后默认代号：EPSG3857（OSM）墨卡托投影有变形离地球越远误差越大。

2、View对象的主要组成部分

View对象的四个基本属性：center（展示中心）、resolution（分辨率）、rotation（旋转属性）、projection（投影）。

3、View对象的主要参数

参数	类型	默认值	描述
center	module:ol/coordinate~Coordinate		视图的初始中心。使用projection选项指定中心的坐标系。如果未设置图层源，则不会获取图层源，但可以稍后设置中心#setCenter。
constrainRotation	boolean \| number	TRUE	旋转约束。 false意味着没有约束。true意味着没有约束，但在零附近捕捉零。数字将旋转约束为该数量的值。例如，4将旋转约束为0度，90度，180度和270度。
enableRotation	boolean	TRUE	启用旋转。默认为true。如果设置旋转约束为false，将会设置旋转的值为0。如果enableRotation设置为false，constrainRotation选项没有任何作用。
extent	module:ol/extent~Extent		限制中心的程度，换句话说，中心不能设置在这个范围之外。
maxResolution	number		用于确定分辨率约束的最大分辨率。它与minResolution（或maxZoom）和zoomFactor。一起使用。如果未指定，则以投影的有效范围适合256x256像素图块的方式计算。如果投影是Spherical Mercator（默认值），则maxResolution默认为40075016.68557849 / 256 = 156543.03392804097。
minResolution	number		用于确定分辨率约束的最小分辨率。它与maxResolution（或minZoom）和zoomFactor。一起使用。如果未指定，则假设29个缩放级别（系数为2）进行计算。如果投影是Spherical Mercator（默认值），则minResolution默认为40075016.68557849 / 256 / Math.pow(2, 28) = 0.0005831682455839253。
maxZoom	number	28	用于确定分辨率约束的最大缩放级别。它与minZoom（或maxResolution）和zoomFactor。一起使用。请注意，如果minResolution还提供了，则优先于maxZoom。
minZoom	number	0	用于确定分辨率约束的最小缩放级别。它与maxZoom（或minResolution）和zoomFactor。一起使用。请注意，如果maxResolution还提供了，则优先于minZoom。
projection	module:ol/proj~ProjectionLike	'EPSG:3857'	投影。默认为球形墨卡托。
resolution	number		视图的初始分辨率。单位是projection每像素的单位（例如，每像素米）。设置此选项的另一种方法是设置zoom。如果既未zoom定义也未定义，则不会获取图层源，但可以稍后使用#setZoom或设置它们#setResolution。
resolutions	Array.<number>（double类型实现对地图缩放的精细化控制）		决定解决方案约束的决议。如果设置了maxResolution，minResolution，minZoom，maxZoom，和zoomFactor选项都将被忽略。
rotation	number	0	以弧度为单位的视图的初始旋转（顺时针正向旋转，0表示向北）。
zoom	number（int型）		仅在resolution未定义时使用。用于计算视图初始分辨率的缩放级别。使用该#constrainResolution方法确定初始分辨率。
zoomFactor	number	2	用于确定分辨率约束的缩放系数。

4、View对象的可观察属性

有三个可观察属性

姓名	类型	可设置	ol/Object.ObjectEvent类型	描述
`center`	模块：ol/坐标~坐标 \| 不明确的	是的	`change:center`	视图的中心。
`resolution`	数量 \| 不明确的	是的	`change:resolution`	视图的分辨率。
`rotation`	数字	是的	`change:rotation`	以弧度为单位的视图旋转。

5、View对象的方法

6、示例：视图联动

同一个视图可以展示多张地图，但是控件默认只能被其中一个视图使用，只能重新赋值

示例：同一个视图加载天地图路网地图和遥感影像地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ol.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .map {
            width: 50%;
            height: 100%;
            position: absolute;
        }
        .map1{
            width: 50%;
            height: 100%;
            position: absolute;
            margin-left: 50%;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <div class="map1" id="map1"></div>

    <script src="ol.js"></script>
    <script>
        //WGS84投影 天地图
        var tdtmap = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7ab767e38fe3d9c04f144a091cff214f"
            })
        })
        var zjmap = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7ab767e38fe3d9c04f144a091cff214f"
            })
        })

        //天地图卫星影像
        var weixingmap = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:"http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7ab767e38fe3d9c04f144a091cff214f"
            })
        }) 

        //定义地图的中心
        // var beijing = ol.proj.transform([116.40,39.92],"EPSG:4326","EPSG:3857");
        //创建视图
        var projection = new ol.proj.Projection({
            code: "EPSG:4326",
            units: "degrees"
        })
        //103.8376235961914, 30.856132507324222
        //[104.29630279541016, 30.42423248291016]
        // [104.0628433227539, 30.66318511962891]
        var view = new ol.View({
            projection: projection,
            center: [104.0628433227539, 30.66318511962891],
            // zoom: 10,
            resolution:0.0002433670469288253,
            constrainRotation:4
            // enableRotation:false
            // rotation:1.5707964
            // maxResolution:0.0020433670469288253,
            // minResolution:0.0001433670469288253
            // 0.00017166514526367188
            // extent:[103.8376235961914,30.42423248291016,104.29630279541016,30.856132507324222]
        })
        //创建地图控件
        var controls = new ol.control.defaults().extend([new ol.control.FullScreen()]);
        //创建一个互动控件
        var interactions = new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]);
        var map = new ol.Map({
            target: "map",
            controls: controls,
            interactions: interactions,
            layers: [tdtmap, zjmap],
            view: view
        })
        var map1 = new ol.Map({
            target: "map1",
            controls: new ol.control.defaults().extend([new ol.control.FullScreen()]),
            interactions: new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
            layers: [weixingmap, zjmap],
            view: view
        })


        view.on("change:resolution",function(e){
            console.log(e)
        })

        map.on("click",function(e){
            console.log(e)
        })

        view.rotate(1.5707964,[104.0628433227539, 30.66318511962891])
        
    </script>
</body>
</html>

YUANXLLL

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
开源WebGIS开发——Map的视图管理（view）

1、坐标系统及投影简介（1）坐标系统框架参心坐标系：以参考椭球几何中心为原点的地理坐标系。①北京54坐标：是前苏联1942年坐标系延伸，坐标原点在前苏联的普尔科沃。②西安80坐标：我国自主研发坐标系，相对于北京54精度更高，坐标原点在陕西省泾阳县永乐镇。自然资源部宣布自2019年1月1日起，这两款坐标系就已经彻底退出历史舞台。但是我们目前很多单位，老旧资料和原始的地形图，仍然是这两款坐标系。地心坐标系：以地球质心为原点的地理坐标系①WGS84坐标：...
复制链接

扫一扫