93 lines
3.0 KiB
HTML
93 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>MapVGL</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map_container {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script>
|
|
// 这里一定要配置ak 否则无法使用
|
|
window.BMAP_AUTHENTIC_KEY = "mokVj0S4sGE9av6NBwy8WHY0xnQsucbE"
|
|
</script>
|
|
<script type="text/javascript" src="./script/getscript.js?type=webgl&v=1.0&services=&t=20230529114224"></script>
|
|
<!-- 引入logisticsgl的sdk -->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<button onclick="click1()">添加数据</button>
|
|
<button onclick="click2()">删除数据</button>
|
|
<button onclick="click3()">居中显示</button>
|
|
<button onclick="click4()">设置活跃</button>
|
|
<button onclick="click5()">清空活跃</button>
|
|
<button onclick="click6()">获取详情</button>
|
|
<button onclick="click7()">当前活跃code</button>
|
|
<div id="map_container"></div>
|
|
<script type="text/javascript" src="./logisticsgl.min.js"></script>
|
|
|
|
<script>
|
|
var map = new BMapGL.Map('map_container'); // 创建Map实例
|
|
map.centerAndZoom(new BMapGL.Point(121.39649601540773, 31.01073334206529), 14);
|
|
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
|
var shapeLayer = logisticsgl.createAdministrationLayer(
|
|
map,
|
|
{
|
|
lineColor: 'green', // 线颜色
|
|
lineWidth: 4, // 线宽
|
|
fillColor: "red", // 填充颜色
|
|
enablePicked: true, // 是否可以拾取
|
|
// hoverColor: '#ffffff', // 鼠标hover项颜色
|
|
// autoSelect: true, // 根据鼠标位置来自动设置选中项
|
|
activeFillColor: "yellow", // 活跃项填充颜色
|
|
activeLineColor: "yellow", // 活跃项线颜色
|
|
ak: "L7KaAZUYPVSD40nYT09rWWgIdZKUesiX",
|
|
onClick: (data) => { // 点击事件
|
|
console.log(data);
|
|
}
|
|
});
|
|
function click1() {
|
|
shapeLayer.addAdmins(['130633200202', '130633200203', '130633200204', '130633200205'])
|
|
}
|
|
|
|
function click2() {
|
|
shapeLayer.removeAdmins(['130633200202'])
|
|
}
|
|
function click3() {
|
|
shapeLayer.setViewport(['130633200202'])
|
|
}
|
|
function click4() {
|
|
shapeLayer.setActives(['130633200202'])
|
|
}
|
|
function click5() {
|
|
shapeLayer.setActives([])
|
|
}
|
|
function click6() {
|
|
shapeLayer.getDetails(["130633200202"]).then((data) => {
|
|
console.log(data);
|
|
})
|
|
}
|
|
function click7() {
|
|
console.log("active=",shapeLayer.getActives())
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|