How to display wms layer in android application using cesium and geoserver?

android flutter webview geoserver cesium

775

I would try putting your code into Cesium Sandcastle and see if it works.

Here is a sample of Cesium Sandcastle displaying maps from a local GeoServer.

Cesium Sandcastle with GeoServer example

If the Cesium Sandcastle fails, you will have to enable CORS in GeoServer. Go to GeoServer's webapps\geoserver\WEB-INF\web.xml and un-comment all CORS sections then restart GeoServer. https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors

775

Author by

mesh

I don't know anything but I'm trying to learn.

Updated on December 20, 2022

Comments

mesh over 1 year

I try add wms layer on cesium globe to display in android application. I'm using flutter webview plugin v0.3.21, geoserver v2.15.1 and cesium v1.69.

I get this errors and warnings in real device and emulator:

E/libEGL (23338): validate_display:255 error 3008 (EGL_BAD_DISPLAY) W/cr_media(23338): Requires BLUETOOTH permission W/VideoCapabilities(23338): Unrecognized profile 2130706433 for video/avc W/AudioCapabilities(23338): Unsupported mime audio/alac W/AudioCapabilities(23338): Unsupported mime audio/dsd W/VideoCapabilities(23338): Unsupported mime video/divx W/VideoCapabilities(23338): Unsupported mime video/divx311 W/VideoCapabilities(23338): Unsupported mime video/divx4 W/VideoCapabilities(23338): Unsupported mime video/mp4v-esdp I/VideoCapabilities(23338): Unsupported profile 4 for video/mp4v-es I/flutter (23338): Open html file (for cesium) in FLUTTER Webview I/flutter (23338): flutter test webview I/chromium(23338): [INFO:CONSOLE(1)] "An error occurred in "WebMapServiceImageryProvider": Failed to obtain image tile X: 0 Y: 0 Level: 0.", source: https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js (1) I/chromium(23338): [INFO:CONSOLE(1)] ................. An error occurred in "WebMapServiceImageryProvider": Failed to obtain image tile X: 3 Y: 1 Level: 1.", source: https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js (1)

Here is sourcecode

cesium.html

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css"
          rel="stylesheet">

</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:300px"></div>
<script>
var widget = new Cesium.CesiumWidget('cesiumContainer');
var url='http://localhost:8080/geoserver/wms/'; //Geoserver URL
var layers = widget.scene.globe.imageryLayers;
    layers.removeAll();
    layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
        url : url,
        layers: 'workspace:layer_name' 

    }));
  </script>
</body>
</html>

main.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

void main() => runApp(MaterialApp(home: LocalHtmlPage()));

class LocalHtmlPage extends StatefulWidget {
  @override
  _OpenHTMLPageState createState() => _OpenHTMLPageState();
}

class _OpenHTMLPageState extends State<LocalHtmlPage> {
  WebViewController _webViewController;
  String filePath = 'assets/cesium.html';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Cesium  Example')),
        body: WebView(
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _webViewController = webViewController;
            _loadHtmlFromAssets();
          },
          onPageStarted: (url) {
            //Invoked when a page starts loading.
            print('Open html file (for cesium) in FLUTTER Webview');
            EasyLoading.show(status: 'loading...');
          },
          onPageFinished: (url) {
            print('flutter test webview');
            EasyLoading.dismiss(animation: false);
          },
        ));
  }

  _loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString(filePath);
    _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }
}

pubspec.yaml

  cupertino_icons: ^0.1.3
  webview_flutter: ^0.3.21
  flutter_easyloading: ^1.1.4
  easy_web_view: ^1.2.0

mesh almost 4 years

My code and your example works, I tested them. But this examples not working in flutter app. I don't show map from geoserver. I wonder if I'm doing something wrong or missing.
A. Mort almost 4 years

If the Cesium Sandcastle can display your GeoServer map and you use the same Cesium WebMapServiceImageryProvider code in your Flutter app then you need to debug from Flutter. flutter.dev/docs/testing/debugging OR medium.com/flutter-community/…