Openlayers 可以将地图和概览地图拆分为两个html吗？
我需要使用openlayers创建地图和概览地图 映射html包含在c#chromium（cefsharp）控制器中 但是，由于地图和概览地图必须显示在不同的窗口中，因此必须创建两个html 地图和概览必须链接。Openlayers 可以将地图和概览地图拆分为两个html吗？,openlayers,Openlayers,我需要使用openlayers创建地图和概览地图 映射html包含在c#chromium（cefsharp）控制器中 但是，由于地图和概览地图必须显示在不同的窗口中，因此必须创建两个html 地图和概览必须链接。 （移动地图坐标时，也必须移动总览地图的坐标。）请查看此解决方案： ol ext:同步窗口 此示例在不同的窗口中同步地图。 WSynchro对象执行此任务：WSynchro.synchronize将调度同步事件。 打开一个新窗口！ .info{ 背景:#f5； 填充：0.5em； 利
（移动地图坐标时，也必须移动总览地图的坐标。）请查看此解决方案：
ol ext:同步窗口
此示例在不同的窗口中同步地图。
WSynchro对象执行此任务：WSynchro.synchronize将调度同步事件。
打开一个新窗口！
.info{
背景:#f5；
填充：0.5em；
利润率：1米0；
}
#地图{
浮动：左；
右边距：1米；
背景：ddd；
}
/**WSynchro对象以同步windows
*-窗口：要同步的窗口阵列(
*-源：窗口源（如果是第一个窗口，则未定义）
*/
如果（！window.WSynchro）{
var WSynchro={
窗口：[]
}
}
/**打开一个新窗口进行同步
*@param{url | undefined}url打开，默认当前窗口url
*@param{specs | undefined | null}specs（如window.open），undefined在新窗口中打开，null在新选项卡中打开，默认新窗口
*/
WSynchro.open=函数（href，规范）{
var w=window.open（href | | | window.location.href，“_blank”，typeof（specs）=“未定义”？“位置=1，菜单栏=1，工具栏=1，滚动条=1”：specs）；
如果（！w.WSynchro）w.WSynchro={
窗口：[窗口]，
资料来源：窗口
};
否则{
w、 WSynchro.windows=[window]；
w、 WSynchro.source=窗口；
}
此.windows.push（w）；
}
/**触发函数
*@param{synchronize}
*@param{function}同步函数
*/
WSynchro.on=功能（e，syncFn）{
如果（！this.syncFn_）this.syncFn _=[]；
如果（e==='synchronize'）这个.syncFn_uzn.push（syncFn）；
}
/**同步窗口
*@param{Object | undefined}如果未定义停止同步（当窗口同步时）
*/
WSynchro.synchronize=函数（参数）{
此.synchronize（参数）；
}
/**同步窗口：
*@param{Array}要与fn一起使用的参数数组
*@param{}避免stnchro循环的内部同步时间
*@私人
*/
WSynchro.synchronize=函数（args，sync）{
var i；
//停止条件
如果（！sync）{
如果（this.synchroning）sync=this.sync；
else this.sync=sync=（新日期（））.getTime（）；
此参数=假；
}否则{//不同步两次
如果（sync==this.sync）返回；
this.sync=sync；
this.synchronizing=true；
试一试{
如果（WSynchro.syncFn_41;{
args.type=“同步”；
对于（i=0；i获取其位置
if（WSynchro.source）{
z=WSynchro.source.map.getView（）.getZoom（）；
pt=WSynchro.source.map.getView（）.getCenter（）；
rot=WSynchro.source.map.getView（）.getRotation（）；
}
var map=新ol.map({
目标：“地图”，
视图：新ol.view({
zoom:z，
中心:pt,，
轮换：腐烂
}),
层：[雄蕊]
});
//打开一个新窗口
函数openWin（）{
WSynchro.open（）；
};
//同步功能=>设置映射位置
WSynchro.on（'synchronize'，函数（e）{
var view=map.getView（）；
//告诉我我们是同步机
如果（e.pt==view.getCenter（）&&e.z==view.getZoom（）&&e.rot==view.getRotation（））{
WSynchro.synchronize（）；
}
//设置位置（将在移动端调用WSynchro.synchronize）
否则{
视图。设置中心（e.pt）；
视图。设置缩放（e.z）；
视图。设置旋转（e.rot | | 0）；
}
});
//移动/旋转时同步
map.on（['moveend'，'rotateend']，函数（e）{
var view=map.getView（）；
WSynchro.synchronize({
pt:view.getCenter（），
z:view.getZoom（），
rot:view.getRotation（）
});
});
<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>