OpenLayers 教程

在 Openlayers 中，View 是对地图视野的操作，有时候也被翻译为视图，主要是鼠标交互操作，如放大缩小拖动等。
本示例主要介绍： 限制显示范围、限制显示级别、限制拖动 。
Openlayers 视图（View）常用方法介绍

<html lang="en">
    <meta charset="utf-8">
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
    <style>
        /* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
        .map {
            height: 400px;
            width: 100%;
            float: left;
    </style>
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <script src="http://openlayers.vip/examples/resources/ol.js"></script>
    <script src="./tiandituLayers.js"></script>
    <title>OpenLayers example</title>
</head>
<h2>View</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<script type="text/javascript">
    var map = new ol.Map({
        // 地图容器
        target: 'map',
        // 地图图层，比如底图、矢量图等
        layers: [
            getIMG_CLayer(),
            getIBO_CLayer(),
            getCIA_CLayer(),
        // 地图视野
        view: new ol.View({
            projection: "EPSG:4326",
            // 定位
            center: [115.67724700667199, 37.73879478106912],
            // 缩放
            zoom: 6,
            maxZoom: 18,
            minZoom: 1,
    });
    // 获取地图视野对象
    var view = map.getView();
    // 限制显示范围
    function limitExtent(flag) {
        // 设置范围
        let extent = [116.27648, 39.84042, 116.4605, 39.9721];
        let viewExtent = new ol.View({
            projection: "EPSG:4326",
            //必须设置地图中心点
            center: ol.extent.getCenter(extent),
            zoom: 5,
            extent: extent
        flag ? map.setView(viewExtent) : map.setView(view);
    // 限制显示级别
    function limitZoom(flag) {
        view.setMinZoom(flag ? 5 : 1);
        view.setMaxZoom(flag ? 8 : 18);
        view.setZoom(5);
    // 禁止拖拽
    function limitDrag(falg) {
        // 这里是将所有交互都关闭了，可以选择只关闭鼠标，虽然效果不好
        map.getInteractions().forEach(element => {
            element.setActive(falg)//false禁止拖拽，true允许拖拽
</script>
<button id="limitExtent" onclick="limitExtent(true)">限制显示范围</button>
<button id="unLimitExtent" onclick="limitExtent(false)">解除限制显示范围</button>
<button id="limitZoom" onclick="limitZoom(true)">限制显示级别</button>
<button id="unLimitZoom" onclick="limitZoom(false)">解除限制显示级别</button>
<button id="limitDrag" onclick="limitDrag(false)">限制拖拽和滚轮</button>
<button id="unLimitDrag" onclick="limitDrag(true)">解除限制拖拽和滚轮</button>
</body>
</html>
Openlayers 图层常用操作：Openlayers view
				现在做webgis基本都会用到openlayers或者leaflet。那么在显示地图的时候，特别是显示小区域地图的时候，由于地图区域较小，就会存在把地图拖动到显示区域之外的现象。那么该如何限制地图拖动的区域呢。 
  在openlayers2中有restrictedExtent属性，直接设置下即可。
[javascript] view plain copy 
					全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
					06-11
出于防误操作的关系，我考虑到在地图绘制时禁止掉拖动地图的操作，在绘制结束才恢复回来。但直接用openlayer的Interaction的DragPan注册控件行不通，由此我实验得到以下两种方法。
方法一：利用draw里的freehand模式
核心就是多加入两个属性来限制draw的应用范围。
new ol.interaction.Draw({
		condition: ol.eve