四十、openlayers官网示例External map解析——打开一个外部小窗口展示地图

最新推荐文章于 2025-03-05 09:49:45 发布

原创

最新推荐文章于 2025-03-05 09:49:45 发布 · 672 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #openlayers官方示例 #openlayers #地图 #GIS

官网demo地址：

External map

这篇展示了外部窗口打开地图视图。

首先先初始化地图。

创建了一个UnusableMask类继承Control用来做主页面地图放进小窗口后的遮罩层，设置了自定义属性hidden来控制遮罩层的显隐。

initMap() {
      class UnusableMask extends Control {
        constructor() {
          super({
            element: document.createElement("div"),
          });
          this.element.setAttribute("hidden", "hidden");
          this.element.className = "ol-mask";
          this.element.innerHTML = "<div>地图不可用</div>";
        }
      }

      this.map = new Map({
        target: this.$refs.localMapTarget,
        controls: defaultControls().extend([
          new FullScreen(),
          new UnusableMask(),
        ]),
        layers: [
          new TileLayer({
            source: new StadiaMaps({
              layer: "stamen_watercolor",
            }),
          }),
        ],
        view: new View({
          center: fromLonLat([37.41, 8.82]),
          zoom: 4,
        }),
      });
    },

点击按钮时会触发openOutMap函数

使用window.open打开了一个html页面，使用window.open的参数对小窗窗口做一些设置。

 openOutMap() {
      this.$refs.btn.disabled = true;
      this.mapWindow = window.open(
        "resources/external-map-map.html",
        "MapWindow",
        "toolbar=0,location=0,menubar=0,width=800,height=600,top=130"
      );
    }

这里的external-map-map.html页面我是从openlayers源码中复制出来放到了public下。文件中需要引入一下样式文件。

最低0.47元/天解锁文章