Mapbox和GWT集成

我想让MapBox Javascript库与GWT（Google Web Toolkit）一起工作。Mapbox和GWT集成

下面是代码的片段，我使用：

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]错误：找不到地图容器。 @https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js:1

由于提前

更新：我终于让它工作，我不得不把javascript函数在模块的我的HTML文件的body标签的结束。

来源

2014-10-28 Rafael Albani

我想你的代码，它的运行可能是你需要互联网连接来加载网址是没有发生，不知道我的猜测.. – JAVAC 2014-10-28 18:20:10

嗨@ SCK，我刚刚检查了互联网连接，没关系。同样的错误继续在这里弹出 – 2014-11-13 15:58:28

使用GWT 2.8 JsInterop与MapBox GL JS是这样的：

您的索引页上添加CSS和JS按照MapBox Tutorial

使其可用的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; 
    } 

}

你以后可以添加其他方法，属性，事件，以您的地图类
使用参数的JSONObject的MapOptions设置你的地图属性，例如：

{ 中心：-122.420679，37.772537]，

变焦：13，

风格：“mapbox：//款式/ mapbox /暗V9' }

创建扩展AbsolutePanel成为您的地图小工具

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>'; 
}-*/;

类

}

实例化MapPanel小部件，并添加需要的地方

JSONObject mapOptions = new JSONObject(); 

JSONArray center = new JSONArray(); 
center.set(0, new JSONNumber(-122.420679)); 
center.set(1, new JSONNumber(37.772537)); 

json.put("style", new JSONString("mapbox://styles/mapbox/streets-v9")); 
json.put("zoom", new JSONNumber(13)); 
json.put("center", center); 
MapPanel mapPanel = new MapPanel(300, 300, mapOptions); 
RootPanel.get().add(mapPanel);

来源

2017-08-31 23:38:06