概述

在openlayers中直接加载海图会有偏移，这是因为海图的坐标是做了便宜的，所以需要定义海图的坐标，本文将讲述如何实现，并对比OSM和高德。

效果

实现

<!DOCTYPE html>
<html>
<head><title>XYZ</title><meta charset="utf-8"><link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"><style>#map,body,html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;font-size: 16px;}.basemap {position: absolute;top: 20px;right: 20px;z-index: 99;padding: 5px;background: white;}</style><script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="map" class="map"><div class="basemap"><input type="radio" name="baselayer" value="osm">OSM<input type="radio" name="baselayer" value="nav" checked="checked">高德<input type="radio" name="baselayer" value="sea">海图</div>
</div>
<script>
// 定义海图坐标
proj4.defs('EPSG:3395','+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'
);const seaLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://m12.shipxy.com/tile.c?l=Na&m=o&y={y}&x={x}&z={z}',projection: 'EPSG:3395',tileGrid: ol.tilegrid.createXYZ({extent: [-20037508.342789244,-20037508.342789244,20037508.342789244,20037508.342789244]})}),visible: false
});const navLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'})
});const osmLayer = new ol.layer.Tile({source: new ol.source.OSM(),visible: false
});const vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({url: "data/china.json",format: new ol.format.GeoJSON()}),style: new ol.style.Style({stroke: new ol.style.Stroke({color: '#f00',width: 1})})
});
const map = new ol.Map({target: 'map',layers: [ navLayer, osmLayer, seaLayer, vectorLayer ],view: new ol.View({minZoom: 1,maxZoom: 18,center: [11278378, 4208063],zoom: 4})
});const layerDict = {sea: seaLayer,osm: osmLayer,nav: navLayer
}$('input[type=radio][name=baselayer]').change(function() {for (const k in layerDict) {const isShow = this.value === k;layerDict[k].setVisible(isShow);}
});
</script>
</body>
</html>

openlayers中海图的加载相关推荐

【WebGIS】二、基于Openlayers实现地图的加载与显示
二.基于Openlayers实现地图的加载与显示基于上文中配置好的环境,先通过Element Plus实现一个页面的布局,然后基于openlayers加载显示全球瓦片地图. 1. 引入element ...
Swift - 使用addSubview()方法将StoryBoard中的视图加载进来
使用 Storyboard 我们可以很方便地搭建好各种复杂的页面,同时通过 segue 连接可以轻松实现页面的跳转. 但除了segue,我们还可以使用纯代码的方式实现Storyboard界面的跳转. ...
Pytorch中的数据加载
Pytorch中的数据加载 1. 模型中使用数据加载器的目的在前面的线性回归模型中,使用的数据很少,所以直接把全部数据放到模型中去使用. 但是在深度学习中,数据量通常是都非常多,非常大的,如此大量的 ...
c语言文件加载内存吗,把文件中的数据加载到内存进行查找C语言实现.docx
把文件中的数据加载到内存进行查找C语言实现 #define _CRT_SECURE_NO_WARNINGS#include#include#includechar **pp=NULL;void ini ...
Java虚拟机中类的加载过程
Java中类的加载过程例如下面的一段简单的代码 public class HelloWorld {public static void main(String[] args) {System.ou ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
android动态设置错误页面,Android中替换WebView加载网页失败时的页面
我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难 ...
word文档中添加mathtype加载项
教您在word文档中添加mathtype加载项发布时间:2019/08/12 mathtype安装完成后,正常情况下会在word文档中的菜单中自动添加mathtype加载项,但有时也会出现小意外,m ...
【Android 逆向】整体加固脱壳 ( DexClassLoader 加载 dex 流程分析 | DexPathList 中根据 File 加载 DexFile | loadDexFile 分析 )
文章目录前言一.根据 File 加载 DexFile 二.DexPathList.loadDexFile 函数分析前言上一篇博客 [Android 逆向]整体加固脱壳 ( DexClassLo ...
yii2 引入php文件,Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
本文实例分析了Yii2中YiiBase自动加载类.引用文件的方法.分享给大家供大家参考,具体如下: 在Yii2中这个函数是用来加载类的,没有直接引用文件的相关实现.但是这个也可以用来引用文件. pub ...

openlayers中海图的加载

概述

效果

实现

openlayers中海图的加载相关推荐

最新文章

热门文章