From d4801f6c6d821c3b1ebd6174498149ee0e0159ee Mon Sep 17 00:00:00 2001
From: xiaoyong931011 <15274802129@163.com>
Date: Thu, 22 Sep 2022 14:49:04 +0800
Subject: [PATCH] 20220902
---
src/main/resources/templates/febs/views/modules/leader/leaderMapSetting.html | 111 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 77 insertions(+), 34 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..b87ebca 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>
@@ -32,33 +35,57 @@
$view.find('#container').css({"height": document.documentElement.clientHeight - 97 + 'px'});
var map = new AMap.Map("container", {
- 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)
- ];
+ // center: [116.368904,39.913423],
- // 创建折线实例
- var polyline = new AMap.Polyline({
- path: path,
- borderWeight: 2, // 线条宽度，默认为 1
- strokeColor: 'red', // 线条颜色
- lineJoin: 'round' // 折线拐点连接处样式
+ resizeEnable: true,
+ zoom: 14
});
-
- // 将折线添加至地图实例
- map.add(polyline);
+ var polyEditor = new AMap.PolyEditor(map);
//为地图注册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);
+ console.log(path.toString());
});
+
+
+ // // 创建折线实例
+ // var polyline = new AMap.Polyline({
+ // path: path,
+ // borderWeight: 2, // 线条宽度，默认为 1
+ // strokeColor: 'red', // 线条颜色
+ // lineJoin: 'round' // 折线拐点连接处样式
+ // });
+ //
+ //
+ //
+ // // 将折线添加至地图实例
+ // map.add(polyline);
+
$createPolygon.on('click', function () {
febs.alert.success('点击新建');
@@ -66,10 +93,26 @@
$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.cleanData(polyline);
+
+ map.add(polyline);
});
$close.on('click', function () {
febs.alert.success('结束编辑');
});
+
});
</script>
\ No newline at end of file
--
Gitblit v1.9.1