java - Mapbox 和 GWT 集成

Question

我正在尝试使 MapBox Javascript 库与 GWT(Google Web Toolkit)一起使用。

下面是我正在使用的代码片段:

    HorizontalPanel horizontalPanel = new HorizontalPanel();
    horizontalPanel.setHeight("400px");
    horizontalPanel.setWidth("600px");
    horizontalPanel.getElement().setId("geo-map");

    ScriptInjector.fromUrl("https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js").setCallback(new Callback<Void, Exception>() {

        @Override
        public void onFailure(Exception reason) {

        }

        @Override
        public void onSuccess(Void result) {

            ScriptInjector.fromString("$wnd.$(document).ready(function() {" +
                            "console.log(\"Ok, it's me!\");" +
                            "L.mapbox.accessToken = \"Some Acess Token\";" +
                            "var map = L.mapbox.map(\"geo-map\", \"geo-map-id\").setView([40, -74.50], 9);" +
                            "console.log(\"Ok, it's me again!\");" +
                        "});").inject();

        }
    }).inject();

    // Add the nameField and sendButton to the RootPanel
    // Use RootPanel.get() to get the entire body element
    RootPanel.get("nameFieldContainer").add(horizontalPanel);

当我运行代码时，我收到以下异常:

[15:00:46.146] 错误:找不到 map 容器。 @https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js:1

提前致谢

更新:我终于让它工作了，我必须将 javascript 函数放在模块的 HTML 文件的 body 标记的末尾。

Answer 1

将 GWT 2.8 JsInterop 与 MapBox GL JS 结合使用如下:

1. 按照 MapBox Tutorial 在索引页上添加 css 和 js

2. 使 mapboxgl.Map 可用于您的 Java:

   @JsType(isNative = true, namespace = "mapboxgl")
   
    class Map {
   
       @JsOverlay
       private static long serial = 0L; 
   
       @JsConstructor
       protected Map(JavaScriptObject options) { }
   
       @JsOverlay
       public static Map build(AbsolutePanel panel) {
           return Map.build(panel, new JSONObject());
       }
   
       @JsOverlay
       public static Map build(AbsolutePanel panel, JSONObject mapOptions) {
   
           String id = "map" + serial++;
           mapOptions.put("container", new JSONString(id));
   
           panel.getElement().setId(id);
           Map result = new Map(mapOptions.getJavaScriptObject());     
           return result;
       }
   
   }
   

3. 稍后您可以向 Map 类添加其他方法、属性、事件

4. 使用参数 JSONObject mapOptions 设置 map 属性，例如:

   { 中心:[-122.420679, 37.772537],

   缩放:13，

   样式:'mapbox://styles/mapbox/dark-v9'}

5. 创建一个扩展 AbsolutePanel 的类以成为您的 map 小组件

   public class MapPanel extends AbsolutePanel {
   
   private static boolean accessTokenIsSet = false; 
   
   Map map;
   JSONObject mapOptions;
   MapPanel instance;
   
   public MapPanel(int width, int height) {
       this(width, height, new MapOptions());
   }
   
   public MapPanel(int width, int height, JSONObject mapOptions) {     
       instance = this;
       this.mapOptions = mapOptions;
   
       if ( !accessTokenIsSet ) {
           setAccessToken();
           accessTokenIsSet = true;
       }
   
       getElement().getStyle().setWidth(width, Unit.PX);
       getElement().getStyle().setHeight(height, Unit.PX);
       this.addEvents();
   }
   
   private void addEvents() {
       addAttachHandler(new AttachEvent.Handler() {
   
           @Override
           public void onAttachOrDetach(AttachEvent event) {
               if ( event.isAttached() ) {
                   map = Map.build(instance, mapOptions);
               }
   
           }
       });
   }
   
   private static native void setAccessToken() /*-{
       mapboxgl.accessToken = '<your-key>';
   }-*/;
   

   }

6. 实例化您的 MapPanel 小部件并在需要的地方添加

   JSONObject mapOptions = new JSONObject();
   
   JSONArray center = new JSONArray();
   center.set(0, new JSONNumber(-122.420679));
   center.set(1, new JSONNumber(37.772537));
   
   mapOptions.put("style", new JSONString("mapbox://styles/mapbox/streets-v9"));
   mapOptions.put("zoom", new JSONNumber(13));
   mapOptions.put("center", center);
   MapPanel mapPanel = new MapPanel(300, 300, mapOptions);
   RootPanel.get().add(mapPanel);