八章-89-图片重投影

作者: 彩云飘过 | 来源:发表于2020-03-27 17:54 被阅读0次

八章-89-图片重投影
投影仪的伽马非线性
八章-90-OSM地图重投影
投影仪投影小程序
opencv
忆王孙 . 夜雨
2019-07-25
追影子的人
八章-92-使用EPSG检索结果重投影
2018-01-04 Day 89-英语学习打卡

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1089.html ，对应的官网示例 https://openlayers.org/en/latest/examples/zoomslider.html?q=ZoomSlider

image.png

获取坐标系的描述方法，网站 http://epsg.io 搜索需要的坐标系，找到对应编程语言的描述

image.png

核心技术点：
ImageStatic的投影定位点是图像的中心
使用了proj4来自定义坐标系
源图片是矩形的，投影到地图上有变化

image.png

<!DOCTYPE html>
<html>

<head>
 <title></title>
 <link rel="stylesheet" href="../include/ol.css" type="text/css" />
 <link rel="stylesheet" href="../include/bootstrap.css" type="text/css" />
 <script src="../include/jquery.js"></script>
 <script src="../include/ol.js"></script>
 <script src="../include/proj4.js"></script>
</head>
<style></style>

<body>  
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
 <script>
 
 // 第一个是坐标系，第二个参数是怎么得来的呢，到http://epsg.io/27700，找到JS的描述
  proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
         '+x_0=400000 +y_0=-100000 +ellps=airy ' +
         '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
         '+units=m +no_defs');
     ol.proj.proj4.register(proj4);

     var imageExtent = [0, 0, 700000, 1300000];

     var map = new ol.Map({
       layers: [
         new ol.layer.Tile({
           source: new ol.source.OSM()
         }),
         new ol.layer.Image({
           source: new ol.source.ImageStatic({
             url: '../data/2000px-British_National_Grid.svg.png',
             crossOrigin: '',
             projection: 'EPSG:27700', //
             imageExtent: imageExtent
           })
         })
       ],
       target: 'map',
       view: new ol.View({ //在view做坐标转换，把image的坐标27700转为地图的坐标3857
         center: ol.proj.transform(ol.extent.getCenter(imageExtent), 'EPSG:27700', 'EPSG:3857'),
         zoom: 4
       })
     });
 </script>
</body>

</html>