Openlayers官网实例线下实现的解决方法

Openlayers官网提供了很多实例供GISer参考学习，但是最新官网实例是基于Openlayers5.3版本以及ECMAScript6语言开发，而行业内大部都用的openlayers3-4版本较多，这与市场存在一个新老版本开发的衔接问题。GIS开发初学者往往无从下手，因此，这里以snap interaction为例分享线下实现的过程，步骤如下：

1.css、js文件引用修改

官网实例引用文件主要基于官网的库文件，而且版本不一样，类似如下：
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
将上述代码修改为本地或自身版本（3.11.1）文件，如下：
<link  href="v3.11.1/css/ol.css" rel="stylesheet" type="text/css" />
<script src="v3.11.1/build/ol.js" type="text/javascript" ></script>

2.import语句删除
删掉官网实例中的import语句，但是要注意组件分布位置。删掉如下语句：

  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import {Draw, Modify, Select, Snap} from 'ol/interaction.js';
  import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
  import {OSM, Vector as VectorSource} from 'ol/source.js';
  import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js

3.修改组件位置
修改组件如TileLayer、OSM等，改为ol.layer.Tile、ol.source.OSM等（注意，实例中不仅仅只有这两句组件代码，要全面检查或通过浏览器监测）。
原代码：

  var raster = new TileLayer({
    source: new OSM()
  });

修改后：

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

最后，将我修改的全部代码分享如下（亲测可用）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Snap Interaction</title>
<link  href="v3.11.1/css/ol.css" rel="stylesheet" type="text/css" /><!-- 只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。 -->
<script src="v3.11.1/build/ol.js" type="text/javascript" ></script>

</head>
<body>

<div id="map" class="map"></div>
<form id="options-form" automplete="off">
  <div class="radio">
    <label>
      <input type="radio" name="interaction" value="draw" id="draw" checked>
      Draw &nbsp;
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="interaction" value="modify">
      Modify &nbsp;
    </label>
  </div>
  <div class="form-group">
    <label>Draw type &nbsp;</label>
    <select name="draw-type" id="draw-type">
      <option value="Point">Point</option>
      <option value="LineString">LineString</option>
      <option value="Polygon">Polygon</option>
      <option value="Circle">Circle</option>
    </select>
  </div>
</form>
<script>


  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

var vector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33'
        })
      })
    })
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

  var ExampleModify = {
    init: function() {
      this.select = new ol.interaction.Select();
      map.addInteraction(this.select);

      this.modify = new ol.interaction.Modify({
        features: this.select.getFeatures()
      });
      map.addInteraction(this.modify);

      this.setEvents();
    },
    setEvents: function() {
      var selectedFeatures = this.select.getFeatures();

      this.select.on('change:active', function() {
        selectedFeatures.forEach(function(each) {
          selectedFeatures.remove(each);
        });
      });
    },
    setActive: function(active) {
      this.select.setActive(active);
      this.modify.setActive(active);
    }
  };
  ExampleModify.init();

  var optionsForm = document.getElementById('options-form');

  var ExampleDraw = {
    init: function() {
      map.addInteraction(this.Point);
      this.Point.setActive(false);
      map.addInteraction(this.LineString);
      this.LineString.setActive(false);
      map.addInteraction(this.Polygon);
      this.Polygon.setActive(false);
      map.addInteraction(this.Circle);
      this.Circle.setActive(false);
    },
    Point: new ol.interaction.Draw({
      source: vector.getSource(),
      type: 'Point'
    }),
  LineString: new ol.interaction.Draw({
      source: vector.getSource(),
      type: 'LineString'
    }),
  Polygon: new ol.interaction.Draw({
      source: vector.getSource(),
      type: 'Polygon'
    }),
  Circle: new ol.interaction.Draw({
      source: vector.getSource(),
      type: 'Circle'
    }),
    getActive: function() {
      return this.activeType ? this[this.activeType].getActive() : false;
    },
    setActive: function(active) {
      var type = optionsForm.elements['draw-type'].value;
      if (active) {
        this.activeType && this[this.activeType].setActive(false);
        this[type].setActive(true);
        this.activeType = type;
      } else {
        this.activeType && this[this.activeType].setActive(false);
        this.activeType = null;
      }
    }
  };
  ExampleDraw.init();


  optionsForm.onchange = function(e) {
    var type = e.target.getAttribute('name');
    var value = e.target.value;
    if (type == 'draw-type') {
      ExampleDraw.getActive() && ExampleDraw.setActive(true);
    } else if (type == 'interaction') {
      if (value == 'modify') {
        ExampleDraw.setActive(false);
        ExampleModify.setActive(true);
      } else if (value == 'draw') {
        ExampleDraw.setActive(true);
        ExampleModify.setActive(false);
      }
    }
  };
  ExampleDraw.setActive(true);
  ExampleModify.setActive(false);
  var snap = new ol.interaction.Snap({
    source: vector.getSource()
  });
  map.addInteraction(snap);
</script>

</body>
</html>

转载请注明出处——哦哟哟哟哟哟哟哟哟哟

Openlayers官网实例线下实现的解决方法

哦哟哟哟哟哟哟哟

引用和评论

Openlayers中数字比例尺的实现方法

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

JavaScript&ES6----数组去重的多种方法

Base64编码的“暗坑”：解密失败？可能是这些原因！