如何使用 cesium 和 geoserver 在 android 应用程序中显示 wms 层？
Posted
技术标签:
【中文标题】如何使用 cesium 和 geoserver 在 android 应用程序中显示 wms 层？【英文标题】：How to display wms layer in android application using cesium and geoserver? 【发布时间】：2020-09-01 10:20:18 【问题描述】：我尝试在 cesium 地球上添加 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)：视频/avc 无法识别的配置文件 2130706433 W/AudioCapabilities(23338)：不支持的 mime 音频/alac W/AudioCapabilities(23338)：不支持的 mime 音频/dsd W/VideoCapabilities(23338)：不支持的 mime 视频/divx W/VideoCapabilities(23338)：不支持的 mime 视频/divx311 W/VideoCapabilities(23338)：不支持的 mime 视频/divx4 W/VideoCapabilities(23338)：不支持的 mime 视频/mp4v-esdp I/VideoCapabilities(23338)：视频/mp4v-es 不支持的配置文件 4 I/flutter (23338)：在 FLUTTER Webview 中打开 html 文件（用于 cesium） I/flutter (23338): 颤振测试webview I/chromium(23338): [INFO:CONSOLE(1)] ""WebMapServiceImageryProvider" 发生错误: 未能获取图像平铺 X: 0 Y: 0 Level: 0.", 来源: https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js (1) 我/铬（23338）：[信息：控制台（1）] ..................... “WebMapServiceImageryProvider”出错：获取图片瓦片失败X:3 Y:1 Level: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
【问题讨论】：
您可能正在尝试使用无法正确解释此代码的 webview 应用程序版本，请尝试使用最后一个 webview 版本，看看它是否在那里正常工作。 谢谢，但我已经使用了最后一个 Flutter webview v0.3.21 (pub.dev/packages/webview_flutter)。 main.dart 与另一个 html 文件一起使用。但它不适用于这个 cesium.html 文件。 【参考方案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 Sandcastle 可以显示您的 GeoServer 地图并且您在 Flutter 应用程序中使用相同的 Cesium WebMapServiceImageryProvider 代码，那么您需要从 Flutter 进行调试。 flutter.dev/docs/testing/debugging 或 medium.com/flutter-community/…以上是关于如何使用 cesium 和 geoserver 在 android 应用程序中显示 wms 层？的主要内容，如果未能解决你的问题，请参考以下文章
cesium 结合 geoserver 实现地图属性查询(附源码下载)
cesium结合geoserver实现地图空间查询(附源码下载)
cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)