地图和概览图能拆分成两个吗html？

Question

我需要使用 openlayers 创建地图和概览图。

地图 html 包含在 c# chromium (cefsharp) 控制器中。

但是，由于地图和概览图必须以不同的 chromium windows 显示，因此必须创建两个 html。

必须链接地图和概览。（移动地图的坐标时，总览图的坐标也要移动。）

Answer 1

请看一下这个解决方案：ol-ext: Extensions for 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>

地图和概览图能拆分成两个吗html？

Can the map and overview map be split into two html?

openlayers