<!DOCTYPE html>
|
<html lang="en">
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<head>
|
<title>框选地图要素</title>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<script src="https://developer.fengmap.com/fmAPI/demos/libs/js/fengmap.map.min.js"></script>
|
<script src="https://developer.fengmap.com/fmAPI/demos/libs/js/fengmap.analyser.min.js"></script>
|
<script src="https://developer.fengmap.com/fmAPI/demos/libs/js/fengmap.plugin.draw.min.js"></script>
|
<script src="https://developer.fengmap.com/fmAPI/demos/libs/layui/layui.js"></script>
|
<link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/layui/css/layui.css">
|
<link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/font/iconfont.css">
|
<link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/index.css">
|
<link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/layui.css">
|
<link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/Application/boxSelectTool/css/index.css">
|
</head>
|
|
<body>
|
<div class="toolBarDiv"></div>
|
<div id="fengmap"></div>
|
<!-- 信息展示 -->
|
<div class="layui-card card">
|
<div class="layui-card-header"><i class="icon iconfont icon-tishi"></i>请尝试按住鼠标左键拖拽拉框以选择有名称的要素</div>
|
<div id="info"></div>
|
</div>
|
<div class="tableInfoBox">
|
<div class="title">
|
<button onclick="kq()">开启绘制功能</button>
|
<button onclick="closet()">关闭绘制功能</button>
|
</div>
|
<table id="demo" lay-filter="test" lay-skin="line"></table>
|
</div>
|
</body>
|
<script src="https://developer.fengmap.com/fmAPI/demos/libs/js/dispose.js"></script>
|
<script>
|
var map;
|
var boxselecttool;
|
var selectedModels = [];
|
var options = {
|
container: document.getElementById('fengmap'),
|
appName: '蜂鸟研发SDK_2_0',
|
key: '57c7f309aca507497d028a9c00207cf8',
|
mapID: '1514920297309614082',
|
themeID: '1580453922356207618',
|
viewMode: fengmap.FMViewMode.MODE_2D,
|
level: 5,
|
mapZoom: 19,
|
};
|
|
map = new fengmap.FMMap(options);
|
map.on('loaded', function () {
|
|
});
|
boxselecttool = new fengmap.FMBoxSelectTool(map);
|
|
|
function kq(){
|
boxselecttool.enable = true
|
boxselecttool.boxStyle = {
|
border: "border:5px solid #EEEE00",
|
backgroundColor: "#FF4040",
|
opacity: 0.5
|
}
|
//绘制完成事件
|
boxselecttool.on('boxselected', function (e) {
|
//重置上次选中model颜色
|
for (var i = 0; i < selectedModels.length; i++) {
|
selectedModels[i].resetColor();
|
}
|
selectedModels.length = 0;
|
//获取选中model
|
var targets = e.targets;
|
for (var i = 0; i < targets.length; i++) {
|
if (targets[i].type === fengmap.FMType.MODEL) {
|
var models = map.getNodes(targets[i].children);
|
for (var j = 0; j < models.length; j++) {
|
if (models[j].name != null) {
|
//将model颜色设置为0xff0000 透明度值为0.5
|
models[j].setColor(0xff0000, 0.5);
|
selectedModels.push(models[j]);
|
}
|
}
|
break;
|
}
|
}
|
});
|
}
|
|
function closet(){
|
boxselecttool.enable = false
|
}
|
/* 更新界面的点击信息 */
|
|
</script>
|
|
</html>
|
