八章-92-使用EPSG检索结果重投影

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

八章-92-使用EPSG检索结果重投影
Openlayers 4 官方示例概述
知网的检索坑
threejs加载geojson
wkt空间参考描述
【SQL必知必会】学习笔记day2
【实践篇】操作符的使用（一）
玩儿转spring-data-jpa中jpql的投影查询
ES 拼音中文混合检索
SQL必知必会

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

image.png

源码见 1092.html ，对应的官网示例

核心技术点：
使用proj4定义坐标系
使用新的坐标系生成新的view，将新view应用到map上

<!DOCTYPE html>
<html>

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

<body>

 <form class="form-inline">
   <label for="epsg-query">搜索投影坐标系:</label>
   <input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..."
     class="form-control" size="50" />
   <button id="epsg-search" class="btn">搜索</button>
   <span id="epsg-result"></span>
   <div>
     <label for="render-edges">
       渲染重投影区域边缘
       <input type="checkbox" id="render-edges">
     </label>
   </div>
 </form>
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
 <script>
   var map = new ol.Map({
     layers: [
       new ol.layer.Tile({
         source: new ol.source.OSM()
       })
     ],
     target: 'map',
     view: new ol.View({
       projection: 'EPSG:3857',
       center: [0, 0],
       zoom: 1
     })
   });


   var queryInput = document.getElementById('epsg-query');
   var searchButton = document.getElementById('epsg-search');
   var resultSpan = document.getElementById('epsg-result');
   var renderEdgesCheckbox = document.getElementById('render-edges');

   function setProjection(code, name, proj4def, bbox) {
     if (code === null || name === null || proj4def === null || bbox === null) {
       resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...';
       
       map.setView(new ol.View({
         projection: 'EPSG:3857',
         center: [0, 0],
         zoom: 1
       }));
       return;
     }

     resultSpan.innerHTML = '(' + code + ') ' + name;

     var newProjCode = 'EPSG:' + code;
     proj4.defs(newProjCode, proj4def);
     ol.proj.proj4.register(proj4);
     var newProj = ol.proj.get(newProjCode);
     var fromLonLat = ol.proj.getTransform('EPSG:4326', newProj);

     // very approximate calculation of projection extent
     var extent = ol.extent.applyTransform(
       [bbox[1], bbox[2], bbox[3], bbox[0]], fromLonLat);
     newProj.setExtent(extent);
     var newView = new ol.View({
       projection: newProj
     });
     map.setView(newView);
     newView.fit(extent);
   }


   function search(query) {
     resultSpan.innerHTML = 'Searching ...';
     fetch('https://epsg.io/?format=json&q=' + query).then(function (response) {
       return response.json();
     }).then(function (json) {
       var results = json['results'];
       if (results && results.length > 0) {
         for (var i = 0, ii = results.length; i < ii; i++) {
           var result = results[i];
           if (result) {
             var code = result['code'];
             var name = result['name'];
             var proj4def = result['proj4'];
             var bbox = result['bbox'];
             if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
               bbox && bbox.length == 4) {
               setProjection(code, name, proj4def, bbox);
               return;
             }
           }
         }
       }
       setProjection(null, null, null, null);
     });
   }



   searchButton.onclick = function (event) {
     search(queryInput.value);
     event.preventDefault();
   };


   renderEdgesCheckbox.onchange = function () {
     map.getLayers().forEach(function (layer) {
       if (layer instanceof ol.layer.Tile) {
         var source = layer.getSource();
         if (source instanceof ol.source.TileImage) {
           source.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
         }
       }
     });
   };
 </script>
</body>

</html>