openlayer3之地图联动

最新推荐文章于 2024-05-31 22:53:01 发布

「已注销」

最新推荐文章于 2024-05-31 22:53:01 发布

阅读量929

点赞数 1

分类专栏： webGIS之openlayer

本文链接：https://blog.csdn.net/Technology_liu/article/details/80802166

版权

webGIS之openlayer 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现起来超级简单，只要两张地图使用同一个view就可以了，主要代码如下所示:

**<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>地图2</title>
        <link rel="stylesheet" href="openlayers/ol.css" />
        <script type="text/javascript" src="openlayers/ol.js" ></script>        
    </head>
    <body>
        <p>地图1</p>
        <div class="map" id="map" style="width: 100%"></div>
        <p>地图2</p>
        <div class="map2" id="map2" style="width: 100%"></div>
        <script>

            var view=new ol.View({
                center:[0,0],
                zoom:2
            })
            //创建地图
            var map=new ol.Map({
                layers:[
                    //创建一个使用open Street Map 地图源的瓦片图层
                    new ol.layer.Tile({source: new ol.source.OSM()})
                ],
                //设置显示地图的视图
                view:view,
                //让id为map的div作为地图的容器
                target:'map'
            });
            var map2=new ol.Map({
                layers:[
                    new ol.layer.Tile({source: new ol.source.OSM()})
                ],
                view:view,
                target:'map2'
            })
        </script>
    </body>
</html>**

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
openlayer3之地图联动

实现起来超级简单，只要两张地图使用同一个view就可以了，主要代码如下所示:**&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;地图2&lt;/title&gt; &lt;link rel
复制链接

扫一扫