地图测试 gengdidi

gassafety-web/public/index.html

@@ -8,6 +8,7 @@
     <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=1.4.15&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
 	  <style>
     html,
     body,

gassafety-web/src/utils/map.js

+let map;
+
+/**
+ * 初始化地图
+ */
+export function initMap() {
+  let opts = {
+    subdistrict: 0,
+    extensions: 'all',
+    level: 'city'
+  };
+  let district = new AMap.DistrictSearch(opts);
+  district.search('石家庄', function (status, result) {
+    if(status == "complete"){
+      let defaultCenter = [];
+      defaultCenter.push(result.districtList[0].center.lng);
+      defaultCenter.push(result.districtList[0].center.lat);
+      map = new AMap.Map('container', {
+        //mask: addMask(result.districtList[0].boundaries),
+        center: defaultCenter,
+        // resizeEnable: true,
+        disableSocket: true,
+        viewMode: '3D',
+        showLabel: true,
+        // labelzIndex: 110,
+        pitch: 8,
+        zoom: 9,
+        //mapStyle: 'amap://styles/darkblue',
+        // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
+      });
+      //添加边界线
+      addPolyline(result.districtList[0].boundaries);
+      //自定义右键菜单
+      new ContextMenu(map);
+    }
+  })
+
+
+}
+
+/**
+ * 添加地图mask 显示特定区域地图
+ * @returns {Array}
+ */
+export function addMask(bounds) {
+  let mask = [];
+  for (let i = 0; i < bounds.length; i += 1) {
+    mask.push([bounds[i]]);
+  }
+  return mask;
+}
+
+/**
+ * 添加边界线
+ * @param bounds
+ *
+ */
+export function addPolyline(bounds) {
+  for (let i = 0; i < bounds.length; i += 1) {
+    new AMap.Polyline({
+      path: bounds[i],
+      strokeColor: '#0088ff',
+      strokeWeight: 5,
+      strokeOpacity: 7,
+      map: map,
+    });
+  }
+}
+
+
+/**
+ * 自定义菜单类
+ * @param map
+ * @constructor
+ */
+export function ContextMenu(map) {
+  var me = this;
+
+  //地图中添加鼠标工具MouseTool插件
+  this.mouseTool = new AMap.MouseTool(map);
+
+  this.contextMenuPositon = null;
+
+  var content = [];
+
+  content.push('<div class="layui-card" style="width: 560px;">');
+  content.push('<div class="form-header">资源搜索</div>');
+  content.push('<div class="layui-card-body">');
+  content.push('  <form class="layui-form">');
+  content.push('    <div class="layui-form-item">');
+  content.push(
+    '      <div class="layui-input-inline" style="width: 120px;"><input type="text" name="distance" autocomplete="off" placeholder="范围半径" class="layui-input" onkeyup="this.value=this.value.replace(/[^0-9-]+/,\'\')" /></div>',
+  );
+  content.push('      <div class="layui-form-mid layui-word-aux">米</div>');
+  content.push(
+    '      <div class="layui-input-inline"><input type="text" name="keywords" autocomplete="off" placeholder="请输入关键字" class="layui-input" /></div>',
+  );
+  content.push(
+    '      <div class="layui-input-inline" style="width:auto;"><button type="button" onclick="menu.viewResources(this)" class="blue-btn">立即搜索</button><button class="blue-btn" type="button" onclick="menu.clearMap()">清屏</button></div>',
+  );
+  content.push('    </div>');
+  content.push('  </form>');
+  content.push('</div>');
+  content.push('</div>');
+
+  //通过content自定义右键菜单内容
+  this.contextMenu = new AMap.ContextMenu({ isCustom: true, content: content.join('') });
+
+  //地图绑定鼠标右击事件——弹出右键菜单
+  map.on('rightclick', function (e) {
+    me.contextMenu.open(map, e.lnglat);
+    me.contextMenuPositon = e.lnglat;
+  });
+}
+
+ContextMenu.prototype.clearMap = function () {
+  map.clearMap();
+};
+
+ContextMenu.prototype.viewResources = function (self) {
+  this.mouseTool.close();
+  map.setCenter(this.contextMenuPositon);
+
+  var distance = $(self).closest('form').find('input[name="distance"]').val();
+  var keywords = $(self).closest('form').find('input[name="keywords"]').val();
+
+  if (distance >= 1) {
+    buildRadar(this.contextMenuPositon, distance);
+    scan();
+  }
+
+  map.clearMap();
+
+  mapSearch(
+    {
+      distance: distance / 1000,
+      keywords: keywords,
+      latitude: this.contextMenuPositon.lat,
+      longitude: this.contextMenuPositon.lng,
+    },
+    () => {
+      var searchTimer = setTimeout(() => {
+        clearTimeout(searchTimer);
+        object3Dlayer.remove(radar);
+        renderCircle(this.contextMenuPositon, distance);
+      }, 3000);
+    },
+  );
+
+  this.contextMenu.close();
+};
+
+
+
+

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

+<template>
+  <div>
+    <div style="width: 100vw;height: 100vh" id="container"></div>
+  </div>
+</template>
+<script>
+  import { initMap } from "utils/map.js";
+  export default {
+    data() {
+      return {};
+    },
+    mounted() {
+      initMap();
+    }
+  };
+</script>
+