AILabel.js之实例7：绘制矩形
一个核心Map类：AILabel.Map
五大—核心图层类：
图像层实例化：AILabel.Layer.Image
矢量数据层：AILabel.Layer.Feature
涂抹层：AILabel.Layer.Mask
标注图层：AILabel.Layer.Marker
文本图层：AILabel.Layer.Text
四大—绘制标注特征类：
点：AILabel.Feature.Point
多线段：AILabel.Feature.Polyline
矩形：AILabel.Feature.Rect
多边形：AILabel.Feature.Polygon
六大—常用工具类
标注对象：AILabel.Marker
文本对象：AILabel.Text
控件—缩略图：AILabel.Control.EagleMap
控件—比例尺： AILabel.Control.Scale
样式对象：AILabel.Style
工具库：AILabel.Util
名词解释：
1.zoom：zoom值的意思就是缩放值，即显示容器的宽所代表的实际距离宽；比如容器宽度是1000px，而此时如果设置zoom为2000，则zoom的意思就是1000px宽的容器所指代的实际距离是2000
步骤1：定义容器div的id和引入AILabel库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 定义div容器 -->
<div id="drawRectMap"></div>
</body>
<!-- 导入AILabel.js -->
<script src="AILabel.pkg.min.js"></script>
</html>
步骤2：设定div（drawRectMap）的高宽，边框，相对定位模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#drawRectMap{
/* 相对定位 */
position: relative;
/* 居中 */
margin: auto;
/* 高宽 */
height: 600px;
width: 800px;
/* 边框 */
border: 1px solid #000;
}
</style>
<body>
<!-- 定义div容器 -->
<div id="drawRectMap"></div>
</body>
<!-- 导入AILabel.js -->
<script src="AILabel.pkg.min.js"></script>
</html>
步骤3：显示图像层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#drawRectMap{
/* 相对定位 */
position: relative;
/* 居中 */
margin: auto;
/* 高宽 */
height: 600px;
width: 800px;
/* 边框 */
border: 1px solid #000;
}
</style>
<body>
<!-- 定义div容器 -->
<div id="drawRectMap"></div>
</body>
<!-- 导入AILabel.js -->
<script src="AILabel.pkg.min.js"></script>
<script>
// step1:容器对象声明
let gMap = new AILabel.Map(
//参数1：containerId
'drawRectMap', // 容器div的id
// 参数2：config类
{
zoom:800, // 初始缩放级别
cx:0, // 初始中心点坐标x
cy:0, //初始中心点坐标y
zoomMax:650*10, // 缩放最大级别 默认无极限
zoomMin:650/10, // 缩放最小级别 默认无极限
autoFeatureSelect:true, // 默认是否双击选中feature
}
);
// step2:声明绘制矩形线宽和颜色
const gFetureStyle = new AILabel.Style({strokeColor:'#0000FF', lineWeight: 2})
// step3:设置当前map的操作模式是绘制矩形=drawRect
gMap.setMode('drawRect',gFetureStyle)
// step4:图片层实例添加
let gImageLayer = new AILabel.Layer.Image(
'img', // 实例图层唯一标志id
'./images/9.jpg', // 图像src
{w:800,h:600}, // 图像显示宽高，单位就是缩放比例。当map容器宽度800px和zoom一致800px，即表示px单位
{zIndex:1},//z-index 属性指定一个元素的堆叠顺序。
);
// step5:将图像层添加到map中进行显示
gMap.addLayer(gImageLayer)
</script>
</html>
步骤4：添加矢量数据层和绘制标注矩形框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#drawRectMap{
/* 相对定位 */
position: relative;
/* 居中 */
margin: auto;
/* 高宽 */
height: 600px;
width: 800px;
/* 边框 */
border: 1px solid #000;
}
</style>
<body>
<!-- 定义div容器 -->
<div id="drawRectMap"></div>
</body>
<!-- 导入AILabel.js -->
<script src="AILabel.pkg.min.js"></script>
<script>
// step1:容器对象声明
let gMap = new AILabel.Map(
//参数1：containerId
'drawRectMap', // 容器div的id
// 参数2：config类
{
zoom:800, // 初始缩放级别
cx:0, // 初始中心点坐标x
cy:0, //初始中心点坐标y
zoomMax:650*10, // 缩放最大级别 默认无极限
zoomMin:650/10, // 缩放最小级别 默认无极限
autoFeatureSelect:true, // 默认是否双击选中feature
}
);
// step2:声明绘制矩形线宽和颜色
const gFetureStyle = new AILabel.Style({strokeColor:'#0000FF', lineWeight: 2})
// step3:设置当前map的操作模式是绘制矩形=drawRect
gMap.setMode('drawRect',gFetureStyle)
// step4:图片层实例添加
let gImageLayer = new AILabel.Layer.Image(
'img', // 实例图层唯一标志id
'./images/9.jpg', // 图像src
{w:800,h:600}, // 图像显示宽高，单位就是缩放比例。当map容器宽度800px和zoom一致800px，即表示px单位
{zIndex:1},//z-index 属性指定一个元素的堆叠顺序。
);
// step5:将图像层添加到map中进行显示
gMap.addLayer(gImageLayer)
// step6:添加矢量数据层
let gFeatureLayer = new AILabel.Layer.Feature(
// 参数1:实例图层唯一标志id
'featureLayer',
// 参数2:config
{
zIndex: 2, // 堆叠顺序
transparent: true // 透明
}
)
// step7:将矢量数据层添加到map中准备进行feature的添加
gMap.addLayer(gFeatureLayer)
// step8:gMap设置“绘制完成-geometryDrawDone”监听事件
gMap.events.on('geometryDrawDone',function(type,points)
{
// 生成元素唯一标志（时间戳）
const timestamp = new Date().getTime();
// 定义矩形标注
let fea = new AILabel.Feature.Rect(
`feature-${timestamp}`,
points,
{name:'矩形1222'},
gFeatureLayer);
// 将绘制标注，添加进矢量数据图层
gFeatureLayer.addFeature(fea);
})
</script>
</html>
步骤5：添加删除标记图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#drawRectMap{
/* 相对定位 */
position: relative;
/* 居中 */
margin: auto;
/* 高宽 */
height: 600px;
width: 800px;
/* 边框 */
border: 1px solid #000;
}
</style>
<body>
<!-- 定义div容器 -->
<div id="drawRectMap"></div>
</body>
<!-- 导入AILabel.js -->
<script src="AILabel.pkg.min.js"></script>
<script>
// step1:容器对象声明
let gMap = new AILabel.Map(
//参数1：containerId
'drawRectMap', // 容器div的id
// 参数2：config类
{
zoom:800, // 初始缩放级别
cx:0, // 初始中心点坐标x
cy:0, //初始中心点坐标y
zoomMax:650*10, // 缩放最大级别 默认无极限
zoomMin:650/10, // 缩放最小级别 默认无极限
autoFeatureSelect:true, // 默认是否双击选中feature
}
);
// step2:声明绘制矩形线宽和颜色
const gFetureStyle = new AILabel.Style({strokeColor:'#0000FF', lineWeight: 2})
// step3:设置当前map的操作模式是绘制矩形=drawRect
gMap.setMode('drawRect',gFetureStyle)
// step4:图片层实例添加
let gImageLayer = new AILabel.Layer.Image(
'img', // 实例图层唯一标志id
'./images/9.jpg', // 图像src
{w:800,h:600}, // 图像显示宽高，单位就是缩放比例。当map容器宽度800px和zoom一致800px，即表示px单位
{zIndex:1},//z-index 属性指定一个元素的堆叠顺序。
);
// step5:将图像层添加到map中进行显示
gMap.addLayer(gImageLayer)
// step6:添加矢量数据层
let gFeatureLayer = new AILabel.Layer.Feature(
// 参数1:实例图层唯一标志id
'featureLayer',
// 参数2:config
{
zIndex: 2, // 堆叠顺序
transparent: true // 透明
}
)
// step7:将矢量数据层添加到map中准备进行feature的添加
gMap.addLayer(gFeatureLayer)
// step8:gMap设置“绘制完成-geometryDrawDone”监听事件
gMap.events.on('geometryDrawDone',function(type,points)
{
// 生成元素唯一标志（时间戳）
const timestamp = new Date().getTime();
// 定义矩形标注
let fea = new AILabel.Feature.Rect(
`feature-${timestamp}`,
points,
{name:'矩形1222'},
gFeatureLayer);
// 将绘制标注，添加进矢量数据图层
gFeatureLayer.addFeature(fea);
})
// step9:gMap注册特征标注选中事件
gMap.events.on('featureSelected', function (feature) {
let cFeature = feature;
// 删除按钮添加
const featureBounds = cFeature.getBounds(); //获取feature最小外接矩形。
const leftTopPoint = featureBounds[0]; // 边界左上角坐标
// 删除标注图标
let deleteMarker = new AILabel.Marker(
// 参数1：id
`marker-${cFeature.id}`,
// 参数2：config
{
src: './images/x.png', //图标src
x: leftTopPoint.x, // 标注位置
y: leftTopPoint.y,
// 标注图标展示偏移量，如{x:, y:}
offset: {
x: 0,
y: 0
},
featureId: cFeature.id
});
// 添加删除图标到标记图层
gMap.mLayer.addMarker(deleteMarker);
// 删除图标添加点击删除事件
deleteMarker.regEvent('click', function () {
// 执行选中元素删除
gFeatureLayer.removeFeatureById(this.info.featureId);
// 对应删除标注层中删除（x）icon
gMap.mLayer.removeAllMarkers();
});
});
// step10:gMap注册编辑进行中事件，设置删除标记跟随
gMap.events.on('geometryEditing', function (type, feature, points) {
// 如果没有mLayer层，直接返回
if (!gMap.mLayer) return;
// 获取标志图像
const marker = gMap.mLayer.getMarkerById(`marker-${feature.id}`);
// 如果没有标志图像，则直接返回
if (!marker) return;
// 获取最小外接矩形
const bounds = AILabel.Util.getBounds(points);
// 边界左上角坐标
const leftTopPoint = bounds[0];
// 更新删除标志图标
marker.update({x: leftTopPoint.x, y: leftTopPoint.y});
});
</script>
</html>
步骤6：设置编辑结束事件和窗口改变大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#drawRectMap{
/* 相对定位 */
position: relative;
/* 居中 */
margin: auto;
/* 高宽 */
height: 600px;
width: 800px;
/* 边框 */
border: 1px solid #000;
}
</style>
<body>
<!-- 定义div容器 -->
<div id="drawRectMap"></div>
</body>
<!-- 导入AILabel.js -->
<script src="AILabel.pkg.min.js"></script>
<script>
// step1:容器对象声明
let gMap = new AILabel.Map(
//参数1：containerId
'drawRectMap', // 容器div的id
// 参数2：config类
{
zoom:800, // 初始缩放级别
cx:0, // 初始中心点坐标x
cy:0, //初始中心点坐标y
zoomMax:650*10, // 缩放最大级别 默认无极限
zoomMin:650/10, // 缩放最小级别 默认无极限
autoFeatureSelect:true, // 默认是否双击选中feature
}
);
// step2:声明绘制矩形线宽和颜色
const gFetureStyle = new AILabel.Style({strokeColor:'#0000FF', lineWeight: 2})
// step3:设置当前map的操作模式是绘制矩形=drawRect
gMap.setMode('drawRect',gFetureStyle)
// step4:图片层实例添加
let gImageLayer = new AILabel.Layer.Image(
'img', // 实例图层唯一标志id
'./images/9.jpg', // 图像src
{w:800,h:600}, // 图像显示宽高，单位就是缩放比例。当map容器宽度800px和zoom一致800px，即表示px单位
{zIndex:1},//z-index 属性指定一个元素的堆叠顺序。
);
// step5:将图像层添加到map中进行显示
gMap.addLayer(gImageLayer)
// step6:添加矢量数据层
let gFeatureLayer = new AILabel.Layer.Feature(
// 参数1:实例图层唯一标志id
'featureLayer',
// 参数2:config
{
zIndex: 2, // 堆叠顺序
transparent: true // 透明
}
)
// step7:将矢量数据层添加到map中准备进行feature的添加
gMap.addLayer(gFeatureLayer)
// step8:gMap设置“绘制完成-geometryDrawDone”监听事件
gMap.events.on('geometryDrawDone',function(type,points)
{
// 生成元素唯一标志（时间戳）
const timestamp = new Date().getTime();
// 定义矩形标注
let fea = new AILabel.Feature.Rect(
`feature-${timestamp}`,
points,
{name:'矩形1222'},
gFeatureLayer);
// 将绘制标注，添加进矢量数据图层
gFeatureLayer.addFeature(fea);
})
// step9:gMap注册特征标注选中事件
gMap.events.on('featureSelected', function (feature) {
let cFeature = feature;
// 删除按钮添加
const featureBounds = cFeature.getBounds(); //获取feature最小外接矩形。
const leftTopPoint = featureBounds[0]; // 边界左上角坐标
// 删除标注图标
let deleteMarker = new AILabel.Marker(
// 参数1：id
`marker-${cFeature.id}`,
// 参数2：config
{
src: './images/x.png', //图标src
x: leftTopPoint.x, // 标注位置
y: leftTopPoint.y,
// 标注图标展示偏移量，如{x:, y:}
offset: {
x: 0,
y: 0
},
featureId: cFeature.id
});
// 添加删除图标到标记图层
gMap.mLayer.addMarker(deleteMarker);
// 删除图标添加点击删除事件
deleteMarker.regEvent('click', function () {
// 执行选中元素删除
gFeatureLayer.removeFeatureById(this.info.featureId);
// 对应删除标注层中删除（x）icon
gMap.mLayer.removeAllMarkers();
});
});
// step10:gMap注册编辑进行中事件，设置删除标记跟随
gMap.events.on('geometryEditing', function (type, feature, points) {
// 如果没有mLayer层，直接返回
if (!gMap.mLayer) return;
// 获取标志图像
const marker = gMap.mLayer.getMarkerById(`marker-${feature.id}`);
// 如果没有标志图像，则直接返回
if (!marker) return;
// 获取最小外接矩形
const bounds = AILabel.Util.getBounds(points);
// 边界左上角坐标
const leftTopPoint = bounds[0];
// 更新删除标志图标
marker.update({x: leftTopPoint.x, y: leftTopPoint.y});
});
// step11:gMap注册编辑结束事件
gMap.events.on('geometryEditDone',function(type, activeFeature, points)
{
activeFeature.update({points});
activeFeature.show();
})
// step12:绑定窗口改变大小事件
window.onresize = function () {
gMap && gMap.resize();
};
</script>
</html>
扫一扫
6100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
