Question

有人可以给我一个例子吗，如何在OL5中集成ol-ext-library？

到目前为止，我已经从此处下载了.css和.js文件：https://github.com/Viglino/ol-ext/tree/master/dist

...到我的openlayers / dist目录。

我尝试通过以下方式将其链接到我的html文件中：

      <!-- ol-ext -->
  <link rel="stylesheet" href="openlayers/dist/ol-ext.css" />
  <script type="text/javascript" src="openlayers/dist/ol-ext.js"></script>

...然后我尝试“ npm run build” ...但出现了很多错误。有人成功加入了ol-ext并可以给我提示吗？

Answer 1

在我的应用程序中，我只使用与“ ol”相同的方法，例如，如果要使用“ Imageline”的“ ol-ext”，则只需导入

import Imageline from 'ol-ext/control/Imageline';

您无需在HTML文件中添加任何内容，也无需更改在代码中使用“ ol”库的方式。

希望它可以为您提供帮助

Answer 2

非常感谢，迈克，现在可以了。在index.html中，我需要：

<!DOCTYPE html>
<html>
<head>
 <!--<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<!-- jQuery -->

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link
rel="stylesheet"
href="https://viglino.github.io/ol-ext//dist/ol-ext.css"
/>
<meta charset="utf-8">
<title>k,ais test</title>
<style>
    #image {
      background-color: #eee;
      padding: 1em;
      clear: both;
      display: inline-block;
      margin: 1em 0;
    }


</style>
....
......

在index.js中，我使用下面提到的文件：


import "ol/ol.css";
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {transform} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import WKT from 'ol/format/WKT.js';
import {defaults as defaultControls} from 'ol/control.js';


import ol_control_Print from 'ol-ext/control/Print'



import {ScaleLine} from 'ol/control.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import TileWMS from 'ol/source/TileWMS.js'; 
import Static from 'ol/source/ImageStatic.js';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4.js';
import {get as getProjection} from 'ol/proj';
import BingMaps from 'ol/source/BingMaps.js';
import * as olProj from 'ol/proj';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Circle as CircleStyle,Fill, Stroke, Style, Text} from 'ol/style.js';



proj4.defs('EPSG:25832', '+proj=utm +zone=32 +x_0=-32000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
register(proj4);

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

var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({
layers: [osm,wmsLayer3,wmsLayer2],
target: 'map',
view: view
});

var printControl = new ol_control_Print();

map.addControl(printControl);



    printControl.on('print', function(e) {
      $('body').css('opacity', .1);
      alert ("hello");
    });
    printControl.on(['print', 'error'], function(e) {
      $('body').css('opacity', 1);
      alert ("hello2");
    });

Openlayers5和ol-ext

2 个答案: