如何在Android应用程序中使用Cesium和GeoServer显示WMS图层？

Question

如何在Android应用程序中使用Cesium和GeoServer显示WMS图层？

3

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

我在真实设备和模拟器中遇到了以下错误和警告：

E/libEGL (23338): validate_display:255 error 3008 (EGL_BAD_DISPLAY) W/cr_media(23338): 需要蓝牙权限 W/VideoCapabilities(23338): 视频/avc的未识别配置文件2130706433 W/AudioCapabilities(23338): 不支持音频/alac格式 W/AudioCapabilities(23338): 不支持音频/dsd格式 W/VideoCapabilities(23338): 不支持视频/divx格式 W/VideoCapabilities(23338): 不支持视频/divx311格式 W/VideoCapabilities(23338): 不支持视频/divx4格式 W/VideoCapabilities(23338): 不支持视频/mp4v-esdp格式 I/VideoCapabilities(23338): 视频/mp4v-es的配置文件4不受支持 I/flutter (23338): 在FLUTTER Webview中打开html文件（用于cesium） I/flutter (23338): flutter测试webview I/chromium(23338): [INFO:CONSOLE(1)] "WebMapServiceImageryProvider中发生错误：无法获取图像瓦片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)] ................. WebMapServiceImageryProvider中发生错误：无法获取图像瓦片X:3 Y:1 Level:1。", source: 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

- mesh

很可能您正在尝试使用无法正确解释此代码的Webview应用程序版本，请尝试使用最新的Webview版本，看看是否可以在那里正常工作。 - user2638180

谢谢，但我已经使用了最新的Flutter WebView v0.3.21（https://pub.dev/packages/webview_flutter）。main.dart可以与其他HTML文件一起工作。但是它无法与这个cesium.html文件一起工作。 - mesh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- A. Mort · Accepted Answer

我会尝试将你的代码放入Cesium Sandcastle中，看看是否能够运行。这里有一个Cesium Sandcastle的示例，可以显示来自本地GeoServer的地图。

Cesium Sandcastle和GeoServer示例

如果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