Слой из геосервера не отображается в OpenLayers - PullRequest
Новая
       6

Слой из геосервера не отображается в OpenLayers

0 голосов
/ 25 марта 2020

Я установил пакет с npm и настроил localhost .. Я пытаюсь отобразить слой на карте, но он не отображается. Пожалуйста, помогите! Я застрял. Не уверен, что, возможно, проблема в разных портах, потому что мое приложение (localhost: 1995) и мой экземпляр геосервера (localhost: 8080) работают на разных портах и ​​используют разные порты. Кто-то объяснит? 

import 'ol/ol.css';
import 'ol-layerswitcher/src/ol-layerswitcher.css';

import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import LayerGroup from 'ol/layer/Group';
import LayerTile from 'ol/layer/Tile';
import SourceOSM from 'ol/source/OSM';
import SourceStamen from 'ol/source/Stamen';
import TileImage from 'ol/source/TileImage';
import LayerImage from 'ol/layer/Image';
import SourceImageArcGISRest from 'ol/source/ImageArcGISRest';
import TileWMS from 'ol/source/TileWMS';
import ImageWMS from 'ol/source/ImageWMS';

import LayerSwitcher from 'ol-layerswitcher';

var OSM = new LayerTile({
    title: 'OSM',
    source: new SourceOSM(),
    type: 'base',
    visible: true
});
var googleLayerRoadmap = new LayerTile({
    title: "Google Road Map",
    source: new TileImage({ url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' }),
    type: 'base'
});

var googleLayerSatellite = new LayerTile({
    title: "Google Satellite",
    source: new TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }),
    type: 'base'
});
var Odjel = new LayerTile({
    source: new TileWMS({
        url: 'http://localhost:8080/geoserver/cite/wms',
        params: {
            'LAYERS': 'cite:go_2',
        'TILED': 'true'},
        projection: 'EPSG:3857',
        serverType: 'geoserver'
    }),
    title: "Odjel"
});
Odjel.setVisible(true);
var map = new Map({
    target: 'map',
    layers: [
        new LayerGroup({
            title: 'BASE LAYERS',
            fold: 'open',
            layers: [OSM,googleLayerRoadmap,googleLayerSatellite
            ]
                }),
        new LayerGroup({
            title: 'Odjel',
            fold: 'open',
            layers: [Odjel]
        }),
        new LayerGroup({
            title: 'LAYERS',
            fold: 'open',
            layers: [
                new LayerImage({
                    // A layer must have a title to appear in the layerswitcher
                    title: 'Distrikti',
                    visible: false,
                    source: new SourceImageArcGISRest({
                        ratio: 1,
                        params: {'LAYERS': 'show:0'},
                        url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Census_Boundaries/Census_Merged_Local_Authority_Districts_December_2011_Boundaries/MapServer"
                    })
                }),
                new LayerImage({
                    // A layer must have a title to appear in the layerswitcher
                    title: 'Kantoni',
                    visible: false,
                    source: new SourceImageArcGISRest({
                        ratio: 1,
                        params: {'LAYERS': 'show:0'},
                        url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Census_Boundaries/Census_Merged_Wards_December_2011_Boundaries/MapServer"
                    })
                })
            ]
        })        
            ],
    view: new View({
        projection: 'EPSG:3857',
        center: transform([17.86339, 44.6054], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});
var layerSwitcher = new LayerSwitcher({
    groupSelectStyle: 'none' // Can be 'children' [default], 'group' or 'none'
});
map.addControl(layerSwitcher);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OL Mapa</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      #map {
        width: 800px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>

  
  </body>
</html>
...