今天在使用百度地图API的javascriptAPI中的BMapGL绘制热力图的时候发现了个奇怪的问题。
在浏览器中打开本地编写的HTML文件后，可以正常显示HeatMap图层，但是同一个html文件在javafx窗口中加载后无法显示heatMap图层。因为目前正在做毕业设计，所以必须要在窗口组件中实现html的加载和显示热力图。所以想问一下各位程序员，这个问题如何解决？
问题预览图如下：
在窗口中无法显示heatMap图层但是可以正常显示其他控件
浏览器中可以正常显示heatMap图层和其他的控件
java的窗口显示代码如下：
package com.example.demo;
import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
// 加载HTML文件
webEngine.load(getClass().getResource("/com/example/demo/htmlPane.html").toExternalForm());
// 监听页面加载完成事件
webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
if (newValue == Worker.State.SUCCEEDED) {
// 向HTML传递参数
System.out.println("done");
}
});
StackPane root = new StackPane();
root.getChildren().add(webView);
primaryStage.setScene(new Scene(root, 800, 600));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=我的AK"></script>
<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
<title>设置地图3D视角</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMapGL.Map("allmap", {
enableRotate: false,
enableTilt: false
});
map.centerAndZoom(new BMapGL.Point(114.356585, 30.547554), 13);
map.enableScrollWheelZoom(true);
var circle = new BMapGL.Circle(new BMapGL.Point(114.356585, 30.547554), 1000, {strokeColor:"red",strokeWeight: 2, strokeOpacity: 1});
var scaleCtrl = new BMapGL.ScaleControl();
var zoomCtrl = new BMapGL.ZoomControl();
var cityList = new BMapGL.CityListControl();
map.addControl(scaleCtrl);
map.addControl(zoomCtrl);
map.addControl(cityList);
map.addOverlay(circle);
var data = [{geometry: {type: 'Point',coordinates: [114.2967998,30.52101608]},properties: {count:2}},{geometry: {type: 'Point',coordinates: [114.2878168,30.60497665]},properties: {count:9}},{geometry: {type: 'Point',coordinates: [114.8753086,30.95402051]},properties: {count:1}},{geometry: {type: 'Point',coordinates: [114.0255116,30.45099293]},properties: {count:9}},{geometry: {type: 'Point',coordinates: [114.2896134,30.61430107]},properties: {count:4}},{geometry: {type: 'Point',coordinates: [114.2950032,30.69818003]},properties: {count:1}},{geometry: {type: 'Point',coordinates: [114.3201558,30.69818003]},properties: {count:4}},{geometry: {type: 'Point',coordinates: [114.0201218,30.68886378]},properties: {count:2}},{geometry: {type: 'Point',coordinates: [114.3111727,30.33729167]},properties: {count:2}},{geometry: {type: 'Point',coordinates: [113.9770031,30.61274707]},properties: {count:1}},{geometry: {type: 'Point',coordinates: [114.314766,30.56922464]},properties: {count:5}},{geometry: {type: 'Point',coordinates: [114.4153762,30.51946057]},properties: {count:22}},{geometry: {type: 'Point',coordinates: [114.3506982,30.54434582]},properties: {count:5}},{geometry: {type: 'Point',coordinates: [115.0046646,30.83781474]},properties: {count:1}},{geometry: {type: 'Point',coordinates: [114.8106306,30.84556622]},properties: {count:1}},{geometry: {type: 'Point',coordinates: [114.5249694,30.48834494]},properties: {count:8}},{geometry: {type: 'Point',coordinates: [114.314766,30.628286]},properties: {count:4}},{geometry: {type: 'Point',coordinates: [114.4261558,30.45721927]},properties: {count:9}},{geometry: {type: 'Point',coordinates: [114.6309695,30.49456887]},properties: {count:1}},{geometry: {type: 'Point',coordinates: [114.2932066,30.51634946]},properties: {count:3}}];
var heatmapLayer = new mapvgl.HeatmapLayer({size: 300, max: 20, height: 0, unit: 'm', gradient:{0.0: 'rgb(50, 50, 256)',0.1: 'rgb(50, 250, 56)',0.5: 'rgb(250, 250, 56)',1.0: 'rgb(250, 50, 56)'}});
var view = new mapvgl.View({map:map});
view.addLayer(heatmapLayer);
heatmapLayer.setData(data);
</script>
