Openlayers5 и ol-ext - PullRequest
Новая
       36

Openlayers5 и ol-ext

0 голосов
/ 28 октября 2019

Может ли кто-нибудь дать мне пример, как интегрировать библиотеку ol-ext в OL5?

Пока я скачал .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"запустить сборку "... но я получаю так много ошибок. Кто-нибудь успешно включил ol-ext и мог бы дать мне подсказку?

1 Ответ

1 голос
/ 29 октября 2019

Большое спасибо, Майк, теперь это работает. В 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");
    });
...