openlayer影像鹰眼图

最新推荐文章于 2024-05-23 22:30:00 发布

白煮酒

最新推荐文章于 2024-05-23 22:30:00 发布

阅读量607

点赞数

文章标签： GIS

本文链接：https://blog.csdn.net/ParisT_T/article/details/90449549

版权

需要注意的是引入如果只有ol.css和ol.js的话，import需要修改

      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {defaults as defaultControls, OverviewMap} from 'ol/control.js';
      import TileLayer from 'ol/layer/Tile.js';
      import OSM from 'ol/source/OSM.js';

官网中这种的在new的时候改为ol.map

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../v5.3.0-dist/ol.css">
		<script src="../v5.3.0-dist/ol.js"></script>
		<style type="text/css">

			#map {
				width: 100%;
				height: 100%;
			}
			
			.ol-custom-overviewmap,
			.ol-custom-overviewmap-map.ol-uncollapsible {
				left: auto;
				right: 0;
				top: 0;
				height: 150px;
			}
			
			.ol-custom-overviewmap:not(.ol-collapsed) {
				border: 1px solid black;
				height: 155px;
			}
			
			.ol-custom-overviewmap .ol-overviewmap {
				border: none;
				width: 300px;
			}
			
			.ol-custom-overviewmap .ol-overviewmap-box {
				border: 2px solid red;
			}
			
			.ol-custom-overviewmap:not(.ol-collapsed) button {
				bottom: auto;
				left: auto;
				right: 1px;
				top: 1px;
			}
		</style>
	</head>
 
	<body>
		<div id="map"></div>
		<script>
			var overviewMapControl = new ol.control.OverviewMap({
				className: 'ol-overviewmap ol-custom-overviewmap',
				layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM({
							'url': 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
						})
					})
				],
				collapseLabel: '\u00BB',
				label: '\u00AB',
				collapsed: false
			});
			var map = new ol.Map({
				target: 'map',
				layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					})
				],
				view: new ol.View({
					center: [1200000, 4000000],
					zoom: 8
				}),
				controls: ol.control.defaults().extend([overviewMapControl])
			});
		</script>
	</body>
 
</html>

在这里插入图片描述

白煮酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayer影像鹰眼图

需要注意的是引入如果只有ol.css和ol.js的话，import需要修改 import Map from 'ol/Map.js'; import View from 'ol/View.js'; import {defaults as defaultControls, OverviewMap} from 'ol/control.js'; import...
复制链接

扫一扫