我需要使用openlayers创建地图和概览地图。
地图 html 包含在 c# chromium (cefsharp( 控制器中。
但是，由于地图和总览图必须显示在不同的chromium窗口中，因此必须创建两个html。
地图和概览必须链接。 (移动地图坐标时，也必须移动总览图的坐标。
请看一下这个解决方案： ol-ext： OpenLayers 的扩展
<html>
<head>
<!----------------------------------------------------------
Copyright (c) 2015-2018 Jean-Marc VIGLINO,
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
------------------------------------------------------------>
<title>ol-ext: Synchronized windows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<link href="https://openlayers.org/en/v5.2.0/css/ol.css" rel="stylesheet" />
<script src="https://openlayers.org/en/v5.2.0/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<div class="info">
This example synchronize maps in different windows.
<br /> The WSynchro object do the job: WSynchro.synchronize will dispatch a synchro event.
<br />
<button onclick="openWin();">Open a new window!</button>
</div>
<div id="map" class="map" style="width:600px; height:400px;"></div>
<style>
.info {
background:#f5f5f5;
padding:0.5em;
margin: 1em 0;
}
#map {
float: left;
margin-right: 1em;
background: #ddd;
}
</style>
<script>
/** WSynchro object to synchronize windows
* - windows: array of windows to synchro (
* - source: the window source (undefined if first window)
*/
if (!window.WSynchro) {
var WSynchro = {
windows: []
}
}
/** Open a new window to synchronize
* @param {url|undefined} url to open, default current window url
* @param {specs|undefined|null} specs (as for window.open), undefined to open in a new window, null to open in a new tab, default new window
*/
WSynchro.open = function (href, specs) {
var w = window.open(href || window.location.href, "_blank", typeof (specs) == "undefined" ? "location=1,menubar=1,toolbar=1,scrollbars=1" : specs);
if (!w.WSynchro) w.WSynchro = {
windows: [window],
source: window
};
else {
w.WSynchro.windows = [window];
w.WSynchro.source = window;
}
this.windows.push(w);
}
/** Trigger function
* @param {synchronize}
* @param {function} synchronize function
*/
WSynchro.on = function (e, syncFn) {
if (!this.syncFn_) this.syncFn_ = [];
if (e === 'synchronize') this.syncFn_.push(syncFn);
}
/** Synchronize windows
* @param {Object|undefined} if undefined stop synchro (when the window is synchronize)
*/
WSynchro.synchronize = function (params) {
this.synchronize_(params);
}
/** Synchronize windows:
* @param {Array} array of arguments to use with fn
* @param {} internal syncrho time to avoid stnchro loops
* @private
*/
WSynchro.synchronize_ = function (args, sync) {
var i;
// Stop condition
if (!sync) {
if (this.synchronizing) sync = this.sync;
else this.sync = sync = (new Date()).getTime();
this.synchronizing = false;
} else { // Don't synchronize twice
if (sync == this.sync) return;
this.sync = sync;
this.synchronizing = true;
try {
if (WSynchro.syncFn_) {
args.type = "synchronize";
for (i = 0; i < WSynchro.syncFn_.length; i++) {
WSynchro.syncFn_[i].apply(null, [args]);
}
}
} catch (e) { /* */ }
}
if (args)
for (i = 0; i < this.windows.length; i++) {
try {
this.windows[i].WSynchro.synchronize_(args, sync);
} catch (e) { /* */ }
}
}
// layer
var stamen = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
})
});
// map
var z = 6;
pt = [270148, 6247782];
rot = 0;
// Window has a source -> get its position
if (WSynchro.source) {
z = WSynchro.source.map.getView().getZoom();
pt = WSynchro.source.map.getView().getCenter();
rot = WSynchro.source.map.getView().getRotation();
}
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: z,
center: pt,
rotation: rot
}),
layers: [stamen]
});
// Open a new window
function openWin() {
WSynchro.open();
};
// Synchronize function => set map position
WSynchro.on('synchronize', function (e) {
var view = map.getView();
// Tell we are synchro
if (e.pt == view.getCenter() && e.z == view.getZoom() && e.rot == view.getRotation()) {
WSynchro.synchronize();
}
// Set position (will call WSynchro.synchronize on move end)
else {
view.setCenter(e.pt);
view.setZoom(e.z);
view.setRotation(e.rot || 0);
}
});
// Synchronize on move / rotate
map.on(['moveend', 'rotateend'], function (e) {
var view = map.getView();
WSynchro.synchronize({
pt: view.getCenter(),
z: view.getZoom(),
rot: view.getRotation()
});
});
</script>
</body>
</html>