如何使用 cesium 和 geoserver 在 android 应用程序中显示 wms 图层？

Question

我尝试在铯球上添加 wms 图层以显示在 android 应用程序中。我正在使用 flutter webview 插件 v0.3.21、geoserver v2.15.1 和 cesium v1.69。

我在真实设备和模拟器中收到此错误和警告：

E/libEGL (23338): validate_display:255 错误 3008 (EGL_BAD_DISPLAY) W/cr_media(23338)：需要蓝牙许可 W/VideoCapabilities(23338)：无法识别 video/avc 的配置文件 2130706433 W/AudioCapabilities(23338)：不支持的 mime audio/alac W/AudioCapabilities(23338)：不支持的 mime audio/dsd W/VideoCapabilities(23338)：不支持的 MIME video/divx W/VideoCapabilities(23338): 不支持的 mime video/divx311 W/VideoCapabilities(23338): 不支持的 mime video/divx4 W/VideoCapabilities(23338)：不支持的 MIME video/mp4v-esdp I/VideoCapabilities(23338)：video/mp4v-es 不支持配置文件 4 I/flutter (23338): 在 FLUTTER Webview 中打开 html 文件（对于铯） I/flutter (23338): flutter 测试 webview I/chromium(23338): [INFO:CONSOLE(1)] "An error occurred in "WebMapServiceImageryProvider": 无法获取图像切片 X: 0 Y: 0 级别: 0", 来源: https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js ( 1) I/chromium(23338)：[信息：控制台(1)] .......... "WebMapServiceImageryProvider" 发生错误：无法获取图像块 X: 3 Y: 1 级别：1."，来源：https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js (1)

这是源代码

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

Answer 1

我会尝试将您的代码放入 Cesium Sandcastle 中，看看它是否有效。

这里是 Cesium Sandcastle 的示例，显示了来自本地 GeoServer 的地图。

Cesium Sandcastle with GeoServer example

如果 Cesium Sandcastle 失败，您将必须在 GeoServer 中启用 CORS。转到 GeoServer 的 webapps\geoserver\WEB-INF\web.xml 并取消注释所有 CORS 部分，然后重新启动 GeoServer。 https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors

如何使用 cesium 和 geoserver 在 android 应用程序中显示 wms 图层？

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

android

flutter

webview

geoserver

cesium