地图工具 gengdidi

gassafety-web/public/index.html

@@ -8,8 +8,8 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-    <script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
-	  <style>
+    <script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor,AMap.MapType"></script>
+    <style>
     html,
     body,
     #app {

gassafety-web/src/utils/gaodeMap.js

@@ -157,6 +157,86 @@ class gaodeMap {
     map.setFitView();
   }
 
+  /**
+   * 添加鼠标事件
+   */
+  addMouseTool(){
+    var mouseTool = new AMap.MouseTool(map);
+    //监听draw事件可获取画好的覆盖物
+    var overlays = [];
+    mouseTool.on('draw',function(e){
+      overlays.push(e.obj);
+    })
+
+    function draw(type){
+      switch(type){
+        case 'marker':{
+          mouseTool.marker({
+            //同Marker的Option设置
+          });
+          break;
+        }
+        case 'polyline':{
+          mouseTool.polyline({
+            strokeWeight: 9,
+            strokeColor:'#80d8ff'
+            //同Polyline的Option设置
+          });
+          break;
+        }
+        case 'polygon':{
+          mouseTool.polygon({
+            fillColor:'#00b0ff',
+            strokeColor:'#80d8ff'
+            //同Polygon的Option设置
+          });
+          break;
+        }
+        case 'rectangle':{
+          mouseTool.rectangle({
+            fillColor:'#00b0ff',
+            strokeColor:'#80d8ff'
+            //同Polygon的Option设置
+          });
+          break;
+        }
+        case 'circle':{
+          mouseTool.circle({
+            fillColor:'#00b0ff',
+            strokeColor:'#80d8ff'
+            //同Circle的Option设置
+          });
+          break;
+        }
+      }
+    }
+
+    var radios = document.getElementsByName('func');
+    for(var i=0;i<radios.length;i+=1){
+      radios[i].onchange = function(e){
+        draw(e.target.value)
+      }
+    }
+    draw('marker')
+    document.getElementById('clear').onclick = function(){
+      map.remove(overlays)
+      overlays = [];
+    }
+    document.getElementById('close').onclick = function(){
+      mouseTool.close(true)//关闭，并清除覆盖物
+      for(var i=0;i<radios.length;i+=1){
+        radios[i].checked = false;
+      }
+    }
+  }
+
+  amapLoader(){
+    map.addControl(new AMap.MapType({
+      defaultType:0, //0代表默认，1代表卫星
+      showRoad:true//显示路况（右上角也可点击）
+    }));
+  }
+
 
 
 }

gassafety-web/src/views/enterprise/map/index.vue

 <template>
   <div>
     <div style="width: 100vw;height: 100vh" id="container"></div>
+    <div class="input-card" style='width: 24rem;'>
+      <div class="input-item">
+        <input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>
+        <input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
+        <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
+      </div>
+      <div class="input-item">
+        <input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>
+        <input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
+      </div>
+      <div class="input-item">
+        <input id="clear" type="button" class="btn" value="清除" />
+        <input id="close" type="button" class="btn" value="关闭绘图" />
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -38,7 +53,84 @@
         ]
       ]
       gaoMap.addPolyline(path);
+      gaoMap.addMouseTool();
+      gaoMap.amapLoader();
     }
   };
 </script>
+<style lang="scss" scoped>
+  .input-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border-radius: .25rem;
+    width: 22rem;
+    border-width: 0;
+    border-radius: 0.4rem;
+    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 0.75rem 1.25rem;
+  }
+
+  .input-item {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 100%;
+    height: 2.2rem;
+  }
+  input[type=checkbox], input[type=radio] {
+    box-sizing: border-box;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0 0.5rem 0 0;
+  }
+  .btn {
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    background-color: transparent;
+    background-image: none;
+    color: #25A5F7;
+    border-color: #25A5F7;
+    padding: .25rem .5rem;
+    line-height: 1.5;
+    border-radius: 1rem;
+    -webkit-appearance: button;
+    cursor:pointer;
+    width: 6rem;
+    margin: 0 1rem 0 2rem;
+  }
+
+  .btn:hover {
+    color: #fff;
+    background-color: #25A5F7;
+    border-color: #25A5F7
+  }
+  .input-text{
+    width: 4rem;
+    margin-right:1rem;
+  }
+</style>