本文基于腾讯课堂老胡的课《跟我学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
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"> </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>
网友评论