[HarmonyOS] Implementación de mapas en el desarrollo de metaservicios de código bajo

Durante el proceso de desarrollo del metaservicio, es posible que deba usar el mapa en la aplicación. Si usa el método de integración SDK, el tamaño del paquete SDK del mapa es muy grande. Después de la integración, el tamaño del metaservicio puede exceder los 10M , que supera el límite de tamaño del paquete HAP. Entonces, ¿hay alguna otra forma de usar mapas en metaservicios? El autor descubrió recientemente mientras estudiaba los documentos de metaservicio de desarrollo de código bajo recientemente lanzados por AGC que su plantilla de punto panorámico ( introducción de plantilla - metaservicio de desarrollo basado en plantillas - metaservicio de desarrollo de plataforma de código bajo - Centro de ayuda de AppGallery Connect | Huawei Developer Alliance (huawei .com) integra mapas, pero no importa mapas a través de SDK, y utiliza WebView+html local+Tencent Javascript API GL para implementar mapas. Permítame informarle sobre el proceso de implementación específico.

 

[GL de la API de Javascript de mapas de Tencent]

En primer lugar, encontramos el documento Javascript API GL JavaScript API | Tencent Location Service (qq.com) en el sitio web oficial de Tencent Maps .

1. Necesitamos registrar una cuenta y crear una aplicación y clave en la consola, y luego ejecutar la demostración para ver si el mapa se puede cargar normalmente.

cke_2348.png

2. Aquí copiamos el código del ejemplo en el archivo recién creado demo.html y colocamos el archivo demo.html en el directorio de recursos del proyecto HarmonyOS (entry/src/main/resources/rawfile/). Reemplace la clave aplicada anteriormente en el código de muestra <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script > la clave aquí

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Hello world!</title>
   <style type="text/css">
   #container{
       /*地图(容器)显示大小*/
       width:1200px;
       height:400px;
   }
   </style>
   <!--引入Javascript API GL,参数说明参见下文-->
   <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
   <script>
       //地图初始化函数,本例取名为init,开发者可根据实际情况定义
       function initMap() {
           //定义地图中心点坐标
           var center = new TMap.LatLng(39.984120, 116.307484)
           //定义map变量,调用 TMap.Map() 构造函数创建地图
           var map = new TMap.Map(document.getElementById('container'), {
               center: center,//设置地图中心点坐标
               zoom: 17.2,  //设置地图缩放级别
               pitch: 43.5, //设置俯仰角
               rotation: 45   //设置地图旋转角度
           });
       }
   </script>
</head>
<!-- 页面载入后,调用init函数 -->
<body "initMap()">
   <!-- 定义地图显示容器 -->
   <div id="container"></div>
</body>
</html>

3. Cabe señalar que Tencent Maps ya no admite file:// para usar Javascript API GL , por lo que no podemos usar esta API JS para cargar este archivo html local a través de WebView en Android

webView.loadUrl("file:///android_asset/demo.html");

cke_5976.png

¿Eso significa que estamos indefensos en HarmonyOS?

Sorprendentemente, por razones de seguridad, WebView en HarmonyOS no admite la carga de archivos de recursos o archivos locales directamente a través del protocolo de archivo. Pero puede cargar archivos html locales cargando direcciones https o http, de la siguiente manera:

webView.load("https://ejemplo.com/rawfile/ejemplo.html");

Esto resolvió exactamente nuestro problema.

 

[WebView carga HTML local]

Antes de cargar el mapa, debemos completar la configuración de permisos del proyecto. La aplicación utiliza un mapa web, por lo que el permiso de red debe solicitarse de la siguiente manera:

"reqPermissions": [
 {
   "name": "ohos.permission.INTERNET",
   "mergeRule": {
     "remove": [
       "reason"
     ]
   }
 }

]

Entonces, lo que debemos darnos cuenta es que WebView carga Html local. En el sitio web oficial, podemos encontrar métodos para cargar archivos de recursos y archivos locales ( WebView- guía de desarrollo de componentes comunes -Java UI framework -UI- Desarrollo basado en Java - desarrollo - Desarrollo de aplicaciones HarmonyOS )

Aquí, se accede al archivo a través del método processResourceRequest.El código específico es el siguiente:

WebView webView= (WebView) findComponentById(ResourceTable.Id_webview);
webView.getWebConfig().setJavaScriptPermit(true);
webView.getWebConfig().setWebStoragePermit(true);

webView.setWebAgent(new WebAgent() {
   @Override
   public ResourceResponse processResourceRequest(WebView webview, ResourceRequest request) {
       final String authority = "com.example.javawebmap";
       final String rawFile = "/rawfile/";
       Uri requestUri = request.getRequestUrl();
       if (authority.equals(requestUri.getDecodedAuthority())) {
           String path = requestUri.getDecodedPath();
           if (TextTool.isNullOrEmpty(path)) {
               return super.processResourceRequest(webview, request);
           }
           if (path.startsWith(rawFile)) {
               // 根据自定义规则访问资源文件
               String rawFilePath = "entry/resources/rawfile/" + path.replace(rawFile, "");
               String mimeType = URLConnection.guessContentTypeFromName(rawFilePath);
               try {
                   Resource resource = MainAbilitySlice.this.getContext().getResourceManager().getRawFileEntry(rawFilePath).openRawFile();
                   return new ResourceResponse(mimeType, resource, null);
               } catch (IOException e) {
                   HiLog.info(TAG, "open raw file failed " + e.getMessage());
               }
           }
       }
       return super.processResourceRequest(webview, request);
   }

});

Finalmente, cargamos el archivo local demo.html por carga

webView.load("https://com.example.javawebmap/rawfile/demo.html");

 

【resultado de ejecución】

Finalmente, podemos ver el efecto de ejecutar

cke_21912.png

Si necesitamos desarrollar más el mapa o interactuar con él, podemos usar el método webView.addJsCallback, que también se incluye en las instrucciones de uso de WebView anteriores. Hasta ahora hemos completado la carga de mapas simples a través de WebView y Tencent Maps Javascript API GL.

 

【Artículo de referencia】

Introducción a las plantillas - Desarrollo de metaservicios basados ​​en plantillas - Desarrollo de metaservicios en plataformas Low-Code - Centro de ayuda de AppGallery Connect | HUAWEI Developer Alliance (huawei.com)

WebView- guía de desarrollo de componentes comunes -Java UI framework -UI- Desarrollo basado en Java - Desarrollo -Desarrollo de aplicaciones HarmonyOS

API de JavaScript | Servicio de ubicación de Tencent (qq.com)

 

 

 Para obtener artículos técnicos más completos, visite https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

{{o.nombre}}
{{m.nombre}}

Supongo que te gusta

Origin my.oschina.net/u/4478396/blog/9029565
Recomendado
Clasificación