From 44208f351fe102080a9939afeb455851359df13a Mon Sep 17 00:00:00 2001
From: xiaoyong931011 <15274802129@163.com>
Date: Tue, 13 Sep 2022 10:44:12 +0800
Subject: [PATCH] 20220902
---
src/main/resources/templates/febs/views/modules/leader/leaderMapSetting.html | 105 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 73 insertions(+), 32 deletions(-)
diff --git a/src/main/resources/templates/febs/views/modules/leader/leaderMapSetting.html b/src/main/resources/templates/febs/views/modules/leader/leaderMapSetting.html
index 04b2355..52543aa 100644
--- a/src/main/resources/templates/febs/views/modules/leader/leaderMapSetting.html
+++ b/src/main/resources/templates/febs/views/modules/leader/leaderMapSetting.html
@@ -1,21 +1,24 @@
<div class="layui-fluid layui-anim febs-anim" id="febs-map-demo-test" lay-title="高德地图">
<div class="layui-row febs-container">
- <div class="layui-card">
- <form class="layui-form layui-table-form" lay-filter="user-table-form">
- <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
- <div class="input-card" style="width: 120px">
- <button type="button" class="layui-btn layui-btn-danger" id="createPolygon" style="margin-bottom: 2px">新建围栏</button>
- </div>
- <div class="input-card" style="width: 120px">
- <button type="button" class="layui-btn layui-btn-danger" id="open" style="margin-bottom: 2px">开始编辑</button>
- </div>
- <div class="input-card" style="width: 120px">
- <button type="button" class="layui-btn layui-btn-danger" id="close" style="margin-bottom: 2px">结束编辑</button>
+ <div class="layui-col-md12">
+ <div class="layui-card">
+ <button type="button" id="createPolygon" style="margin-bottom: 2px">新建围栏
+ </button>
+ <button type="button" id="open" style="margin-bottom: 2px">开始编辑
+ </button>
+ <button type="button" id="close" style="margin-bottom: 2px">结束编辑
+ </button>
+ </div>
+ <div class="layui-form-item">
+ <div class="layui-input-block">
+ <div class="layui-row febs-container">
+ <div class="layui-card">
+ <div style="padding: .1rem;">
+ <div id="container" class="map"></div>
+ </div>
+ </div>
</div>
</div>
- </form>
- <div style="padding: .1rem;">
- <div id="container" class="map"></div>
</div>
</div>
</div>
@@ -35,41 +38,79 @@
center: [116.368904,39.913423],
zoom: 16.8
});
- var polyEditor = new AMap.PolygonEditor(map);
- // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
- var path = [
- new AMap.LngLat(116.368904,39.913423),
- new AMap.LngLat(116.382122,39.901176),
- new AMap.LngLat(116.387271,39.912501),
- new AMap.LngLat(116.398258,39.904600)
- ];
+ var polyEditor = new AMap.PolyEditor(map);
- // 创建折线实例
- var polyline = new AMap.Polyline({
- path: path,
- borderWeight: 2, // 线条宽度，默认为 1
- strokeColor: 'red', // 线条颜色
- lineJoin: 'round' // 折线拐点连接处样式
- });
-
- // 将折线添加至地图实例
- map.add(polyline);
//为地图注册click事件获取鼠标点击出的经纬度坐标
+ var path = [];
+ // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
+ // path = [
+ // new AMap.LngLat(116.368904,39.913423),
+ // new AMap.LngLat(116.382122,39.901176),
+ // new AMap.LngLat(116.387271,39.912501),
+ // new AMap.LngLat(116.387272,39.912502),
+ // new AMap.LngLat(116.387273,39.912503),
+ // new AMap.LngLat(116.487274,39.812504),
+ // new AMap.LngLat(116.398258,39.904600)
+ // ];
map.on('click', function (e) {
febs.alert.success('经度：' + e.lnglat.getLng() + '，纬度：' + e.lnglat.getLat());
+ let lngLat = new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat());
+ path.push(lngLat);
+ alert(path);
+
+
+ var polyline = new AMap.Polyline({
+ path: path,
+ borderWeight: 2, // 线条宽度，默认为 1
+ strokeColor: 'red', // 线条颜色
+ lineJoin: 'round' // 折线拐点连接处样式
+ });
+ // 将折线添加至地图实例
+ map.add(polyline);
});
+
+
+ // // 创建折线实例
+ // var polyline = new AMap.Polyline({
+ // path: path,
+ // borderWeight: 2, // 线条宽度，默认为 1
+ // strokeColor: 'red', // 线条颜色
+ // lineJoin: 'round' // 折线拐点连接处样式
+ // });
+ //
+ //
+ //
+ // // 将折线添加至地图实例
+ // map.add(polyline);
+
$createPolygon.on('click', function () {
febs.alert.success('点击新建');
+ polyEditor.close();
+ polyEditor.open();
});
$open.on('click', function () {
febs.alert.success('开始编辑');
+ path.splice(path.length -1);
+
+
+ alert(path);
+
+ var polyline = new AMap.Polyline({
+ path: path,
+ borderWeight: 2, // 线条宽度，默认为 1
+ strokeColor: 'red', // 线条颜色
+ lineJoin: 'round' // 折线拐点连接处样式
+ });
+ // 将折线添加至地图实例
+ map.add(polyline);
});
$close.on('click', function () {
febs.alert.success('结束编辑');
});
+
});
</script>
\ No newline at end of file
--
Gitblit v1.9.1