ZongYue / lpg

Download as
Browse Code »

Commit 27cc8f16f46c916212987e0a398d1c6efd41098e

Authored by 郭伟龙
1 parent 06e683a8
Exists in dev

feat:高德地图替换为天地图

Showing 5 changed files with 966 additions and 415 deletions   Show diff stats
frontend/front/public/index.html
  Diff comments   View file @27cc8f1
... ... @@ -18,6 +18,7 @@
18 18 <script src="<%= BASE_URL %>ddLogin.js"></script>
19 19 <script src="<%= BASE_URL %>LarkSSOSDKWebQRCode-1.0.1.js"></script>
20 20 <link rel="stylesheet" href="<%= BASE_URL %>static/css/loading.css" />
  21 + <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=73fb326ebb6c50729baaef65cea858c4"></script>
21 22 <script type="text/javascript">
22 23 window._AMapSecurityConfig = {
23 24 securityJsCode:'0b63a538e25f626fbfd6dbfe5bb2808a',
... ...
frontend/front/src/views/pages/carMap/index.vue
  Diff comments   View file @27cc8f1
... ... @@ -2,7 +2,7 @@
2 2 <div class="container">
3 3 <div class="searchSty">
4 4 <el-form :inline="true" style="display: flex; justify-content: space-between" :model="queryForm"
5   - class="demo-form-inline">
  5 + class="demo-form-inline">
6 6 <!-- <el-form-item label="气站名称:">-->
7 7 <!-- <el-input v-model="queryForm.orgname" clearable placeholder="请输入气站名称"></el-input>-->
8 8 <!-- </el-form-item>-->
... ... @@ -22,54 +22,49 @@
22 22 </div>
23 23 <el-form-item>
24 24 <el-button type="primary" icon="el-icon-refresh"
25   - style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
26   - @click="handleReset" plain>重置
  25 + style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
  26 + @click="handleReset" plain>重置
27 27 </el-button>
28 28 <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
29   - icon="el-icon-search" @click="handleSearch"> 查询
  29 + icon="el-icon-search" @click="handleSearch"> 查询
30 30 </el-button>
31 31 </el-form-item>
32 32 </el-form>
33 33 </div>
34   - <div class="mapSty">
35   - <div id="mapContainer"
36   - class="map"
37   - tabindex="0">
  34 + <div class="mapSty" v-loading="loading">
  35 + <div id="mapContainer" class="map" tabindex="0">
38 36 </div>
39 37 </div>
40   - <div ref="infoData"
41   - v-if="infoWindowVisible"
42   - class="custom-info input-card content-window-card">
  38 + <div ref="infoData" v-show="infoWindowVisible" class="custom-info input-card content-window-card">
43 39 <div class="info-top" style="display: flex; justify-content: space-between;align-items: center">
44 40 <div>
45 41 <span style="color: #ffffff;">车辆信息</span>
46 42 </div>
47 43 <div @click="closeInfoWindow" style="display: flex;align-items: center">
48   - <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; " ></i>
  44 + <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; "></i>
49 45 </div>
50 46 </div>
51   - <div class="info-middle"
52   - style="background-color: white;">
  47 + <div class="info-middle" style="background-color: white;">
53 48 <el-row>
54   - <el-col :span="24" v-for="(item,index) in devInfoList1" :key="'dev'+index" >
55   - <el-col :span="12" v-for="(bitem,index) in item" :key="bitem.name">
  49 + <el-col :span="24" v-for="(item, index) in devInfoList1" :key="'dev' + index">
  50 + <el-col :span="12" v-for="(bitem, index) in item" :key="bitem.name">
56 51 <div class="info-div" style="display: flex">
57 52 <div style="text-align: right;width: 168px;">
58   - {{bitem.name}}：
  53 + {{ bitem.name }}：
59 54 </div>
60   - <div class="info-span" style="flex: 1">{{bitem.value}}</div>
  55 + <div class="info-span" style="flex: 1">{{ bitem.value }}</div>
61 56 </div>
62 57 </el-col>
63 58 </el-col>
64 59 </el-row>
65 60 </div>
66   - <div class="info-bottom"
67   - style="position: relative; top: 0px; margin: 0px auto;"><img src="https://webapi.amap.com/images/sharp.png"></div>
  61 + <div class="info-bottom" style="position: relative; top: 0px; margin: 0px auto;"><img
  62 + src="https://webapi.amap.com/images/sharp.png"></div>
68 63 </div>
69 64 </div>
70 65 </template>
71 66 <script>
72   -import { getAppTagTypes,getMapPointDetailInfo } from '@/api/gasMap.js'
  67 +import { getAppTagTypes, getMapPointDetailInfo } from '@/api/gasMap.js'
73 68 import { getCurrentEnterpriseAndStation } from '@/api/common.js'
74 69 import AMapLoader from '@amap/amap-jsapi-loader';
75 70 import iconImg from '@/assets/qpxx/car.png'
... ... @@ -82,147 +77,150 @@ export default {
82 77 name: "index",
83 78 data() {
84 79 return {
85   - rightImgUrl:rightImg,
86   - dailyRecordImgUrl:dailyRecordImg,
  80 + rightImgUrl: rightImg,
  81 + dailyRecordImgUrl: dailyRecordImg,
87 82 queryForm: {
88 83 qzId: "", //气站id
89 84 qyId: "" //企业id
90 85 },
91 86 qyOption: [],
92   - allOption:[],
  87 + allOption: [],
93 88 qzOption: [],
94   - reference:{},
  89 + reference: {},
95 90 // 控制渲染条件 如果不用v-if会报错 具体可自行尝试
96 91 showPop: false,
97 92 // 保存当前激活的refrence id
98   - activeId:'',
99   - devInfoList1:[],
  93 + activeId: '',
  94 + devInfoList1: [],
100 95 devInfoList: [
101 96 {
102 97 name: '车票号',
103 98 value: '鄂A·A1217',
104   - key:'fSsqymc'
  99 + key: 'fSsqymc'
105 100 },
106 101 {
107 102 name: '车辆型号',
108 103 value: 'LN56516485656',
109   - key:'fSsczmc'
  104 + key: 'fSsczmc'
110 105 },
111 106 {
112 107 name: '所属气站',
113 108 value: '孝汉川市刘家隔镇液化石油气瓶',
114   - key:'fQpbh'
  109 + key: 'fQpbh'
115 110 },
116 111 {
117 112 name: '投入使用日期',
118 113 value: '20223年5月31号',
119   - key:'fZzrq'
  114 + key: 'fZzrq'
120 115 },
121 116 {
122 117 name: '驾驶员',
123   - value:'张三',
124   - key:'qpzt',
  118 + value: '张三',
  119 + key: 'qpzt',
125 120 },
126 121 {
127 122 name: '联系电话',
128 123 value: '1810000081',
129   - key:'qpzl'
  124 + key: 'qpzl'
130 125 },
131 126 {
132 127 name: '证件编号',
133   - value:'- -',
134   - key:'fQpgg',
  128 + value: '- -',
  129 + key: 'fQpgg',
135 130 },
136 131 {
137 132 name: '证件编号有效期',
138 133 value: '- -',
139   - key:'ccbh'
  134 + key: 'ccbh'
140 135 },
141 136 {
142 137 name: '身份证号',
143   - value:'- -',
144   - key:'zybh'
  138 + value: '- -',
  139 + key: 'zybh'
145 140 },
146 141 {
147 142 name: '车辆照片',
148 143 value: '- -',
149   - key:'jyhbh'
  144 + key: 'jyhbh'
150 145 },
151 146 {
152 147 name: '委托运输公司',
153   - key:'bcjyrq',
154   - value:'- -'
  148 + key: 'bcjyrq',
  149 + value: '- -'
155 150 },
156 151 {
157 152 name: '道路运输许可证',
158   - value:'- -',
159   - key:'fXcjysj',
  153 + value: '- -',
  154 + key: 'fXcjysj',
160 155 },
161 156 {
162 157 name: '道路运输许可证有效日期',
163 158 value: '- -',
164   - key:'sjsynx'
  159 + key: 'sjsynx'
165 160 },
166 161 {
167 162 name: '危化品证号',
168   - key:'sccj',
169   - value:'- -'
  163 + key: 'sccj',
  164 + value: '- -'
170 165 },
171 166 {
172 167 name: '危化品证有效日期',
173 168 value: '- -',
174   - key:'jzrq'
  169 + key: 'jzrq'
175 170 },
176 171 {
177 172 name: '创建时间',
178   - key:'jdrq',
179   - value:'2021年7月4号'
  173 + key: 'jdrq',
  174 + value: '2021年7月4号'
180 175 }
181 176 ],
182   - markers:[],
183   - clickMapId:'',
184   - infoWindowVisible:false,
  177 + marker: null,
  178 + markers: [],
  179 + clickMapId: '',
  180 + infoWindowVisible: false,
185 181 map: null, //地图
186 182 pointData: [],
187   - nodeList:[],
188   - centerPoint:[114.347441, 30.50438],
  183 + nodeList: [],
  184 + centerPoint: [114.347441, 30.50438],
  185 + loading: false,
189 186 }
190 187 },
191 188 mounted() {
  189 + // this.initMap();
192 190 },
193   - created () {
  191 + created() {
194 192 this.initData();
195 193 },
196 194 methods: {
197   - initData(){
  195 + initData() {
198 196 this.getEnterpriseAndStationList();
199 197 this.getMarkPoint();
200 198 },
201 199 //获取企业和气站数据
202   - async getEnterpriseAndStationList(){
203   - await getCurrentEnterpriseAndStation().then((res)=>{
204   - console.log('打印当前气站和企业信息数据====',res);
  200 + async getEnterpriseAndStationList() {
  201 + await getCurrentEnterpriseAndStation().then((res) => {
  202 + console.log('打印当前气站和企业信息数据====', res);
205 203 const { value } = res;
206   - if(value.length>0){
  204 + if (value.length > 0) {
207 205 this.allOption = value;
208   - this.qyOption = value?value.map((item)=>{
  206 + this.qyOption = value ? value.map((item) => {
209 207 return {
210   - qyId:item.qyId,
211   - qymc:item.qymc
  208 + qyId: item.qyId,
  209 + qymc: item.qymc
212 210 }
213   - }):[];
  211 + }) : [];
214 212 }
215 213 })
216 214 },
217 215 //选择企业的数据
218   - handleQyChange(val){
219   - this.qzOption =[];
220   - this.queryForm.qzId ='';
221   - this.qzOption = this.allOption.filter((item)=>item.qyId == val)[0].qzxxList;
  216 + handleQyChange(val) {
  217 + this.qzOption = [];
  218 + this.queryForm.qzId = '';
  219 + this.qzOption = this.allOption.filter((item) => item.qyId == val)[0].qzxxList;
222 220 },
223 221 //点击气瓶节点的功能
224   - handleNodeItem(val){
225   - console.log('打印val',val)
  222 + handleNodeItem(val) {
  223 + console.log('打印val', val)
226 224 // // 这个操作是为了避免与源码中的点击reference doToggle方法冲突
227 225 // if (this.activeId === val.id && this.showPop) return
228 226 // this.showPop = false;
... ... @@ -242,7 +240,9 @@ export default {
242 240 },
243 241 //查询按钮
244 242 handleSearch() {
  243 + this.loading = true;
245 244 this.pointData = [];
  245 + this.markers = [];
246 246 this.infoWindowVisible = false;
247 247 this.getMarkPoint();
248 248 },
... ... @@ -253,38 +253,43 @@ export default {
253 253 this.queryForm.qyId = '';
254 254 this.handleSearch();
255 255 },
256   - async getMarkPoint(){
257   - let params ={
258   - qzId:this.queryForm.qzId,
  256 + async getMarkPoint() {
  257 + this.loading = true;
  258 + let params = {
  259 + qzId: this.queryForm.qzId,
259 260 qyId: this.queryForm.qyId,
260 261 }
261   - await getAppTagTypes(params).then((res)=>{
262   - let { code, value} = res;
263   - if(code == 200){
264   - value.map((item,index)=>{
265   - if(item.typeone.length>0){
266   - item.typeone.map((itemone)=>{
  262 + await getAppTagTypes(params).then((res) => {
  263 + let { code, value } = res;
  264 + if(!value.length){
  265 + this.loading = false;
  266 + return
  267 + }
  268 + if (code == 200) {
  269 + value.map((item, index) => {
  270 + if (item.typeone.length > 0) {
  271 + item.typeone.map((itemone) => {
267 272 this.pointData.push({
268 273 ...itemone,
269   - type:'one',
  274 + type: 'one',
270 275 });
271 276 })
272 277 }
273   - if(item.typetwo.length>0){
274   - item.typetwo.map((itemtwo)=>{
  278 + if (item.typetwo.length > 0) {
  279 + item.typetwo.map((itemtwo) => {
275 280 this.pointData.push({
276 281 ...itemtwo,
277   - type:'two'
  282 + type: 'two'
278 283 });
279 284 })
280 285 }
281   - if(item.typethree.length>0){
  286 + if (item.typethree.length > 0) {
282 287 console.log('打印111')
283   - item.typethree.map((itemthree)=>{
  288 + item.typethree.map((itemthree) => {
284 289 // this.pointData.push(itemthree);
285 290 this.pointData.push({
286 291 ...itemthree,
287   - type:'three'
  292 + type: 'three'
288 293 });
289 294 })
290 295 }
... ... @@ -293,10 +298,10 @@ export default {
293 298 this.pointData = this.pointData.map(item => {
294 299 return {
295 300 ...item,
296   - isActive :false,
  301 + isActive: false,
297 302 }
298 303 });
299   - this.centerPoint = [this.pointData[0].fjd,this.pointData[0].fwd]
  304 + this.centerPoint = [this.pointData[0].fjd, this.pointData[0].fwd]
300 305 this.initMap();
301 306 }
302 307 })
... ... @@ -316,43 +321,93 @@ export default {
316 321 version: '2.0' //数据可视化
317 322 }
318 323 }).then((AMap) => {
319   - this.map = new AMap.Map('mapContainer', {//设置地图容器id
320   - viewMode: '2D', //是否为3D地图模式
321   - zoom: 16, //初始化地图层级
322   - center: this.centerPoint,//初始化地图中心点
323   - });
324   - //信息窗口实例
325   - //循环所有的标记点
326   - console.log('打印pointData',this.pointData);
327   - let arr =[];
328   - for (let i = 0; i < this.pointData.length; i++) {
329   - const num = i + 1;
330   - const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
331   - // 引入本地图片
332   - const localIcon = new AMap.Icon({
333   - size: new AMap.Size(30, 34), // 图标尺寸
334   - image: iconImg, // 图片的URL
335   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
336   - });
337   - var marker = new AMap.Marker({
338   - position: [this.pointData[i].fjd, this.pointData[i].fwd],
339   - map: this.map,
340   - icon:localIcon,
341   - offset: new AMap.Pixel(-15, -20),
  324 + // this.map = new AMap.Map('mapContainer', {//设置地图容器id
  325 + // viewMode: '2D', //是否为3D地图模式
  326 + // zoom: 16, //初始化地图层级
  327 + // center: this.centerPoint,//初始化地图中心点
  328 + // });
  329 +
  330 + // ===========天地图代码==============
  331 + if(!this.map){
  332 + // 防止二次初始化导致拖拽失效
  333 + this.map = new T.Map('mapContainer',{
  334 + projection: 'EPSG:900913'
342 335 });
343   - arr.push( Object.assign(this.pointData[i], {
344   - mapId: marker._amap_id,
345   - }))
346   - // 将创建的点标记添加到已有的地图实例+
  336 + }
  337 + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16);
  338 + //允许鼠标双击放大地图
  339 + this.map.enableScrollWheelZoom();
  340 + let arr = [];
  341 + const seenCoordinates = new Set(); // 记录已经处理的经纬度
  342 +
  343 + for (let i = 0; i < this.pointData.length; i++) {
  344 + const point = this.pointData[i];
  345 + const coordsKey = `${point.fjd},${point.fwd}`; // 使用经纬度创建唯一的键
  346 + // 如果经纬度之前未处理过，则添加到数组和地图
  347 +
  348 + // 创建本地图标
  349 + const localIcon = new T.Icon({
  350 + iconUrl: iconImg,
  351 + iconSize: new T.Point(30, 34),
  352 + iconAnchor: new T.Point(30, 34),
  353 + });
  354 +
  355 + // 创建自定义标记
  356 + const marker = new T.Marker(new T.LngLat(point.fjd, point.fwd), { icon: localIcon });
  357 + arr.push(Object.assign(point, { mapId: point.id }));
347 358 marker['arr'] = arr;
348   - marker['isActive'] = this.pointData[i].isActive;
349   - // console.log('marker=====', marker);
350   - this.map.add([marker]);
351   - // marker.content = '我是第' + (i + 1) + '个Marker';
352   - marker.on("click", this.markerClick);
  359 + marker['isActive'] = point.isActive;
  360 + marker['type'] = point.type;
  361 + marker['tid'] = point.id;
353 362 this.markers.push(marker);
354   - marker.emit('click', {target: marker});
  363 + if (!seenCoordinates.has(coordsKey)) {
  364 + seenCoordinates.add(coordsKey);
  365 + // 绑定点击事件
  366 + marker.addEventListener("click", this.markerClick.bind(null, marker));
  367 + // 将标记添加到地图
  368 + this.map.addOverLay(marker);
  369 + }
355 370 }
  371 + // 创建并添加标记集群
  372 + new T.MarkerClusterer(this.map, { markers: this.markers });
  373 + // 更新加载状态
  374 + this.loading = false;
  375 + // ===========天地图代码==============
  376 +
  377 +
  378 + //信息窗口实例
  379 + //循环所有的标记点
  380 + console.log('打印pointData', this.pointData);
  381 + // let arr =[];
  382 + // for (let i = 0; i < this.pointData.length; i++) {
  383 + // const num = i + 1;
  384 + // const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
  385 + // // 引入本地图片
  386 + // const localIcon = new AMap.Icon({
  387 + // size: new AMap.Size(30, 34), // 图标尺寸
  388 + // image: iconImg, // 图片的URL
  389 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  390 + // });
  391 + // var marker = new AMap.Marker({
  392 + // position: [this.pointData[i].fjd, this.pointData[i].fwd],
  393 + // map: this.map,
  394 + // icon:localIcon,
  395 + // offset: new AMap.Pixel(-15, -20),
  396 + // });
  397 + // arr.push( Object.assign(this.pointData[i], {
  398 + // mapId: marker._amap_id,
  399 + // }))
  400 + // // 将创建的点标记添加到已有的地图实例+
  401 + // marker['arr'] = arr;
  402 + // marker['isActive'] = this.pointData[i].isActive;
  403 + // // console.log('marker=====', marker);
  404 + // this.map.add([marker]);
  405 + // // marker.content = '我是第' + (i + 1) + '个Marker';
  406 + // marker.on("click", this.markerClick);
  407 + // this.markers.push(marker);
  408 + // marker.emit('click', {target: marker});
  409 + // }
  410 + return
356 411 AMap.plugin('AMap.DistrictSearch', function () {
357 412 //创建行政区查询对象
358 413 var options = {
... ... @@ -391,61 +446,106 @@ export default {
391 446 });
392 447 },
393 448 //点击点标记事件
394   - markerClick(e) {
395   - this.infoWindowVisible = true;
396   - let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id);
  449 + markerClick(event, e) {
  450 + console.log(e);
  451 + let arrNew = e.target.arr.filter((x) => x.mapId == e.target.tid);
397 452 this.devInfo = arrNew && arrNew[0];
398 453 // infoWindow.setContent(e.target.content);
399 454 console.log('打印res', arrNew);
400 455 // 如果已选中，则不做处理
401 456  
402 457 // 引入本地图片
403   - const newIcon = new AMap.Icon({
404   - size: new AMap.Size(30, 34), // 图标尺寸
405   - image: iconImg1, // 图片的URL
406   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
407   - });
408   - const oldIcon = new AMap.Icon({
409   - size: new AMap.Size(30, 34), // 图标尺寸
410   - image: iconImg, // 图片的URL
411   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
412   - });
  458 + // const newIcon = new AMap.Icon({
  459 + // size: new AMap.Size(30, 34), // 图标尺寸
  460 + // image: iconImg1, // 图片的URL
  461 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  462 + // });
  463 + // const oldIcon = new AMap.Icon({
  464 + // size: new AMap.Size(30, 34), // 图标尺寸
  465 + // image: iconImg, // 图片的URL
  466 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  467 + // });
  468 + this.clickMapId = e.target.tid;
413 469 if (!e.target.isActive) {
414   - e.target.isActive = true;
415   - this.clickMapId = '';
416   - } else {
417   - e.target.isActive = false;
418   - this.getPointDetailInfo(arrNew[0].fqptm,e);
419   - this.clickMapId = e.target._amap_id;
  470 + // 如果已选中，则不做处理
  471 + this.getPointDetailInfo(arrNew[0].fqptm, e);
  472 + this.infoWindowVisible = true;
  473 + let content = this.$refs.infoData;
  474 + if (!content) return
  475 + var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
  476 + console.log("content", content);
  477 + console.log("lnglat", lnglat);
  478 + var infoWin = new T.InfoWindow();
  479 + infoWin.setLngLat(lnglat);
  480 + infoWin.setContent(content);
  481 + this.map.openInfoWindow(content, lnglat);
  482 + this.map.panTo(lnglat);
  483 + // this.map.panTo(lnglat);
420 484 }
  485 +
  486 + const newIcon = new T.Icon({
  487 + iconSize: T.Point(30, 34), // 图标尺寸
  488 + iconUrl: iconImg1, // 图片的URL
  489 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
  490 + });
  491 + const oldIcon = new T.Icon({
  492 + iconSize: T.Point(30, 34), // 图标尺寸
  493 + iconUrl: iconImg, // 图片的URL
  494 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
  495 + });
  496 +
421 497 this.markers.forEach((marker) => {
422   - if (marker._amap_id !== this.clickMapId) {
423   - marker.isActive = true;
  498 + if (marker.tid !== this.clickMapId) {
  499 + // marker.isActive = true;
424 500 marker.setIcon(oldIcon);
425   - }else{
426   - marker.isActive = false;
427   - console.log('打印marker',marker);
  501 + } else {
  502 + // marker.isActive = false;
  503 + console.log('打印marker', marker);
428 504 marker.setIcon(newIcon);
429 505 }
430 506 });
  507 +
  508 +
  509 +
  510 +
  511 +
  512 +
  513 + // if (!e.target.isActive) {
  514 + // e.target.isActive = true;
  515 + // this.clickMapId = '';
  516 + // } else {
  517 + // e.target.isActive = false;
  518 + // this.getPointDetailInfo(arrNew[0].fqptm,e);
  519 + // this.clickMapId = e.target._amap_id;
  520 + // }
  521 + // this.markers.forEach((marker) => {
  522 + // if (marker._amap_id !== this.clickMapId) {
  523 + // marker.isActive = true;
  524 + // marker.setIcon(oldIcon);
  525 + // }else{
  526 + // marker.isActive = false;
  527 + // console.log('打印marker',marker);
  528 + // marker.setIcon(newIcon);
  529 + // }
  530 + // });
431 531 // 更新选中的标记点
432 532 // 设置当前点击的标记点样式
433 533 // e.target.setIcon(newIcon); // 或者其他方法来重置样式
434 534 },
435   - async getPointDetailInfo(fqptm,e){
436   - let params ={
437   - qptm:fqptm
  535 + async getPointDetailInfo(fqptm, e) {
  536 + let params = {
  537 + qptm: fqptm
438 538 }
439   - await getMapPointDetailInfo(params).then(async(res)=>{
440   - console.log('打印res',res);
441   - const { value} = res;
442   - const {qpdqlzs,qpOrderInfoVO} = value;
443   - var infoWindow = this.createInfoWindow();
444   - infoWindow.open(this.map, e.target.getPosition());
  539 + await getMapPointDetailInfo(params).then(async (res) => {
  540 + console.log('打印res', res);
  541 + const { value } = res;
  542 + const { qpdqlzs, qpOrderInfoVO } = value;
  543 + // var infoWindow = this.createInfoWindow();
  544 + // infoWindow.open(this.map, e.target.getPosition());
445 545 // this.devInfoList = await this.$assignValues(value, this.devInfoList);
446   - this.nodeList = await this.$createDoubleArray(qpdqlzs,5);
  546 + this.nodeList = await this.$createDoubleArray(qpdqlzs, 5);
447 547 console.log('打印this.nodeList', this.nodeList);
448   - this.devInfoList1 = await this.$createDoubleArray(this.devInfoList,2);
  548 + this.devInfoList1 = await this.$createDoubleArray(this.devInfoList, 2);
449 549  
450 550 })
451 551 },
... ... @@ -461,19 +561,31 @@ export default {
461 561 },
462 562 closeInfoWindow() {
463 563 // 引入本地图片
464   - const oldIcon = new AMap.Icon({
465   - size: new AMap.Size(30, 34), // 图标尺寸
466   - image: iconImg, // 图片的URL
467   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  564 + // const oldIcon = new AMap.Icon({
  565 + // size: new AMap.Size(30, 34), // 图标尺寸
  566 + // image: iconImg, // 图片的URL
  567 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  568 + // });
  569 + // this.markers.forEach((marker) => {
  570 + // if (marker._amap_id == this.clickMapId) {
  571 + // marker.isActive = true;
  572 + // marker.setIcon(oldIcon);
  573 + // }
  574 + // });
  575 + const oldIcon = new T.Icon({
  576 + iconSize: T.Point(30, 34), // 图标尺寸
  577 + iconUrl: iconImg, // 图片的URL
  578 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
468 579 });
469 580 this.markers.forEach((marker) => {
470   - if (marker._amap_id == this.clickMapId) {
471   - marker.isActive = true;
  581 + if (marker.tid == this.clickMapId) {
  582 + // marker.isActive = true;
472 583 marker.setIcon(oldIcon);
473 584 }
474 585 });
475 586 this.clickMapId = '';
476   - this.map.clearInfoWindow();
  587 + // this.map.clearInfoWindow();
  588 + this.map.closeInfoWindow();
477 589 },
478 590 }
479 591 }
... ... @@ -488,24 +600,48 @@ export default {
488 600 opacity: 0.92;
489 601 color: #fff;
490 602 }
  603 +
491 604 /* 下方是去除三角箭头的代码 */
492 605 .popoverSty.el-popper[x-placement^=top] .popper__arrow::after {
493 606 border-top-color: #ec661e !important;
494 607 }
495 608 </style>
496 609 <style lang="scss" scoped>
  610 +::v-deep .tdt-infowindow-content-wrapper {
  611 + box-shadow: none;
  612 + background: rgba(255, 255, 255, 0);
  613 +}
  614 +
  615 +::v-deep .tdt-infowindow-close-button {
  616 + display: none;
  617 +}
  618 +
  619 +::v-deep .tdt-infowindow-tip-container {
  620 + display: none;
  621 +}
  622 +
  623 +::v-deep .tdt-infowindow {
  624 + bottom: 40px !important;
  625 + left: -360px !important;
  626 +}
  627 +
497 628 #mapContainer {
498 629 min-width: 865px;
499 630 min-height: 630px;
500 631 }
501 632  
502 633 .container {
503   - .textSty{
504   - white-space: nowrap; /* 设置为单行 */
505   - max-width: 200px; /* 设置最大宽度 */
506   - overflow: hidden; /* 隐藏超出部分的内容 */
507   - text-overflow: ellipsis; /* 显示省略号 */
  634 + .textSty {
  635 + white-space: nowrap;
  636 + /* 设置为单行 */
  637 + max-width: 200px;
  638 + /* 设置最大宽度 */
  639 + overflow: hidden;
  640 + /* 隐藏超出部分的内容 */
  641 + text-overflow: ellipsis;
  642 + /* 显示省略号 */
508 643 }
  644 +
509 645 .searchSty {
510 646 background: #ffffff;
511 647 padding: 0 20px;
... ... @@ -517,25 +653,34 @@ export default {
517 653 margin-top: 20px;
518 654 background: #ffffff;
519 655 }
520   - .labelSty{
  656 +
  657 + .labelSty {
521 658 width: 10px;
522 659 height: 10px;
523 660 border-radius: 2px;
524 661 margin-right: 10px;
525 662 }
526   - .completeSty{
  663 +
  664 + .completeSty {
527 665 background-color: #ea5504;
528 666 }
529   - .uncompleteSty{
  667 +
  668 + .uncompleteSty {
530 669 background-color: #ccd0e5;
531 670 }
532   - .textSty{
533   - white-space: nowrap; /* 设置为单行 */
534   - max-width: 200px; /* 设置最大宽度 */
535   - overflow: hidden; /* 隐藏超出部分的内容 */
536   - text-overflow: ellipsis; /* 显示省略号 */
  671 +
  672 + .textSty {
  673 + white-space: nowrap;
  674 + /* 设置为单行 */
  675 + max-width: 200px;
  676 + /* 设置最大宽度 */
  677 + overflow: hidden;
  678 + /* 隐藏超出部分的内容 */
  679 + text-overflow: ellipsis;
  680 + /* 显示省略号 */
537 681 }
538 682 }
  683 +
539 684 .content-window-card {
540 685 position: relative;
541 686 box-shadow: none;
... ... @@ -545,6 +690,7 @@ export default {
545 690 width: 45rem;
546 691 padding: 0;
547 692 }
  693 +
548 694 .content-window-card p {
549 695 height: 2rem;
550 696 }
... ... @@ -569,6 +715,7 @@ export default {
569 715 line-height: 31px;
570 716 padding: 0 10px;
571 717 }
  718 +
572 719 .info-top img {
573 720 position: absolute;
574 721 top: 10px;
... ... @@ -593,6 +740,7 @@ export default {
593 740 clear: both;
594 741 text-align: center;
595 742 }
  743 +
596 744 .info-bottom img {
597 745 position: relative;
598 746 z-index: 104;
... ... @@ -628,6 +776,4 @@ export default {
628 776 .info-a-title {
629 777 color: #000000;
630 778 font-size: 16px;
631   -}
632   -
633   -</style>
  779 +}</style>
... ...
frontend/front/src/views/pages/enterpriseGasStation/enterpriseGasMap/index.vue
  Diff comments   View file @27cc8f1
... ... @@ -28,7 +28,7 @@
28 28 </el-form-item>
29 29 </el-form>
30 30 </div>
31   - <div class="mapSty">
  31 + <div class="mapSty" v-loading="loading">
32 32 <div id="mapContainer"
33 33 class="map"
34 34 tabindex="0">
... ... @@ -304,6 +304,7 @@ export default {
304 304 key:'czl'
305 305 },
306 306 ],
  307 + marker:null,
307 308 markers:[],
308 309 clickMapId:'',
309 310 companyInfoDataVisible:false,
... ... @@ -311,6 +312,8 @@ export default {
311 312 map: null, //地图
312 313 pointData: [],
313 314 centerPoint:[114.347441, 30.50438],
  315 + currentObj:{},
  316 + loading:false
314 317 }
315 318 },
316 319 mounted() {
... ... @@ -350,7 +353,9 @@ export default {
350 353 },
351 354 //查询按钮
352 355 handleSearch() {
  356 + this.loading = true;
353 357 this.pointData = [];
  358 + this.markers = [];
354 359 this.companyInfoDataVisible = false;
355 360 this.gasStationInfoVisible = false;
356 361 this.getMarkPoint();
... ... @@ -362,13 +367,18 @@ export default {
362 367 this.queryForm.qyId = '';
363 368 this.handleSearch();
364 369 },
365   - async getMarkPoint(){
  370 + async getMarkPoint(){
  371 + this.loading = true;
366 372 let params ={
367 373 qzId:this.queryForm.qzId,
368 374 qyId: this.queryForm.qyId,
369 375 }
370 376 await getEnterpriseMapPoint(params).then((res)=>{
371 377 let { code, value} = res;
  378 + if(!value){
  379 + this.loading = false;
  380 + return
  381 + }
372 382 if(code == 200){
373 383 const { qyxxList, qzxxList } = value;
374 384 let pointDataArray =[]
... ... @@ -394,7 +404,8 @@ export default {
394 404 }):[];
395 405 console.log('打印value====>', pointDataArray);
396 406 this.pointData = pointDataArray;
397   - // this.centerPoint=[pointDataArray[0].fJd,pointDataArray[0].fWd]
  407 + console.log('打印pointData',this.pointData);
  408 + this.centerPoint=[pointDataArray[0].fJd,pointDataArray[0].fWd]
398 409 this.initMap();
399 410 }
400 411 })
... ... @@ -414,40 +425,82 @@ export default {
414 425 version: '2.0' //数据可视化
415 426 }
416 427 }).then((AMap) => {
417   - this.map = new AMap.Map('mapContainer', {//设置地图容器id
418   - viewMode: '2D', //是否为3D地图模式
419   - zoom: 15, //初始化地图层级
420   - center: this.centerPoint,//初始化地图中心点
421   - });
422   - //信息窗口实例
423   - //循环所有的标记点
424   - console.log('打印pointData',this.pointData);
  428 + console.log("初始化地图",this.map);
  429 + // this.map = new AMap.Map('mapContainer', {//设置地图容器id
  430 + // viewMode: '2D', //是否为3D地图模式
  431 + // zoom: 15, //初始化地图层级
  432 + // center: this.centerPoint,//初始化地图中心点
  433 + // });
  434 + // ===========天地图代码==============
  435 + // if(!this.map){
  436 + // 防止二次初始化导致拖拽失效
  437 + this.map = new T.Map('mapContainer',{
  438 + projection: 'EPSG:900913'
  439 + });
  440 + // }
  441 + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 15);
  442 + //允许鼠标双击放大地图
  443 + this.map.enableScrollWheelZoom();
425 444 let arr =[];
  445 +
426 446 for (let i = 0; i < this.pointData.length; i++) {
427 447 // 引入本地图片
428   - const localIcon = new AMap.Icon({
429   - size: new AMap.Size(30, 34), // 图标尺寸
430   - image: this.pointData[i].type=='qy'?companyImg:gasStationImg, // 图片的URL
431   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
432   - });
433   - var marker = new AMap.Marker({
434   - position: [this.pointData[i].fJd, this.pointData[i].fWd],
435   - map: this.map,
436   - icon:localIcon,
437   - offset: new AMap.Pixel(-15, -20),
  448 + const localIcon = new T.Icon({
  449 + iconUrl: this.pointData[i].type=='qy'?companyImg:gasStationImg,
  450 + iconSize: new T.Point(30, 34),
  451 + iconAnchor: new T.Point(30, 34),
438 452 });
439   - arr.push( Object.assign(this.pointData[i], {
440   - mapId: marker._amap_id,
441   - }))
442   - // 将创建的点标记添加到已有的地图实例+
443   - marker['arr'] = arr;
444   - marker['isActive'] = this.pointData[i].isActive;
445   - marker['type'] = this.pointData[i].type;
446   - this.map.add([marker]);
447   - marker.on("click", this.markerClick);
448   - this.markers.push(marker);
449   - marker.emit('click', {target: marker});
  453 + //向地图上添加自定义标注
  454 + if(this.pointData[i].fJd && this.pointData[i].fWd){
  455 + this.marker = new T.Marker(new T.LngLat(this.pointData[i].fJd, this.pointData[i].fWd), {icon: localIcon});
  456 + arr.push( Object.assign(this.pointData[i], {
  457 + mapId: this.pointData[i].id,
  458 + }))
  459 + this.marker['arr'] = arr;
  460 + this.marker['isActive'] = this.pointData[i].isActive;
  461 + this.marker['type'] = this.pointData[i].type;
  462 + this.marker['tid'] = this.pointData[i].id
  463 + this.marker.addEventListener("click", this.markerClick.bind(null,this.marker));
  464 + this.markers.push(this.marker);
  465 + this.map.addOverLay(this.marker);
  466 + }
450 467 }
  468 + this.loading = false;
  469 + console.log('所有makers点',this.markers);
  470 + // ===========天地图代码==============
  471 +
  472 +
  473 + //信息窗口实例
  474 + //循环所有的标记点
  475 + // console.log('打印pointData',this.pointData);
  476 + // let arr =[];
  477 + // for (let i = 0; i < this.pointData.length; i++) {
  478 + // // 引入本地图片
  479 + // const localIcon = new AMap.Icon({
  480 + // size: new AMap.Size(30, 34), // 图标尺寸
  481 + // image: this.pointData[i].type=='qy'?companyImg:gasStationImg, // 图片的URL
  482 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  483 + // });
  484 + // var marker = new AMap.Marker({
  485 + // position: [this.pointData[i].fJd, this.pointData[i].fWd],
  486 + // map: this.map,
  487 + // icon:localIcon,
  488 + // offset: new AMap.Pixel(-15, -20),
  489 + // });
  490 + // arr.push( Object.assign(this.pointData[i], {
  491 + // mapId: marker._amap_id,
  492 + // }))
  493 + // // 将创建的点标记添加到已有的地图实例+
  494 + // marker['arr'] = arr;
  495 + // marker['isActive'] = this.pointData[i].isActive;
  496 + // marker['type'] = this.pointData[i].type;
  497 + // this.map.add([marker]);
  498 + // marker.on("click", this.markerClick);
  499 + // this.markers.push(marker);
  500 + // marker.emit('click', {target: marker});
  501 + // }
  502 +
  503 +
451 504 // AMap.plugin('AMap.DistrictSearch', function () {
452 505 // //创建行政区查询对象
453 506 // var options = {
... ... @@ -484,27 +537,34 @@ export default {
484 537 });
485 538 },
486 539 //点击点标记事件
487   - async markerClick(e) {
488   - console.log('打印e',e);
489   - let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id);
490   - console.log('打印e',e.target.type);
  540 + async markerClick(event,e) {
  541 + console.log("event",event);
  542 + console.log('打印e',e.target);
  543 + // return
  544 + let arrNew = e.target.arr.filter((x) => x.id == e.target.tid);
  545 + console.log('打印arrNew[0]',arrNew[0]);
491 546 // 引入本地图片
492   - if (!e.target.isActive) {
493   - e.target.isActive = true;
494   - this.clickMapId = '';
495   - } else {
496   - e.target.isActive = false;
497   - this.clickMapId = e.target._amap_id;
498   - switch ( e.target.type){
  547 + // if (!e.target.isActive) {
  548 + // e.target.isActive = true;
  549 + // this.companyInfoDataVisible = false;
  550 + // this.gasStationInfoVisible = false;
  551 + // this.clickMapId = '';
  552 + // } else {
  553 + // this.clickMapId = e.target._amap_id;
  554 + this.clickMapId = e.target.tid;
  555 + console.log("true",this.clickMapId);
  556 + switch (e.target.type){
499 557 case 'qy':
500 558 this.companyInfoDataVisible = true;
501 559 this.companyInfoList = await this.$assignValues(arrNew[0], this.companyInfoList);
502 560 this.companyInfoList1 = await this.$createDoubleArray(this.companyInfoList,2);
  561 + console.log("企业1",this.companyInfoList);
  562 + console.log("企业2",this.companyInfoList1);
503 563 break;
504 564 case 'qz':
505 565 this.gasStationInfoVisible = true;
506 566 this.gasStationInfoList = await this.$assignValues(arrNew[0], this.gasStationInfoList);
507   - console.log('打印arrNew[0]',arrNew[0]);
  567 + console.log("气站",this.gasStationInfoList);
508 568 this.gasStationInfoList.map(async (item)=>{
509 569 if(item.type == 'img' && item.value !=='— —'){
510 570 console.log('打印item', item);
... ... @@ -518,33 +578,63 @@ export default {
518 578 this.gasStationInfoList1 = await this.$createDoubleArray(this.gasStationInfoList,2);
519 579 break;
520 580 }
521   - }
  581 + // }
  582 + // this.markers.forEach((marker) => {
  583 + // const newIcon = new AMap.Icon({
  584 + // size: new AMap.Size(30, 34), // 图标尺寸
  585 + // image: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
  586 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  587 + // });
  588 + // const oldIcon = new AMap.Icon({
  589 + // size: new AMap.Size(30, 34), // 图标尺寸
  590 + // image: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
  591 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  592 + // });
  593 + // if (marker._amap_id !== this.clickMapId) {
  594 + // marker.isActive = true;
  595 + // marker.setIcon(oldIcon);
  596 + // }else{
  597 + // marker.isActive = false;
  598 + // console.log('打印marker',marker);
  599 + // marker.setIcon(newIcon);
  600 + // }
  601 + // });
522 602 this.markers.forEach((marker) => {
523   - const newIcon = new AMap.Icon({
524   - size: new AMap.Size(30, 34), // 图标尺寸
525   - image: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
526   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  603 + const newIcon = new T.Icon({
  604 + iconSize: T.Point(30, 34), // 图标尺寸
  605 + iconUrl: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
  606 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
527 607 });
528   - const oldIcon = new AMap.Icon({
529   - size: new AMap.Size(30, 34), // 图标尺寸
530   - image: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
531   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  608 + const oldIcon = new T.Icon({
  609 + iconSize: T.Point(30, 34), // 图标尺寸
  610 + iconUrl: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
  611 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
532 612 });
533   - if (marker._amap_id !== this.clickMapId) {
534   - marker.isActive = true;
  613 + if (marker.tid !== this.clickMapId) {
  614 + // marker.isActive = true;
535 615 marker.setIcon(oldIcon);
536 616 }else{
537   - marker.isActive = false;
  617 + // marker.isActive = false;
538 618 console.log('打印marker',marker);
539 619 marker.setIcon(newIcon);
540 620 }
541 621 });
542   - console.log('打印arrNew[0]',arrNew[0])
  622 + // console.log('打印arrNew[0]',arrNew[0])
543 623 // infoWindow.setContent(e.target.content);
544 624 if(!e.target.isActive){
545 625 // 如果已选中，则不做处理
546   - var infoWindow = this.createInfoWindow(arrNew[0]);
547   - infoWindow.open(this.map, e.target.getPosition());
  626 + let content = e.target.type=='qy'?this.$refs.companyInfoData: this.$refs.gasStationInfoData;
  627 + var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
  628 + console.log("content",content);
  629 + console.log("lnglat",lnglat);
  630 + var infoWin = new T.InfoWindow();
  631 + infoWin.setLngLat(lnglat);
  632 + infoWin.setContent(content);
  633 + this.map.openInfoWindow(content,lnglat);
  634 + this.map.panTo(lnglat);
  635 + // this.map.centerAndZoom(lnglat);
  636 + this.map.checkResize();
  637 + // infoWindow.open(this.map, e.target.getPosition());
548 638 }
549 639 // 更新选中的标记点
550 640 // 设置当前点击的标记点样式
... ... @@ -581,24 +671,31 @@ export default {
581 671 // content: this.getContent(),
582 672 offset: new AMap.Pixel(-180, -50),
583 673 })
  674 + console.log("infoWindowData",infoWindowData);
584 675 return infoWindowData
585 676 },
586 677 closeInfoWindow(e) {
587 678 // 引入本地图片
588 679 this.markers.forEach((marker) => {
589 680 console.log('打印marker', marker);
590   - const oldIcon = new AMap.Icon({
591   - size: new AMap.Size(30, 34), // 图标尺寸
592   - image:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
593   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  681 + // const oldIcon = new AMap.Icon({
  682 + // size: new AMap.Size(30, 34), // 图标尺寸
  683 + // image:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
  684 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  685 + // });
  686 + const oldIcon = new T.Icon({
  687 + iconSize: T.Point(30, 34), // 图标尺寸
  688 + iconUrl:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
  689 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
594 690 });
595   - if (marker._amap_id == this.clickMapId) {
  691 + if (marker.tid == this.clickMapId) {
596 692 marker.isActive = true;
597 693 marker.setIcon(oldIcon);
598 694 }
599 695 });
600 696 this.clickMapId = '';
601   - this.map.clearInfoWindow();
  697 + // this.map.clearInfoWindow();
  698 + this.map.closeInfoWindow();
602 699 },
603 700 }
604 701 }
... ... @@ -619,6 +716,25 @@ export default {
619 716 }
620 717 </style>
621 718 <style lang="scss" scoped>
  719 +
  720 +::v-deep .tdt-infowindow-content-wrapper{
  721 + box-shadow:none;
  722 + background:rgba(255, 255, 255, 0);
  723 +}
  724 +
  725 +::v-deep .tdt-infowindow-close-button{
  726 + display: none;
  727 +}
  728 +
  729 +::v-deep .tdt-infowindow-tip-container{
  730 + display: none;
  731 +}
  732 +
  733 +::v-deep .tdt-infowindow{
  734 + bottom: 40px !important;
  735 + left: -360px !important;
  736 +}
  737 +
622 738 #mapContainer {
623 739 min-width: 865px;
624 740 min-height: 630px;
... ...
frontend/front/src/views/pages/gasCylinderManage/gasCylinderMap/index.vue
  Diff comments   View file @27cc8f1
... ... @@ -31,14 +31,14 @@
31 31 </el-form-item>
32 32 </el-form>
33 33 </div>
34   - <div class="mapSty">
  34 + <div class="mapSty" v-loading="loading">
35 35 <div id="mapContainer"
36 36 class="map"
37 37 tabindex="0">
38 38 </div>
39 39 </div>
40 40 <div ref="infoData"
41   - v-if="infoWindowVisible"
  41 + v-show="infoWindowVisible"
42 42 class="custom-info input-card content-window-card">
43 43 <div class="info-top" style="display: flex; justify-content: space-between;align-items: center">
44 44 <div>
... ... @@ -375,6 +375,7 @@ export default {
375 375 pointData: [],
376 376 nodeList:[],
377 377 centerPoint:[114.347441, 30.50438],
  378 + loading:false,
378 379 }
379 380 },
380 381 mounted() {
... ... @@ -431,6 +432,7 @@ export default {
431 432 },
432 433 //查询按钮
433 434 handleSearch() {
  435 + this.markers = [];
434 436 this.pointData = [];
435 437 this.infoWindowVisible = false;
436 438 this.getMarkPoint();
... ... @@ -443,12 +445,17 @@ export default {
443 445 this.handleSearch();
444 446 },
445 447 async getMarkPoint(){
  448 + this.loading = true;
446 449 let params ={
447 450 qzId:this.queryForm.qzId,
448 451 qyId: this.queryForm.qyId,
449 452 }
450 453 await getAppTagTypes(params).then((res)=>{
451 454 let { code, value} = res;
  455 + if(!value.length){
  456 + this.loading = false;
  457 + return
  458 + }
452 459 if(code == 200){
453 460 value.map((item,index)=>{
454 461 if(item.typeone.length>0){
... ... @@ -502,43 +509,93 @@ export default {
502 509 version: '2.0' //数据可视化
503 510 }
504 511 }).then((AMap) => {
505   - this.map = new AMap.Map('mapContainer', {//设置地图容器id
506   - viewMode: '2D', //是否为3D地图模式
507   - zoom: 16, //初始化地图层级
508   - center: this.centerPoint,//初始化地图中心点
509   - });
510   - //信息窗口实例
511   - //循环所有的标记点
512   - console.log('打印pointData',this.pointData);
513   - let arr =[];
514   - for (let i = 0; i < this.pointData.length; i++) {
515   - const num = i + 1;
516   - const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
517   - // 引入本地图片
518   - const localIcon = new AMap.Icon({
519   - size: new AMap.Size(30, 34), // 图标尺寸
520   - image: iconImg, // 图片的URL
521   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
522   - });
523   - var marker = new AMap.Marker({
524   - position: [this.pointData[i].fjd, this.pointData[i].fwd],
525   - map: this.map,
526   - icon:localIcon,
527   - offset: new AMap.Pixel(-15, -20),
  512 + // this.map = new AMap.Map('mapContainer', {//设置地图容器id
  513 + // viewMode: '2D', //是否为3D地图模式
  514 + // zoom: 16, //初始化地图层级
  515 + // center: this.centerPoint,//初始化地图中心点
  516 + // });
  517 +
  518 + // ===========天地图代码==============
  519 + if(!this.map){
  520 + // 防止二次初始化导致拖拽失效
  521 + this.map = new T.Map('mapContainer',{
  522 + projection: 'EPSG:900913'
528 523 });
529   - arr.push( Object.assign(this.pointData[i], {
530   - mapId: marker._amap_id,
531   - }))
532   - // 将创建的点标记添加到已有的地图实例+
  524 + }
  525 + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16);
  526 + //允许鼠标双击放大地图
  527 + this.map.enableScrollWheelZoom();
  528 + let arr = [];
  529 + const seenCoordinates = new Set(); // 记录已经处理的经纬度
  530 +
  531 + for (let i = 0; i < this.pointData.length; i++) {
  532 + const point = this.pointData[i];
  533 + const coordsKey = `${point.fjd},${point.fwd}`; // 使用经纬度创建唯一的键
  534 + // 如果经纬度之前未处理过，则添加到数组和地图
  535 +
  536 + // 创建本地图标
  537 + const localIcon = new T.Icon({
  538 + iconUrl: iconImg,
  539 + iconSize: new T.Point(30, 34),
  540 + iconAnchor: new T.Point(30, 34),
  541 + });
  542 +
  543 + // 创建自定义标记
  544 + const marker = new T.Marker(new T.LngLat(point.fjd, point.fwd), { icon: localIcon });
  545 + arr.push(Object.assign(point, { mapId: point.id }));
533 546 marker['arr'] = arr;
534   - marker['isActive'] = this.pointData[i].isActive;
535   - // console.log('marker=====', marker);
536   - this.map.add([marker]);
537   - // marker.content = '我是第' + (i + 1) + '个Marker';
538   - marker.on("click", this.markerClick);
  547 + marker['isActive'] = point.isActive;
  548 + marker['type'] = point.type;
  549 + marker['tid'] = point.id;
539 550 this.markers.push(marker);
540   - marker.emit('click', {target: marker});
  551 + if (!seenCoordinates.has(coordsKey)) {
  552 + seenCoordinates.add(coordsKey);
  553 + // 绑定点击事件
  554 + marker.addEventListener("click", this.markerClick.bind(null, marker));
  555 + // 将标记添加到地图
  556 + this.map.addOverLay(marker);
  557 + }
541 558 }
  559 + // 创建并添加标记集群
  560 + new T.MarkerClusterer(this.map, { markers: this.markers });
  561 + // 更新加载状态
  562 + this.loading = false;
  563 + // ===========天地图代码==============
  564 +
  565 +
  566 + //信息窗口实例
  567 + //循环所有的标记点
  568 + // console.log('打印pointData',this.pointData);
  569 + // let arr =[];
  570 + // for (let i = 0; i < this.pointData.length; i++) {
  571 + // const num = i + 1;
  572 + // const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
  573 + // // 引入本地图片
  574 + // const localIcon = new AMap.Icon({
  575 + // size: new AMap.Size(30, 34), // 图标尺寸
  576 + // image: iconImg, // 图片的URL
  577 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  578 + // });
  579 + // var marker = new AMap.Marker({
  580 + // position: [this.pointData[i].fjd, this.pointData[i].fwd],
  581 + // map: this.map,
  582 + // icon:localIcon,
  583 + // offset: new AMap.Pixel(-15, -20),
  584 + // });
  585 + // arr.push( Object.assign(this.pointData[i], {
  586 + // mapId: marker._amap_id,
  587 + // }))
  588 + // // 将创建的点标记添加到已有的地图实例+
  589 + // marker['arr'] = arr;
  590 + // marker['isActive'] = this.pointData[i].isActive;
  591 + // // console.log('marker=====', marker);
  592 + // this.map.add([marker]);
  593 + // // marker.content = '我是第' + (i + 1) + '个Marker';
  594 + // // marker.on("click", this.markerClick);
  595 + // this.markers.push(marker);
  596 + // marker.emit('click', {target: marker});
  597 + // }
  598 + return
542 599 AMap.plugin('AMap.DistrictSearch', function () {
543 600 //创建行政区查询对象
544 601 var options = {
... ... @@ -577,43 +634,81 @@ export default {
577 634 });
578 635 },
579 636 //点击点标记事件
580   - markerClick(e) {
581   - this.infoWindowVisible = true;
582   - let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id);
  637 + markerClick(event,e) {
  638 + // this.infoWindowVisible = true;
  639 + let arrNew = e.target.arr.filter((x) => x.mapId == e.target.tid);
583 640 this.devInfo = arrNew && arrNew[0];
584 641 // infoWindow.setContent(e.target.content);
585 642 console.log('打印res', arrNew);
586 643 // 如果已选中，则不做处理
  644 + this.clickMapId = e.target.tid;
  645 + if (!e.target.isActive) {
  646 + // 如果已选中，则不做处理
  647 + this.getPointDetailInfo(arrNew[0].fqptm, e);
  648 + this.infoWindowVisible = true;
  649 + let content = this.$refs.infoData;
  650 + if (!content) return
  651 + var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
  652 + console.log("content", content);
  653 + console.log("lnglat", lnglat);
  654 + var infoWin = new T.InfoWindow();
  655 + infoWin.setLngLat(lnglat);
  656 + infoWin.setContent(content);
  657 + this.map.openInfoWindow(content, lnglat);
  658 + this.map.panTo(lnglat);
  659 + }
587 660  
588   - // 引入本地图片
589   - const newIcon = new AMap.Icon({
590   - size: new AMap.Size(30, 34), // 图标尺寸
591   - image: iconImg1, // 图片的URL
592   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  661 + const newIcon = new T.Icon({
  662 + iconSize: T.Point(30, 34), // 图标尺寸
  663 + iconUrl: iconImg1, // 图片的URL
  664 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
593 665 });
594   - const oldIcon = new AMap.Icon({
595   - size: new AMap.Size(30, 34), // 图标尺寸
596   - image: iconImg, // 图片的URL
597   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  666 + const oldIcon = new T.Icon({
  667 + iconSize: T.Point(30, 34), // 图标尺寸
  668 + iconUrl: iconImg, // 图片的URL
  669 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
598 670 });
599   - if (!e.target.isActive) {
600   - e.target.isActive = true;
601   - this.clickMapId = '';
602   - } else {
603   - e.target.isActive = false;
604   - this.getPointDetailInfo(arrNew[0].fqptm,e);
605   - this.clickMapId = e.target._amap_id;
606   - }
  671 +
607 672 this.markers.forEach((marker) => {
608   - if (marker._amap_id !== this.clickMapId) {
609   - marker.isActive = true;
  673 + if (marker.tid !== this.clickMapId) {
  674 + // marker.isActive = true;
610 675 marker.setIcon(oldIcon);
611   - }else{
612   - marker.isActive = false;
613   - console.log('打印marker',marker);
  676 + } else {
  677 + // marker.isActive = false;
  678 + console.log('打印marker', marker);
614 679 marker.setIcon(newIcon);
615 680 }
616 681 });
  682 +
  683 + // 引入本地图片
  684 + // const newIcon = new AMap.Icon({
  685 + // size: new AMap.Size(30, 34), // 图标尺寸
  686 + // image: iconImg1, // 图片的URL
  687 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  688 + // });
  689 + // const oldIcon = new AMap.Icon({
  690 + // size: new AMap.Size(30, 34), // 图标尺寸
  691 + // image: iconImg, // 图片的URL
  692 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  693 + // });
  694 + // if (!e.target.isActive) {
  695 + // e.target.isActive = true;
  696 + // this.clickMapId = '';
  697 + // } else {
  698 + // e.target.isActive = false;
  699 + // this.getPointDetailInfo(arrNew[0].fqptm,e);
  700 + // this.clickMapId = e.target._amap_id;
  701 + // }
  702 + // this.markers.forEach((marker) => {
  703 + // if (marker._amap_id !== this.clickMapId) {
  704 + // marker.isActive = true;
  705 + // marker.setIcon(oldIcon);
  706 + // }else{
  707 + // marker.isActive = false;
  708 + // console.log('打印marker',marker);
  709 + // marker.setIcon(newIcon);
  710 + // }
  711 + // });
617 712 // 更新选中的标记点
618 713 // 设置当前点击的标记点样式
619 714 // e.target.setIcon(newIcon); // 或者其他方法来重置样式
... ... @@ -626,8 +721,8 @@ export default {
626 721 console.log('打印res',res);
627 722 const { value} = res;
628 723 const {qpdqlzs,qpOrderInfoVO} = value;
629   - var infoWindow = this.createInfoWindow();
630   - infoWindow.open(this.map, e.target.getPosition());
  724 + // var infoWindow = this.createInfoWindow();
  725 + // infoWindow.open(this.map, e.target.getPosition());
631 726 this.devInfoList = await this.$assignValues(value, this.devInfoList);
632 727 this.nodeList = await this.$createDoubleArray(qpdqlzs,5);
633 728 console.log('打印this.nodeList', this.nodeList);
... ... @@ -653,19 +748,32 @@ export default {
653 748 },
654 749 closeInfoWindow() {
655 750 // 引入本地图片
656   - const oldIcon = new AMap.Icon({
657   - size: new AMap.Size(30, 34), // 图标尺寸
658   - image: iconImg, // 图片的URL
659   - imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  751 + // const oldIcon = new AMap.Icon({
  752 + // size: new AMap.Size(30, 34), // 图标尺寸
  753 + // image: iconImg, // 图片的URL
  754 + // imageSize: new AMap.Size(30, 34), // 图标所用图片大小
  755 + // });
  756 + // this.markers.forEach((marker) => {
  757 + // if (marker._amap_id == this.clickMapId) {
  758 + // marker.isActive = true;
  759 + // marker.setIcon(oldIcon);
  760 + // }
  761 + // });
  762 + // this.clickMapId = '';
  763 + // this.map.clearInfoWindow();
  764 +
  765 + const oldIcon = new T.Icon({
  766 + iconSize: T.Point(30, 34), // 图标尺寸
  767 + iconUrl: iconImg, // 图片的URL
  768 + iconAnchor: T.Point(30, 34), // 图标所用图片大小
660 769 });
661 770 this.markers.forEach((marker) => {
662   - if (marker._amap_id == this.clickMapId) {
663   - marker.isActive = true;
  771 + if (marker.tid == this.clickMapId) {
664 772 marker.setIcon(oldIcon);
665 773 }
666 774 });
667 775 this.clickMapId = '';
668   - this.map.clearInfoWindow();
  776 + this.map.closeInfoWindow();
669 777 },
670 778 }
671 779 }
... ... @@ -686,6 +794,24 @@ export default {
686 794 }
687 795 </style>
688 796 <style lang="scss" scoped>
  797 +::v-deep .tdt-infowindow-content-wrapper {
  798 + box-shadow: none;
  799 + background: rgba(255, 255, 255, 0);
  800 +}
  801 +
  802 +::v-deep .tdt-infowindow-close-button {
  803 + display: none;
  804 +}
  805 +
  806 +::v-deep .tdt-infowindow-tip-container {
  807 + display: none;
  808 +}
  809 +
  810 +::v-deep .tdt-infowindow {
  811 + bottom: 40px !important;
  812 + left: -360px !important;
  813 +}
  814 +
689 815 #mapContainer {
690 816 min-width: 865px;
691 817 min-height: 630px;
... ...
frontend/front/src/views/pages/regionalManage/components/regionManage.vue
  Diff comments   View file @27cc8f1
... ... @@ -209,6 +209,7 @@ export default {
209 209 size:10,
210 210 total:0
211 211 },
  212 + handler:null,
212 213  
213 214 }
214 215 },
... ... @@ -362,92 +363,152 @@ export default {
362 363 }
363 364 }).then((AMap)=>{
364 365 console.log('打印AMap====>',AMap);
365   - this.map = new AMap.Map('mapContainer', {//设置地图容器id
366   - viewMode: '2D', //是否为3D地图模式
367   - zoom: 16, //初始化地图层级
368   - center: this.centerPoint,//初始化地图中心点
  366 + let that = this;
  367 + this.map = new T.Map('mapContainer',{
  368 + projection: 'EPSG:900913'
369 369 });
  370 + this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16);
  371 + //允许鼠标双击放大地图
  372 + this.map.enableScrollWheelZoom();
  373 + // 允许拖拽
  374 + setTimeout(function () {
  375 + that.map.enableDrag();
  376 + }, 500);
  377 +
  378 + var config = {
  379 + showLabel: true,
  380 + color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
  381 + };
  382 + //创建标注工具对象
  383 + this.polygonTool = new T.PolygonTool(this.map, config);
  384 +
  385 +
  386 + // this.map = new AMap.Map('mapContainer', {//设置地图容器id
  387 + // viewMode: '2D', //是否为3D地图模式
  388 + // zoom: 16, //初始化地图层级
  389 + // center: this.centerPoint,//初始化地图中心点
  390 + // });
  391 +
  392 +
370 393 // this.map.on('rightclick', (e)=> {
371 394 // this.rightclickObj(); //定义右键内容
372 395 // this.contextMenu.open(this.map, e.lnglat);
373 396 // this.contextMenuPositon = e.lnglat; //右键菜单位置
374 397 // });
375   - let that = this;
376   - this.mouseTool =new AMap.MouseTool(this.map);
377   - this.mouseTool.on('draw',function (e){
378   - if(that.overlays.length>0){
379   - console.log('打印this.overlays=====>',that.overlays);
380   - that.map.remove(that.overlays);
381   - //关闭绘画
382   - // that.mouseTool.close(true);
383   - that.overlays = [];
384   - }
385   - if(that.dialogParams.fShape == '圆形'){
386   - let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点
387   - let circleRadius = e.obj.getRadius();//获取半径
388   - that.dialogParams.radius = circleRadius;
389   - let circlePointList = [
390   - {
391   - jd:circleCenterPoint.lng,
392   - wd:circleCenterPoint.lat
393   - }
394   - ];
395   - that.circleOverlays = circlePointList;
396   - console.log('打印position',circleCenterPoint,circleRadius);
397   - }
398   - that.overlays.push(e.obj);
399   - console.log('打印that.overlays',that.overlays);
400   - })
  398 +
  399 + // let that = this;
  400 + // this.mouseTool = new AMap.MouseTool(this.map);
  401 + // this.mouseTool.on('draw',function (e){
  402 + // console.log("e======",e);
  403 + // if(that.overlays.length>0){
  404 + // console.log('打印this.overlays=====>',that.overlays);
  405 + // that.map.remove(that.overlays);
  406 + // //关闭绘画
  407 + // // that.mouseTool.close(true);
  408 + // that.overlays = [];
  409 + // }
  410 + // if(that.dialogParams.fShape == '圆形'){
  411 + // let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点
  412 + // let circleRadius = e.obj.getRadius();//获取半径
  413 + // that.dialogParams.radius = circleRadius;
  414 + // let circlePointList = [
  415 + // {
  416 + // jd:circleCenterPoint.lng,
  417 + // wd:circleCenterPoint.lat
  418 + // }
  419 + // ];
  420 + // that.circleOverlays = circlePointList;
  421 + // console.log('打印position',circleCenterPoint,circleRadius);
  422 + // }
  423 + // that.overlays.push(e.obj);
  424 + // console.log('打印that.overlays',that.overlays);
  425 + // })
401 426 if(this.dialogParams.dialogType == 'edit'){
402   - var editShap = null;
  427 + // var editShap = null;
403 428 if(this.dialogParams.fShape == '圆形'){
404   - editShap = new AMap.Circle({
405   - center: this.dialogParams.centerOfCircle,
406   - radius: this.dialogParams.radius, //半径
407   - borderWeight: 3,
408   - strokeColor: "#FF33FF",
409   - // strokeOpacity: 1,
410   - strokeWeight: 6,
411   - strokeOpacity: 0.2,
412   - fillOpacity: 0.4,
413   - strokeStyle: 'dashed',
414   - strokeDasharray: [10, 10],
415   - // 线样式还支持 'dashed'
416   - fillColor: '#1791fc',
417   - zIndex: 50,
418   - });
419   - this.mapEditor = new AMap.CircleEditor(this.map, editShap);
420   - }else if(this.dialogParams.fShape == '矩形'){
421   - var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1])
422   - var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1])
423   - var bounds = new AMap.Bounds(southWest, northEast)
424   - editShap = new AMap.Rectangle({
425   - bounds: bounds,
426   - strokeColor:'#FF33FF',
427   - strokeWeight: 6,
428   - strokeOpacity:0.2,
429   - strokeDasharray: [30,10],
430   - // strokeStyle还支持 solid
431   - // 线样式还支持 'dashed'
432   - fillColor: '#1791fc',
433   - strokeStyle: 'dashed',
  429 + this.handler = new T.Circle(new T.LngLat(
  430 + this.dialogParams.centerOfCircle[0],
  431 + this.dialogParams.centerOfCircle[1]),
  432 + parseInt(this.dialogParams.radius),{
  433 + color:"blue",
  434 + weight:5,
  435 + opacity:0.5,
  436 + fillColor:"#FFFFFF",
434 437 fillOpacity:0.5,
435   - cursor:'pointer',
436   - zIndex:50,
437   - });
438   - this.mapEditor = new AMap.RectangleEditor(this.map, editShap);
439   - }else {
440   - editShap = new AMap.Polygon({
441   - path: this.dialogParams.polygonPoint,
442   - strokeColor: "#FF33FF",
443   - strokeWeight: 6,
444   - strokeOpacity: 0.2,
445   - fillOpacity: 0.4,
446   - fillColor: '#1791fc',
447   - zIndex: 50,
  438 + lineStyle:"solid"});
  439 + this.handler.enableEdit();
  440 + this.handler.on("edit",this.editPointsDrawCircle);
  441 + this.map.addOverLay(this.handler);
  442 + // editShap = new AMap.Circle({
  443 + // center: this.dialogParams.centerOfCircle,
  444 + // radius: this.dialogParams.radius, //半径
  445 + // borderWeight: 3,
  446 + // strokeColor: "#FF33FF",
  447 + // // strokeOpacity: 1,
  448 + // strokeWeight: 6,
  449 + // strokeOpacity: 0.2,
  450 + // fillOpacity: 0.4,
  451 + // strokeStyle: 'dashed',
  452 + // strokeDasharray: [10, 10],
  453 + // // 线样式还支持 'dashed'
  454 + // fillColor: '#1791fc',
  455 + // zIndex: 50,
  456 + // });
  457 + // this.mapEditor = new AMap.CircleEditor(this.map, editShap);
  458 + }else if(this.dialogParams.fShape == '矩形'){
  459 + // var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1])
  460 + // var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1])
  461 + // var bounds = new AMap.Bounds(southWest, northEast)
  462 + // editShap = new AMap.Rectangle({
  463 + // bounds: bounds,
  464 + // strokeColor:'#FF33FF',
  465 + // strokeWeight: 6,
  466 + // strokeOpacity:0.2,
  467 + // strokeDasharray: [30,10],
  468 + // // strokeStyle还支持 solid
  469 + // // 线样式还支持 'dashed'
  470 + // fillColor: '#1791fc',
  471 + // strokeStyle: 'dashed',
  472 + // fillOpacity:0.5,
  473 + // cursor:'pointer',
  474 + // zIndex:50,
  475 + // });
  476 + // this.mapEditor = new AMap.RectangleEditor(this.map, editShap);
  477 + var bounds = new T.LngLatBounds(new T.LngLat(
  478 + this.dialogParams.rectangleSouthPoint[0],
  479 + this.dialogParams.rectangleSouthPoint[1]),
  480 + new T.LngLat(
  481 + this.dialogParams.rectangleNothPoint[0],
  482 + this.dialogParams.rectangleNothPoint[1]
  483 + ));
  484 + this.handler = new T.Rectangle(bounds);
  485 + this.handler.enableEdit();
  486 + this.handler.on("edit",this.editPointsDrawRectangle);
  487 + this.map.addOverLay(this.handler);
  488 + } else {
  489 + // editShap = new AMap.Polygon({
  490 + // path: this.dialogParams.polygonPoint,
  491 + // strokeColor: "#FF33FF",
  492 + // strokeWeight: 6,
  493 + // strokeOpacity: 0.2,
  494 + // fillOpacity: 0.4,
  495 + // fillColor: '#1791fc',
  496 + // zIndex: 50,
  497 + // });
  498 + // this.mapEditor = new AMap.PolyEditor(this.map, editShap);
  499 + var points = [];
  500 + this.dialogParams.polygonPoint.map(item =>{
  501 + points.push(new T.LngLat(item[0], item[1]));
  502 + })
  503 + this.handler = new T.Polygon(points,{
  504 + color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
448 505 });
449   - this.mapEditor = new AMap.PolyEditor(this.map, editShap);
  506 + //向地图上添加面
  507 + this.handler.enableEdit();
  508 + this.handler.on("edit",this.editPointsDrawPolygon);
  509 + this.map.addOverLay(this.handler);
450 510 }
  511 + return
451 512 editShap.setMap(this.map);
452 513 // 缩放地图到合适的视野级别
453 514 this.map.setFitView([ editShap ]);
... ... @@ -475,34 +536,131 @@ export default {
475 536 },
476 537 //结束编辑
477 538 closeDraw(){
478   - this.mapEditor.close();
  539 + // this.mapEditor.close();
  540 + this.handler.disableEdit();
  541 + },
  542 + getPointsDrawPolygon(e){
  543 + let that = this;
  544 + let arry = e.currentLnglats;
  545 + arry.forEach(item => {
  546 + that.overlays.push({
  547 + jd:item.lng,
  548 + wd:item.lat
  549 + });
  550 + });
  551 + that.overlays.push(that.overlays[0])
  552 + console.log('多边形overlays===',JSON.parse(JSON.stringify(this.overlays)));
  553 + },
  554 + // 编辑多边形
  555 + editPointsDrawPolygon(e){
  556 + let that = this;
  557 + let lines = this.handler.getLngLats();
  558 + let arry = lines[0];
  559 + arry.forEach(item => {
  560 + that.overlays.push({
  561 + jd:item.lng,
  562 + wd:item.lat
  563 + });
  564 + });
  565 + that.overlays.push(that.overlays[0])
  566 + console.log('编辑多边形overlays===',JSON.parse(JSON.stringify(this.overlays)));
  567 + },
  568 + getPointsDrawRectangle(e){
  569 + let that = this;
  570 + let arry = e.currentBounds;
  571 + let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角
  572 + let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角
  573 + let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角
  574 + let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角
  575 + // 将四个角点推入 overlays 数组
  576 + that.overlays = [southwest, northwest, northeast, southeast];
  577 + console.log("矩形===",this.overlays);
  578 + },
  579 + //编辑矩形
  580 + editPointsDrawRectangle(e){
  581 + console.log("编辑矩形",e);
  582 + // console.log("矩形范围",this.handler.getBounds());
  583 + let that = this;
  584 + let arry = e.target.Qr;
  585 + let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角
  586 + let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角
  587 + let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角
  588 + let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角
  589 + // 将四个角点推入 overlays 数组
  590 + that.overlays = [southwest, northwest, northeast, southeast];
  591 + console.log("矩形===",this.overlays);
  592 + },
  593 + getPointsDrawCircle(e){
  594 + console.log("圆形",e);
  595 + let arry = e.currentCenter;
  596 + let circleRadius = e.currentRadius
  597 + this.overlays = [{jd:arry.lng, wd:arry.lat}]
  598 + this.circleOverlays = [{jd:arry.lng, wd:arry.lat}]
  599 + this.dialogParams.radius = circleRadius
  600 + },
  601 + // 编辑圆形
  602 + editPointsDrawCircle(e){
  603 + console.log("编辑圆形e",e);
  604 + let center,radius;
  605 + center = this.handler.getCenter();
  606 + radius = this.handler.getRadius();
  607 + this.overlays = [{jd:center.lng, wd:center.lat}];
  608 + this.circleOverlays = [{jd:center.lng, wd:center.lat}];
  609 + this.dialogParams.radius = radius;
479 610 },
480 611 //draw 绘制圆形，矩形，多边形
481 612 draw(type,shapType){
482 613 if(this.dialogParams.dialogType == 'edit'){
483   - this.mapEditor.close();
  614 + this.handler.close();
  615 + // this.handler.clear();
  616 + // this.mapEditor.close();
484 617 }
  618 + this.overlays = [];
485 619 this.dialogParams.fShape = shapType;
486 620 switch (type){
487 621 case 'polygon':{
488   - this.mouseTool.polygon({
489   - fillColor:'#00b0ff',
490   - strokeColor:'#80d8ff'
491   - });
  622 + if (this.handler) {
  623 + this.handler.close();
  624 + this.handler.clear();
  625 + }
  626 + this.handler = new T.PolygonTool(this.map);
  627 + this.handler.open();
  628 + this.handler.addEventListener("draw",this.getPointsDrawPolygon);
  629 +
  630 + // this.mouseTool.polygon({
  631 + // fillColor:'#00b0ff',
  632 + // strokeColor:'#80d8ff'
  633 + // });
492 634 break;
493 635 }
494 636 case 'rectangle':{
495   - this.mouseTool.rectangle({
496   - fillColor:'#00b0ff',
497   - strokeColor:'#80d8ff'
498   - });
  637 + if (this.handler) {
  638 + this.handler.close();
  639 + this.handler.clear();
  640 + }
  641 + this.handler = new T.RectangleTool(this.map, {follow: true});
  642 + this.handler.open();
  643 + this.handler.addEventListener("draw",this.getPointsDrawRectangle);
  644 +
  645 + // this.mouseTool.rectangle({
  646 + // fillColor:'#00b0ff',
  647 + // strokeColor:'#80d8ff'
  648 + // });
499 649 break;
500 650 }
501 651 case 'circle':{
502   - this.mouseTool.circle({
503   - fillColor:'#00b0ff',
504   - strokeColor:'#80d8ff'
505   - });
  652 + if (this.handler) {
  653 + this.handler.close();
  654 + this.handler.clear();
  655 + }
  656 + this.handler = new T.CircleTool(this.map, {follow: true});
  657 + this.handler.open();
  658 + this.handler.addEventListener("draw",this.getPointsDrawCircle);
  659 +
  660 + // this.mouseTool.circle({
  661 + // fillColor:'#00b0ff',
  662 + // strokeColor:'#80d8ff'
  663 + // });
506 664 break;
507 665 }
508 666 }
... ... @@ -511,20 +669,21 @@ export default {
511 669 async handleSubmit(formName){
512 670 this.$refs[formName].validate(async (valid) => {
513 671 if (valid) {
514   - console.log('打印this.overlays.',this.overlays)
  672 + console.log('打印this.overlays',this.overlays)
515 673 if(this.overlays.length<=0){
516 674 this.$message.warning('请规划区域!');
517 675 return;
518 676 }
519   - console.log('打印this.overLays',);
520   - let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{
521   - return {
522   - jd:item.lng,
523   - wd:item.lat
524   - }
525   - });
526   - jwdDTOListArray.push(jwdDTOListArray[0]);
527   - console.log('打印jwdDTOListArray',jwdDTOListArray);
  677 + // let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{
  678 + // console.log("item222",item);
  679 + // return {
  680 + // jd:item.lng,
  681 + // wd:item.lat
  682 + // }
  683 + // });
  684 + // jwdDTOListArray.push(jwdDTOListArray);
  685 + let jwdDTOListArray = this.overlays
  686 + console.log("jwdDTOListArray",jwdDTOListArray);
528 687 let params= {
529 688 id:this.dialogParams.id,
530 689 fName: this.dialogParams.regionalName,
... ... @@ -540,9 +699,11 @@ export default {
540 699 radius:this.dialogParams.radius
541 700 }
542 701 }
  702 + console.log("params",params);
  703 + // return;
543 704 await regionalAddEditPort(params).then((res)=>{
544 705 this.dialogParams.dialogVisible = false;
545   - this.mouseTool.close(true);
  706 + // this.mouseTool.close(true);
546 707 this.overlays = [];
547 708 this.handleSearch();
548 709 this.pageParam.page = 1;
... ... @@ -556,7 +717,7 @@ export default {
556 717 handleDialogClose(){
557 718 this.$refs.dialogParams.resetFields();
558 719 this.dialogParams.dialogVisible = false;
559   - this.mouseTool.close(true);
  720 + // this.mouseTool.close(true);
560 721 this.overlays = [];
561 722  
562 723 },
... ... @@ -576,6 +737,7 @@ export default {
576 737 this.dialogParams.dialogType= type;
577 738 switch (type){
578 739 case 'add':
  740 + this.handler = null;
579 741 this.dialogParams.fSsczid = this.rowData.fSsczid;
580 742 this.dialogParams.id ='';
581 743 this.dialogParams.radius = '';
... ...