OpenLayers学习笔记初级篇（二、地图基本功能的实现）

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

MagicMHD

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

阅读量1.9k

点赞数 6

分类专栏： WebGIS实战 OpenLayers

本文链接：https://blog.csdn.net/MagicMHD/article/details/91042309

版权

废话少说，咱们这节直接学习OpenLayers地图相关功能开发的demo。主要的地图功能包括：单页面多地图的相关功能开发、地图的上下左右移动及定位功能开发、限制地图范围开发、限制地图缩放层级开发和地图的自适配区域开发。

1、单页面多地图的开发,直接上代码如下：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>地图功能实现</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div style="width: 100%;height: 100%;">
    	<p>地图1</p>
		<div id="map1" style="width: 50%"></div>
		<p>地图2</p>
		<div id="map2" style="width: 50%"></div>
	</div>
<script>
    // 创建第一个地图
  new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map1'
  });

    // 创建第二个地图
    new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map2'
  });
</script>
</body>

</html>

然后运行以下，看一下效果图！

我们的一个页面就出现了两个地图，这个功能后期我们可以在做一些地图的分屏对比时用到！并且大家可以看到我们操纵一个地图时，另外一个地图是不会改变的。但是如果我们需要地图联动应该怎么办呢？别着急，我们有办法。代码如下：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>地图功能实现</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div style="width: 100%;height: 100%;">
    	<p>地图1</p>
		<div id="map1" style="width: 50%"></div>
		<p>地图2</p>
		<div id="map2" style="width: 50%"></div>
	</div>
<script>
	// 创建一个视图
    var view = new ol.View({
            center: [0, 0],
            zoom: 2
        });
   // 创建第一个地图
  new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: view,
        target: 'map1'
  });

    // 创建第二个地图
    new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],

最低0.47元/天解锁文章

MagicMHD

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers学习笔记初级篇（二、地图基本功能的实现）

废话少说，咱们这节直接学习OpenLayers地图相关功能开发的demo。主要的地图功能包括：单页面多地图的相关功能开发、地图的上下左右移动及定位功能开发、限制地图范围开发、限制地图缩放层级开发和地图的自适配区域开发。1、单页面多地图的开发,直接上代码如下：<!doctype html><html xmlns=http://www.w3.org/1999/xhtml&...
复制链接

扫一扫