<%--
|
Created by IntelliJ IDEA.
|
User: Administrator
|
Date: 2023/5/24
|
Time: 13:37
|
To change this template use File | Settings | File Templates.
|
--%>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<html>
|
<head>
|
<title>Title</title>
|
</head>
|
<body>
|
<div id="map_container"></div>
|
</body>
|
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.159/dist/mapvgl.min.js"></script>
|
|
<!-- 如果使用到Three.js相关的图层需要引用 -->
|
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.159/dist/mapvgl.threelayers.min.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script>
|
<script>
|
// 1. 创建地图实例
|
var bmapgl = new BMapGL.Map('map_container');
|
var point = new BMapGL.Point(116.403748, 39.915055);
|
bmapgl.centerAndZoom(point, 17);
|
|
// 2. 创建MapVGL图层管理器
|
var view = new mapvgl.View({
|
map: bmapgl
|
});
|
|
// 3. 创建可视化图层，并添加到图层管理器中
|
var layer = new mapvgl.PointLayer({
|
color: 'rgba(50, 50, 200, 1)',
|
blend: 'lighter',
|
size: 2
|
});
|
view.addLayer(layer);
|
|
// 4. 准备好规范化坐标数据
|
var data = [{
|
geometry: {
|
type: 'Point',
|
coordinates: [116.403748, 39.915055]
|
}
|
}];
|
|
// 5. 关联图层与数据，享受震撼的可视化效果
|
layer.setData(data);
|
</script>
|
</html>
|
