Commit 27cc8f16f46c916212987e0a398d1c6efd41098e
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
| @@ -18,6 +18,7 @@ | @@ -18,6 +18,7 @@ | ||
| 18 | <script src="<%= BASE_URL %>ddLogin.js"></script> | 18 | <script src="<%= BASE_URL %>ddLogin.js"></script> |
| 19 | <script src="<%= BASE_URL %>LarkSSOSDKWebQRCode-1.0.1.js"></script> | 19 | <script src="<%= BASE_URL %>LarkSSOSDKWebQRCode-1.0.1.js"></script> |
| 20 | <link rel="stylesheet" href="<%= BASE_URL %>static/css/loading.css" /> | 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 | <script type="text/javascript"> | 22 | <script type="text/javascript"> |
| 22 | window._AMapSecurityConfig = { | 23 | window._AMapSecurityConfig = { |
| 23 | securityJsCode:'0b63a538e25f626fbfd6dbfe5bb2808a', | 24 | securityJsCode:'0b63a538e25f626fbfd6dbfe5bb2808a', |
frontend/front/src/views/pages/carMap/index.vue
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | <div class="container"> | 2 | <div class="container"> |
| 3 | <div class="searchSty"> | 3 | <div class="searchSty"> |
| 4 | <el-form :inline="true" style="display: flex; justify-content: space-between" :model="queryForm" | 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 | <!-- <el-form-item label="气站名称:">--> | 6 | <!-- <el-form-item label="气站名称:">--> |
| 7 | <!-- <el-input v-model="queryForm.orgname" clearable placeholder="请输入气站名称"></el-input>--> | 7 | <!-- <el-input v-model="queryForm.orgname" clearable placeholder="请输入气站名称"></el-input>--> |
| 8 | <!-- </el-form-item>--> | 8 | <!-- </el-form-item>--> |
| @@ -22,54 +22,49 @@ | @@ -22,54 +22,49 @@ | ||
| 22 | </div> | 22 | </div> |
| 23 | <el-form-item> | 23 | <el-form-item> |
| 24 | <el-button type="primary" icon="el-icon-refresh" | 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 | </el-button> | 27 | </el-button> |
| 28 | <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;" | 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 | </el-button> | 30 | </el-button> |
| 31 | </el-form-item> | 31 | </el-form-item> |
| 32 | </el-form> | 32 | </el-form> |
| 33 | </div> | 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 | </div> | 36 | </div> |
| 39 | </div> | 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 | <div class="info-top" style="display: flex; justify-content: space-between;align-items: center"> | 39 | <div class="info-top" style="display: flex; justify-content: space-between;align-items: center"> |
| 44 | <div> | 40 | <div> |
| 45 | <span style="color: #ffffff;">车辆信息</span> | 41 | <span style="color: #ffffff;">车辆信息</span> |
| 46 | </div> | 42 | </div> |
| 47 | <div @click="closeInfoWindow" style="display: flex;align-items: center"> | 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 | </div> | 45 | </div> |
| 50 | </div> | 46 | </div> |
| 51 | - <div class="info-middle" | ||
| 52 | - style="background-color: white;"> | 47 | + <div class="info-middle" style="background-color: white;"> |
| 53 | <el-row> | 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 | <div class="info-div" style="display: flex"> | 51 | <div class="info-div" style="display: flex"> |
| 57 | <div style="text-align: right;width: 168px;"> | 52 | <div style="text-align: right;width: 168px;"> |
| 58 | - {{bitem.name}}： | 53 | + {{ bitem.name }}： |
| 59 | </div> | 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 | </div> | 56 | </div> |
| 62 | </el-col> | 57 | </el-col> |
| 63 | </el-col> | 58 | </el-col> |
| 64 | </el-row> | 59 | </el-row> |
| 65 | </div> | 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 | </div> | 63 | </div> |
| 69 | </div> | 64 | </div> |
| 70 | </template> | 65 | </template> |
| 71 | <script> | 66 | <script> |
| 72 | -import { getAppTagTypes,getMapPointDetailInfo } from '@/api/gasMap.js' | 67 | +import { getAppTagTypes, getMapPointDetailInfo } from '@/api/gasMap.js' |
| 73 | import { getCurrentEnterpriseAndStation } from '@/api/common.js' | 68 | import { getCurrentEnterpriseAndStation } from '@/api/common.js' |
| 74 | import AMapLoader from '@amap/amap-jsapi-loader'; | 69 | import AMapLoader from '@amap/amap-jsapi-loader'; |
| 75 | import iconImg from '@/assets/qpxx/car.png' | 70 | import iconImg from '@/assets/qpxx/car.png' |
| @@ -82,147 +77,150 @@ export default { | @@ -82,147 +77,150 @@ export default { | ||
| 82 | name: "index", | 77 | name: "index", |
| 83 | data() { | 78 | data() { |
| 84 | return { | 79 | return { |
| 85 | - rightImgUrl:rightImg, | ||
| 86 | - dailyRecordImgUrl:dailyRecordImg, | 80 | + rightImgUrl: rightImg, |
| 81 | + dailyRecordImgUrl: dailyRecordImg, | ||
| 87 | queryForm: { | 82 | queryForm: { |
| 88 | qzId: "", //气站id | 83 | qzId: "", //气站id |
| 89 | qyId: "" //企业id | 84 | qyId: "" //企业id |
| 90 | }, | 85 | }, |
| 91 | qyOption: [], | 86 | qyOption: [], |
| 92 | - allOption:[], | 87 | + allOption: [], |
| 93 | qzOption: [], | 88 | qzOption: [], |
| 94 | - reference:{}, | 89 | + reference: {}, |
| 95 | // 控制渲染条件 如果不用v-if会报错 具体可自行尝试 | 90 | // 控制渲染条件 如果不用v-if会报错 具体可自行尝试 |
| 96 | showPop: false, | 91 | showPop: false, |
| 97 | // 保存当前激活的refrence id | 92 | // 保存当前激活的refrence id |
| 98 | - activeId:'', | ||
| 99 | - devInfoList1:[], | 93 | + activeId: '', |
| 94 | + devInfoList1: [], | ||
| 100 | devInfoList: [ | 95 | devInfoList: [ |
| 101 | { | 96 | { |
| 102 | name: '车票号', | 97 | name: '车票号', |
| 103 | value: '鄂A·A1217', | 98 | value: '鄂A·A1217', |
| 104 | - key:'fSsqymc' | 99 | + key: 'fSsqymc' |
| 105 | }, | 100 | }, |
| 106 | { | 101 | { |
| 107 | name: '车辆型号', | 102 | name: '车辆型号', |
| 108 | value: 'LN56516485656', | 103 | value: 'LN56516485656', |
| 109 | - key:'fSsczmc' | 104 | + key: 'fSsczmc' |
| 110 | }, | 105 | }, |
| 111 | { | 106 | { |
| 112 | name: '所属气站', | 107 | name: '所属气站', |
| 113 | value: '孝汉川市刘家隔镇液化石油气瓶', | 108 | value: '孝汉川市刘家隔镇液化石油气瓶', |
| 114 | - key:'fQpbh' | 109 | + key: 'fQpbh' |
| 115 | }, | 110 | }, |
| 116 | { | 111 | { |
| 117 | name: '投入使用日期', | 112 | name: '投入使用日期', |
| 118 | value: '20223年5月31号', | 113 | value: '20223年5月31号', |
| 119 | - key:'fZzrq' | 114 | + key: 'fZzrq' |
| 120 | }, | 115 | }, |
| 121 | { | 116 | { |
| 122 | name: '驾驶员', | 117 | name: '驾驶员', |
| 123 | - value:'张三', | ||
| 124 | - key:'qpzt', | 118 | + value: '张三', |
| 119 | + key: 'qpzt', | ||
| 125 | }, | 120 | }, |
| 126 | { | 121 | { |
| 127 | name: '联系电话', | 122 | name: '联系电话', |
| 128 | value: '1810000081', | 123 | value: '1810000081', |
| 129 | - key:'qpzl' | 124 | + key: 'qpzl' |
| 130 | }, | 125 | }, |
| 131 | { | 126 | { |
| 132 | name: '证件编号', | 127 | name: '证件编号', |
| 133 | - value:'- -', | ||
| 134 | - key:'fQpgg', | 128 | + value: '- -', |
| 129 | + key: 'fQpgg', | ||
| 135 | }, | 130 | }, |
| 136 | { | 131 | { |
| 137 | name: '证件编号有效期', | 132 | name: '证件编号有效期', |
| 138 | value: '- -', | 133 | value: '- -', |
| 139 | - key:'ccbh' | 134 | + key: 'ccbh' |
| 140 | }, | 135 | }, |
| 141 | { | 136 | { |
| 142 | name: '身份证号', | 137 | name: '身份证号', |
| 143 | - value:'- -', | ||
| 144 | - key:'zybh' | 138 | + value: '- -', |
| 139 | + key: 'zybh' | ||
| 145 | }, | 140 | }, |
| 146 | { | 141 | { |
| 147 | name: '车辆照片', | 142 | name: '车辆照片', |
| 148 | value: '- -', | 143 | value: '- -', |
| 149 | - key:'jyhbh' | 144 | + key: 'jyhbh' |
| 150 | }, | 145 | }, |
| 151 | { | 146 | { |
| 152 | name: '委托运输公司', | 147 | name: '委托运输公司', |
| 153 | - key:'bcjyrq', | ||
| 154 | - value:'- -' | 148 | + key: 'bcjyrq', |
| 149 | + value: '- -' | ||
| 155 | }, | 150 | }, |
| 156 | { | 151 | { |
| 157 | name: '道路运输许可证', | 152 | name: '道路运输许可证', |
| 158 | - value:'- -', | ||
| 159 | - key:'fXcjysj', | 153 | + value: '- -', |
| 154 | + key: 'fXcjysj', | ||
| 160 | }, | 155 | }, |
| 161 | { | 156 | { |
| 162 | name: '道路运输许可证有效日期', | 157 | name: '道路运输许可证有效日期', |
| 163 | value: '- -', | 158 | value: '- -', |
| 164 | - key:'sjsynx' | 159 | + key: 'sjsynx' |
| 165 | }, | 160 | }, |
| 166 | { | 161 | { |
| 167 | name: '危化品证号', | 162 | name: '危化品证号', |
| 168 | - key:'sccj', | ||
| 169 | - value:'- -' | 163 | + key: 'sccj', |
| 164 | + value: '- -' | ||
| 170 | }, | 165 | }, |
| 171 | { | 166 | { |
| 172 | name: '危化品证有效日期', | 167 | name: '危化品证有效日期', |
| 173 | value: '- -', | 168 | value: '- -', |
| 174 | - key:'jzrq' | 169 | + key: 'jzrq' |
| 175 | }, | 170 | }, |
| 176 | { | 171 | { |
| 177 | name: '创建时间', | 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 | map: null, //地图 | 181 | map: null, //地图 |
| 186 | pointData: [], | 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 | mounted() { | 188 | mounted() { |
| 189 | + // this.initMap(); | ||
| 192 | }, | 190 | }, |
| 193 | - created () { | 191 | + created() { |
| 194 | this.initData(); | 192 | this.initData(); |
| 195 | }, | 193 | }, |
| 196 | methods: { | 194 | methods: { |
| 197 | - initData(){ | 195 | + initData() { |
| 198 | this.getEnterpriseAndStationList(); | 196 | this.getEnterpriseAndStationList(); |
| 199 | this.getMarkPoint(); | 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 | const { value } = res; | 203 | const { value } = res; |
| 206 | - if(value.length>0){ | 204 | + if (value.length > 0) { |
| 207 | this.allOption = value; | 205 | this.allOption = value; |
| 208 | - this.qyOption = value?value.map((item)=>{ | 206 | + this.qyOption = value ? value.map((item) => { |
| 209 | return { | 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 | // // 这个操作是为了避免与源码中的点击reference doToggle方法冲突 | 224 | // // 这个操作是为了避免与源码中的点击reference doToggle方法冲突 |
| 227 | // if (this.activeId === val.id && this.showPop) return | 225 | // if (this.activeId === val.id && this.showPop) return |
| 228 | // this.showPop = false; | 226 | // this.showPop = false; |
| @@ -242,7 +240,9 @@ export default { | @@ -242,7 +240,9 @@ export default { | ||
| 242 | }, | 240 | }, |
| 243 | //查询按钮 | 241 | //查询按钮 |
| 244 | handleSearch() { | 242 | handleSearch() { |
| 243 | + this.loading = true; | ||
| 245 | this.pointData = []; | 244 | this.pointData = []; |
| 245 | + this.markers = []; | ||
| 246 | this.infoWindowVisible = false; | 246 | this.infoWindowVisible = false; |
| 247 | this.getMarkPoint(); | 247 | this.getMarkPoint(); |
| 248 | }, | 248 | }, |
| @@ -253,38 +253,43 @@ export default { | @@ -253,38 +253,43 @@ export default { | ||
| 253 | this.queryForm.qyId = ''; | 253 | this.queryForm.qyId = ''; |
| 254 | this.handleSearch(); | 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 | qyId: this.queryForm.qyId, | 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 | this.pointData.push({ | 272 | this.pointData.push({ |
| 268 | ...itemone, | 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 | this.pointData.push({ | 280 | this.pointData.push({ |
| 276 | ...itemtwo, | 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 | console.log('打印111') | 287 | console.log('打印111') |
| 283 | - item.typethree.map((itemthree)=>{ | 288 | + item.typethree.map((itemthree) => { |
| 284 | // this.pointData.push(itemthree); | 289 | // this.pointData.push(itemthree); |
| 285 | this.pointData.push({ | 290 | this.pointData.push({ |
| 286 | ...itemthree, | 291 | ...itemthree, |
| 287 | - type:'three' | 292 | + type: 'three' |
| 288 | }); | 293 | }); |
| 289 | }) | 294 | }) |
| 290 | } | 295 | } |
| @@ -293,10 +298,10 @@ export default { | @@ -293,10 +298,10 @@ export default { | ||
| 293 | this.pointData = this.pointData.map(item => { | 298 | this.pointData = this.pointData.map(item => { |
| 294 | return { | 299 | return { |
| 295 | ...item, | 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 | this.initMap(); | 305 | this.initMap(); |
| 301 | } | 306 | } |
| 302 | }) | 307 | }) |
| @@ -316,43 +321,93 @@ export default { | @@ -316,43 +321,93 @@ export default { | ||
| 316 | version: '2.0' //数据可视化 | 321 | version: '2.0' //数据可视化 |
| 317 | } | 322 | } |
| 318 | }).then((AMap) => { | 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 | marker['arr'] = arr; | 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 | this.markers.push(marker); | 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 | AMap.plugin('AMap.DistrictSearch', function () { | 411 | AMap.plugin('AMap.DistrictSearch', function () { |
| 357 | //创建行政区查询对象 | 412 | //创建行政区查询对象 |
| 358 | var options = { | 413 | var options = { |
| @@ -391,61 +446,106 @@ export default { | @@ -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 | this.devInfo = arrNew && arrNew[0]; | 452 | this.devInfo = arrNew && arrNew[0]; |
| 398 | // infoWindow.setContent(e.target.content); | 453 | // infoWindow.setContent(e.target.content); |
| 399 | console.log('打印res', arrNew); | 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 | if (!e.target.isActive) { | 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 | this.markers.forEach((marker) => { | 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 | marker.setIcon(oldIcon); | 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 | marker.setIcon(newIcon); | 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 | // e.target.setIcon(newIcon); // 或者其他方法来重置样式 | 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 | // this.devInfoList = await this.$assignValues(value, this.devInfoList); | 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 | console.log('打印this.nodeList', this.nodeList); | 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,19 +561,31 @@ export default { | ||
| 461 | }, | 561 | }, |
| 462 | closeInfoWindow() { | 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 | this.markers.forEach((marker) => { | 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 | marker.setIcon(oldIcon); | 583 | marker.setIcon(oldIcon); |
| 473 | } | 584 | } |
| 474 | }); | 585 | }); |
| 475 | this.clickMapId = ''; | 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,24 +600,48 @@ export default { | ||
| 488 | opacity: 0.92; | 600 | opacity: 0.92; |
| 489 | color: #fff; | 601 | color: #fff; |
| 490 | } | 602 | } |
| 603 | + | ||
| 491 | /* 下方是去除三角箭头的代码 */ | 604 | /* 下方是去除三角箭头的代码 */ |
| 492 | .popoverSty.el-popper[x-placement^=top] .popper__arrow::after { | 605 | .popoverSty.el-popper[x-placement^=top] .popper__arrow::after { |
| 493 | border-top-color: #ec661e !important; | 606 | border-top-color: #ec661e !important; |
| 494 | } | 607 | } |
| 495 | </style> | 608 | </style> |
| 496 | <style lang="scss" scoped> | 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 | #mapContainer { | 628 | #mapContainer { |
| 498 | min-width: 865px; | 629 | min-width: 865px; |
| 499 | min-height: 630px; | 630 | min-height: 630px; |
| 500 | } | 631 | } |
| 501 | 632 | ||
| 502 | .container { | 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 | .searchSty { | 645 | .searchSty { |
| 510 | background: #ffffff; | 646 | background: #ffffff; |
| 511 | padding: 0 20px; | 647 | padding: 0 20px; |
| @@ -517,25 +653,34 @@ export default { | @@ -517,25 +653,34 @@ export default { | ||
| 517 | margin-top: 20px; | 653 | margin-top: 20px; |
| 518 | background: #ffffff; | 654 | background: #ffffff; |
| 519 | } | 655 | } |
| 520 | - .labelSty{ | 656 | + |
| 657 | + .labelSty { | ||
| 521 | width: 10px; | 658 | width: 10px; |
| 522 | height: 10px; | 659 | height: 10px; |
| 523 | border-radius: 2px; | 660 | border-radius: 2px; |
| 524 | margin-right: 10px; | 661 | margin-right: 10px; |
| 525 | } | 662 | } |
| 526 | - .completeSty{ | 663 | + |
| 664 | + .completeSty { | ||
| 527 | background-color: #ea5504; | 665 | background-color: #ea5504; |
| 528 | } | 666 | } |
| 529 | - .uncompleteSty{ | 667 | + |
| 668 | + .uncompleteSty { | ||
| 530 | background-color: #ccd0e5; | 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 | .content-window-card { | 684 | .content-window-card { |
| 540 | position: relative; | 685 | position: relative; |
| 541 | box-shadow: none; | 686 | box-shadow: none; |
| @@ -545,6 +690,7 @@ export default { | @@ -545,6 +690,7 @@ export default { | ||
| 545 | width: 45rem; | 690 | width: 45rem; |
| 546 | padding: 0; | 691 | padding: 0; |
| 547 | } | 692 | } |
| 693 | + | ||
| 548 | .content-window-card p { | 694 | .content-window-card p { |
| 549 | height: 2rem; | 695 | height: 2rem; |
| 550 | } | 696 | } |
| @@ -569,6 +715,7 @@ export default { | @@ -569,6 +715,7 @@ export default { | ||
| 569 | line-height: 31px; | 715 | line-height: 31px; |
| 570 | padding: 0 10px; | 716 | padding: 0 10px; |
| 571 | } | 717 | } |
| 718 | + | ||
| 572 | .info-top img { | 719 | .info-top img { |
| 573 | position: absolute; | 720 | position: absolute; |
| 574 | top: 10px; | 721 | top: 10px; |
| @@ -593,6 +740,7 @@ export default { | @@ -593,6 +740,7 @@ export default { | ||
| 593 | clear: both; | 740 | clear: both; |
| 594 | text-align: center; | 741 | text-align: center; |
| 595 | } | 742 | } |
| 743 | + | ||
| 596 | .info-bottom img { | 744 | .info-bottom img { |
| 597 | position: relative; | 745 | position: relative; |
| 598 | z-index: 104; | 746 | z-index: 104; |
| @@ -628,6 +776,4 @@ export default { | @@ -628,6 +776,4 @@ export default { | ||
| 628 | .info-a-title { | 776 | .info-a-title { |
| 629 | color: #000000; | 777 | color: #000000; |
| 630 | font-size: 16px; | 778 | font-size: 16px; |
| 631 | -} | ||
| 632 | - | ||
| 633 | -</style> | 779 | +}</style> |
frontend/front/src/views/pages/enterpriseGasStation/enterpriseGasMap/index.vue
| @@ -28,7 +28,7 @@ | @@ -28,7 +28,7 @@ | ||
| 28 | </el-form-item> | 28 | </el-form-item> |
| 29 | </el-form> | 29 | </el-form> |
| 30 | </div> | 30 | </div> |
| 31 | - <div class="mapSty"> | 31 | + <div class="mapSty" v-loading="loading"> |
| 32 | <div id="mapContainer" | 32 | <div id="mapContainer" |
| 33 | class="map" | 33 | class="map" |
| 34 | tabindex="0"> | 34 | tabindex="0"> |
| @@ -304,6 +304,7 @@ export default { | @@ -304,6 +304,7 @@ export default { | ||
| 304 | key:'czl' | 304 | key:'czl' |
| 305 | }, | 305 | }, |
| 306 | ], | 306 | ], |
| 307 | + marker:null, | ||
| 307 | markers:[], | 308 | markers:[], |
| 308 | clickMapId:'', | 309 | clickMapId:'', |
| 309 | companyInfoDataVisible:false, | 310 | companyInfoDataVisible:false, |
| @@ -311,6 +312,8 @@ export default { | @@ -311,6 +312,8 @@ export default { | ||
| 311 | map: null, //地图 | 312 | map: null, //地图 |
| 312 | pointData: [], | 313 | pointData: [], |
| 313 | centerPoint:[114.347441, 30.50438], | 314 | centerPoint:[114.347441, 30.50438], |
| 315 | + currentObj:{}, | ||
| 316 | + loading:false | ||
| 314 | } | 317 | } |
| 315 | }, | 318 | }, |
| 316 | mounted() { | 319 | mounted() { |
| @@ -350,7 +353,9 @@ export default { | @@ -350,7 +353,9 @@ export default { | ||
| 350 | }, | 353 | }, |
| 351 | //查询按钮 | 354 | //查询按钮 |
| 352 | handleSearch() { | 355 | handleSearch() { |
| 356 | + this.loading = true; | ||
| 353 | this.pointData = []; | 357 | this.pointData = []; |
| 358 | + this.markers = []; | ||
| 354 | this.companyInfoDataVisible = false; | 359 | this.companyInfoDataVisible = false; |
| 355 | this.gasStationInfoVisible = false; | 360 | this.gasStationInfoVisible = false; |
| 356 | this.getMarkPoint(); | 361 | this.getMarkPoint(); |
| @@ -362,13 +367,18 @@ export default { | @@ -362,13 +367,18 @@ export default { | ||
| 362 | this.queryForm.qyId = ''; | 367 | this.queryForm.qyId = ''; |
| 363 | this.handleSearch(); | 368 | this.handleSearch(); |
| 364 | }, | 369 | }, |
| 365 | - async getMarkPoint(){ | 370 | + async getMarkPoint(){ |
| 371 | + this.loading = true; | ||
| 366 | let params ={ | 372 | let params ={ |
| 367 | qzId:this.queryForm.qzId, | 373 | qzId:this.queryForm.qzId, |
| 368 | qyId: this.queryForm.qyId, | 374 | qyId: this.queryForm.qyId, |
| 369 | } | 375 | } |
| 370 | await getEnterpriseMapPoint(params).then((res)=>{ | 376 | await getEnterpriseMapPoint(params).then((res)=>{ |
| 371 | let { code, value} = res; | 377 | let { code, value} = res; |
| 378 | + if(!value){ | ||
| 379 | + this.loading = false; | ||
| 380 | + return | ||
| 381 | + } | ||
| 372 | if(code == 200){ | 382 | if(code == 200){ |
| 373 | const { qyxxList, qzxxList } = value; | 383 | const { qyxxList, qzxxList } = value; |
| 374 | let pointDataArray =[] | 384 | let pointDataArray =[] |
| @@ -394,7 +404,8 @@ export default { | @@ -394,7 +404,8 @@ export default { | ||
| 394 | }):[]; | 404 | }):[]; |
| 395 | console.log('打印value====>', pointDataArray); | 405 | console.log('打印value====>', pointDataArray); |
| 396 | this.pointData = pointDataArray; | 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 | this.initMap(); | 409 | this.initMap(); |
| 399 | } | 410 | } |
| 400 | }) | 411 | }) |
| @@ -414,40 +425,82 @@ export default { | @@ -414,40 +425,82 @@ export default { | ||
| 414 | version: '2.0' //数据可视化 | 425 | version: '2.0' //数据可视化 |
| 415 | } | 426 | } |
| 416 | }).then((AMap) => { | 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 | let arr =[]; | 444 | let arr =[]; |
| 445 | + | ||
| 426 | for (let i = 0; i < this.pointData.length; i++) { | 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 | // AMap.plugin('AMap.DistrictSearch', function () { | 504 | // AMap.plugin('AMap.DistrictSearch', function () { |
| 452 | // //创建行政区查询对象 | 505 | // //创建行政区查询对象 |
| 453 | // var options = { | 506 | // var options = { |
| @@ -484,27 +537,34 @@ export default { | @@ -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 | case 'qy': | 557 | case 'qy': |
| 500 | this.companyInfoDataVisible = true; | 558 | this.companyInfoDataVisible = true; |
| 501 | this.companyInfoList = await this.$assignValues(arrNew[0], this.companyInfoList); | 559 | this.companyInfoList = await this.$assignValues(arrNew[0], this.companyInfoList); |
| 502 | this.companyInfoList1 = await this.$createDoubleArray(this.companyInfoList,2); | 560 | this.companyInfoList1 = await this.$createDoubleArray(this.companyInfoList,2); |
| 561 | + console.log("企业1",this.companyInfoList); | ||
| 562 | + console.log("企业2",this.companyInfoList1); | ||
| 503 | break; | 563 | break; |
| 504 | case 'qz': | 564 | case 'qz': |
| 505 | this.gasStationInfoVisible = true; | 565 | this.gasStationInfoVisible = true; |
| 506 | this.gasStationInfoList = await this.$assignValues(arrNew[0], this.gasStationInfoList); | 566 | this.gasStationInfoList = await this.$assignValues(arrNew[0], this.gasStationInfoList); |
| 507 | - console.log('打印arrNew[0]',arrNew[0]); | 567 | + console.log("气站",this.gasStationInfoList); |
| 508 | this.gasStationInfoList.map(async (item)=>{ | 568 | this.gasStationInfoList.map(async (item)=>{ |
| 509 | if(item.type == 'img' && item.value !=='— —'){ | 569 | if(item.type == 'img' && item.value !=='— —'){ |
| 510 | console.log('打印item', item); | 570 | console.log('打印item', item); |
| @@ -518,33 +578,63 @@ export default { | @@ -518,33 +578,63 @@ export default { | ||
| 518 | this.gasStationInfoList1 = await this.$createDoubleArray(this.gasStationInfoList,2); | 578 | this.gasStationInfoList1 = await this.$createDoubleArray(this.gasStationInfoList,2); |
| 519 | break; | 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 | this.markers.forEach((marker) => { | 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 | marker.setIcon(oldIcon); | 615 | marker.setIcon(oldIcon); |
| 536 | }else{ | 616 | }else{ |
| 537 | - marker.isActive = false; | 617 | + // marker.isActive = false; |
| 538 | console.log('打印marker',marker); | 618 | console.log('打印marker',marker); |
| 539 | marker.setIcon(newIcon); | 619 | marker.setIcon(newIcon); |
| 540 | } | 620 | } |
| 541 | }); | 621 | }); |
| 542 | - console.log('打印arrNew[0]',arrNew[0]) | 622 | + // console.log('打印arrNew[0]',arrNew[0]) |
| 543 | // infoWindow.setContent(e.target.content); | 623 | // infoWindow.setContent(e.target.content); |
| 544 | if(!e.target.isActive){ | 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,24 +671,31 @@ export default { | ||
| 581 | // content: this.getContent(), | 671 | // content: this.getContent(), |
| 582 | offset: new AMap.Pixel(-180, -50), | 672 | offset: new AMap.Pixel(-180, -50), |
| 583 | }) | 673 | }) |
| 674 | + console.log("infoWindowData",infoWindowData); | ||
| 584 | return infoWindowData | 675 | return infoWindowData |
| 585 | }, | 676 | }, |
| 586 | closeInfoWindow(e) { | 677 | closeInfoWindow(e) { |
| 587 | // 引入本地图片 | 678 | // 引入本地图片 |
| 588 | this.markers.forEach((marker) => { | 679 | this.markers.forEach((marker) => { |
| 589 | console.log('打印marker', marker); | 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 | marker.isActive = true; | 692 | marker.isActive = true; |
| 597 | marker.setIcon(oldIcon); | 693 | marker.setIcon(oldIcon); |
| 598 | } | 694 | } |
| 599 | }); | 695 | }); |
| 600 | this.clickMapId = ''; | 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,6 +716,25 @@ export default { | ||
| 619 | } | 716 | } |
| 620 | </style> | 717 | </style> |
| 621 | <style lang="scss" scoped> | 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 | #mapContainer { | 738 | #mapContainer { |
| 623 | min-width: 865px; | 739 | min-width: 865px; |
| 624 | min-height: 630px; | 740 | min-height: 630px; |
frontend/front/src/views/pages/gasCylinderManage/gasCylinderMap/index.vue
| @@ -31,14 +31,14 @@ | @@ -31,14 +31,14 @@ | ||
| 31 | </el-form-item> | 31 | </el-form-item> |
| 32 | </el-form> | 32 | </el-form> |
| 33 | </div> | 33 | </div> |
| 34 | - <div class="mapSty"> | 34 | + <div class="mapSty" v-loading="loading"> |
| 35 | <div id="mapContainer" | 35 | <div id="mapContainer" |
| 36 | class="map" | 36 | class="map" |
| 37 | tabindex="0"> | 37 | tabindex="0"> |
| 38 | </div> | 38 | </div> |
| 39 | </div> | 39 | </div> |
| 40 | <div ref="infoData" | 40 | <div ref="infoData" |
| 41 | - v-if="infoWindowVisible" | 41 | + v-show="infoWindowVisible" |
| 42 | class="custom-info input-card content-window-card"> | 42 | class="custom-info input-card content-window-card"> |
| 43 | <div class="info-top" style="display: flex; justify-content: space-between;align-items: center"> | 43 | <div class="info-top" style="display: flex; justify-content: space-between;align-items: center"> |
| 44 | <div> | 44 | <div> |
| @@ -375,6 +375,7 @@ export default { | @@ -375,6 +375,7 @@ export default { | ||
| 375 | pointData: [], | 375 | pointData: [], |
| 376 | nodeList:[], | 376 | nodeList:[], |
| 377 | centerPoint:[114.347441, 30.50438], | 377 | centerPoint:[114.347441, 30.50438], |
| 378 | + loading:false, | ||
| 378 | } | 379 | } |
| 379 | }, | 380 | }, |
| 380 | mounted() { | 381 | mounted() { |
| @@ -431,6 +432,7 @@ export default { | @@ -431,6 +432,7 @@ export default { | ||
| 431 | }, | 432 | }, |
| 432 | //查询按钮 | 433 | //查询按钮 |
| 433 | handleSearch() { | 434 | handleSearch() { |
| 435 | + this.markers = []; | ||
| 434 | this.pointData = []; | 436 | this.pointData = []; |
| 435 | this.infoWindowVisible = false; | 437 | this.infoWindowVisible = false; |
| 436 | this.getMarkPoint(); | 438 | this.getMarkPoint(); |
| @@ -443,12 +445,17 @@ export default { | @@ -443,12 +445,17 @@ export default { | ||
| 443 | this.handleSearch(); | 445 | this.handleSearch(); |
| 444 | }, | 446 | }, |
| 445 | async getMarkPoint(){ | 447 | async getMarkPoint(){ |
| 448 | + this.loading = true; | ||
| 446 | let params ={ | 449 | let params ={ |
| 447 | qzId:this.queryForm.qzId, | 450 | qzId:this.queryForm.qzId, |
| 448 | qyId: this.queryForm.qyId, | 451 | qyId: this.queryForm.qyId, |
| 449 | } | 452 | } |
| 450 | await getAppTagTypes(params).then((res)=>{ | 453 | await getAppTagTypes(params).then((res)=>{ |
| 451 | let { code, value} = res; | 454 | let { code, value} = res; |
| 455 | + if(!value.length){ | ||
| 456 | + this.loading = false; | ||
| 457 | + return | ||
| 458 | + } | ||
| 452 | if(code == 200){ | 459 | if(code == 200){ |
| 453 | value.map((item,index)=>{ | 460 | value.map((item,index)=>{ |
| 454 | if(item.typeone.length>0){ | 461 | if(item.typeone.length>0){ |
| @@ -502,43 +509,93 @@ export default { | @@ -502,43 +509,93 @@ export default { | ||
| 502 | version: '2.0' //数据可视化 | 509 | version: '2.0' //数据可视化 |
| 503 | } | 510 | } |
| 504 | }).then((AMap) => { | 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 | marker['arr'] = arr; | 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 | this.markers.push(marker); | 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 | AMap.plugin('AMap.DistrictSearch', function () { | 599 | AMap.plugin('AMap.DistrictSearch', function () { |
| 543 | //创建行政区查询对象 | 600 | //创建行政区查询对象 |
| 544 | var options = { | 601 | var options = { |
| @@ -577,43 +634,81 @@ export default { | @@ -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 | this.devInfo = arrNew && arrNew[0]; | 640 | this.devInfo = arrNew && arrNew[0]; |
| 584 | // infoWindow.setContent(e.target.content); | 641 | // infoWindow.setContent(e.target.content); |
| 585 | console.log('打印res', arrNew); | 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 | this.markers.forEach((marker) => { | 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 | marker.setIcon(oldIcon); | 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 | marker.setIcon(newIcon); | 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 | // e.target.setIcon(newIcon); // 或者其他方法来重置样式 | 714 | // e.target.setIcon(newIcon); // 或者其他方法来重置样式 |
| @@ -626,8 +721,8 @@ export default { | @@ -626,8 +721,8 @@ export default { | ||
| 626 | console.log('打印res',res); | 721 | console.log('打印res',res); |
| 627 | const { value} = res; | 722 | const { value} = res; |
| 628 | const {qpdqlzs,qpOrderInfoVO} = value; | 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 | this.devInfoList = await this.$assignValues(value, this.devInfoList); | 726 | this.devInfoList = await this.$assignValues(value, this.devInfoList); |
| 632 | this.nodeList = await this.$createDoubleArray(qpdqlzs,5); | 727 | this.nodeList = await this.$createDoubleArray(qpdqlzs,5); |
| 633 | console.log('打印this.nodeList', this.nodeList); | 728 | console.log('打印this.nodeList', this.nodeList); |
| @@ -653,19 +748,32 @@ export default { | @@ -653,19 +748,32 @@ export default { | ||
| 653 | }, | 748 | }, |
| 654 | closeInfoWindow() { | 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 | this.markers.forEach((marker) => { | 770 | this.markers.forEach((marker) => { |
| 662 | - if (marker._amap_id == this.clickMapId) { | ||
| 663 | - marker.isActive = true; | 771 | + if (marker.tid == this.clickMapId) { |
| 664 | marker.setIcon(oldIcon); | 772 | marker.setIcon(oldIcon); |
| 665 | } | 773 | } |
| 666 | }); | 774 | }); |
| 667 | this.clickMapId = ''; | 775 | this.clickMapId = ''; |
| 668 | - this.map.clearInfoWindow(); | 776 | + this.map.closeInfoWindow(); |
| 669 | }, | 777 | }, |
| 670 | } | 778 | } |
| 671 | } | 779 | } |
| @@ -686,6 +794,24 @@ export default { | @@ -686,6 +794,24 @@ export default { | ||
| 686 | } | 794 | } |
| 687 | </style> | 795 | </style> |
| 688 | <style lang="scss" scoped> | 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 | #mapContainer { | 815 | #mapContainer { |
| 690 | min-width: 865px; | 816 | min-width: 865px; |
| 691 | min-height: 630px; | 817 | min-height: 630px; |
frontend/front/src/views/pages/regionalManage/components/regionManage.vue
| @@ -209,6 +209,7 @@ export default { | @@ -209,6 +209,7 @@ export default { | ||
| 209 | size:10, | 209 | size:10, |
| 210 | total:0 | 210 | total:0 |
| 211 | }, | 211 | }, |
| 212 | + handler:null, | ||
| 212 | 213 | ||
| 213 | } | 214 | } |
| 214 | }, | 215 | }, |
| @@ -362,92 +363,152 @@ export default { | @@ -362,92 +363,152 @@ export default { | ||
| 362 | } | 363 | } |
| 363 | }).then((AMap)=>{ | 364 | }).then((AMap)=>{ |
| 364 | console.log('打印AMap====>',AMap); | 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 | // this.map.on('rightclick', (e)=> { | 393 | // this.map.on('rightclick', (e)=> { |
| 371 | // this.rightclickObj(); //定义右键内容 | 394 | // this.rightclickObj(); //定义右键内容 |
| 372 | // this.contextMenu.open(this.map, e.lnglat); | 395 | // this.contextMenu.open(this.map, e.lnglat); |
| 373 | // this.contextMenuPositon = e.lnglat; //右键菜单位置 | 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 | if(this.dialogParams.dialogType == 'edit'){ | 426 | if(this.dialogParams.dialogType == 'edit'){ |
| 402 | - var editShap = null; | 427 | + // var editShap = null; |
| 403 | if(this.dialogParams.fShape == '圆形'){ | 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 | fillOpacity:0.5, | 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 | editShap.setMap(this.map); | 512 | editShap.setMap(this.map); |
| 452 | // 缩放地图到合适的视野级别 | 513 | // 缩放地图到合适的视野级别 |
| 453 | this.map.setFitView([ editShap ]); | 514 | this.map.setFitView([ editShap ]); |
| @@ -475,34 +536,131 @@ export default { | @@ -475,34 +536,131 @@ export default { | ||
| 475 | }, | 536 | }, |
| 476 | //结束编辑 | 537 | //结束编辑 |
| 477 | closeDraw(){ | 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 | //draw 绘制圆形，矩形，多边形 | 611 | //draw 绘制圆形，矩形，多边形 |
| 481 | draw(type,shapType){ | 612 | draw(type,shapType){ |
| 482 | if(this.dialogParams.dialogType == 'edit'){ | 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 | this.dialogParams.fShape = shapType; | 619 | this.dialogParams.fShape = shapType; |
| 486 | switch (type){ | 620 | switch (type){ |
| 487 | case 'polygon':{ | 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 | break; | 634 | break; |
| 493 | } | 635 | } |
| 494 | case 'rectangle':{ | 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 | break; | 649 | break; |
| 500 | } | 650 | } |
| 501 | case 'circle':{ | 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 | break; | 664 | break; |
| 507 | } | 665 | } |
| 508 | } | 666 | } |
| @@ -511,20 +669,21 @@ export default { | @@ -511,20 +669,21 @@ export default { | ||
| 511 | async handleSubmit(formName){ | 669 | async handleSubmit(formName){ |
| 512 | this.$refs[formName].validate(async (valid) => { | 670 | this.$refs[formName].validate(async (valid) => { |
| 513 | if (valid) { | 671 | if (valid) { |
| 514 | - console.log('打印this.overlays.',this.overlays) | 672 | + console.log('打印this.overlays',this.overlays) |
| 515 | if(this.overlays.length<=0){ | 673 | if(this.overlays.length<=0){ |
| 516 | this.$message.warning('请规划区域!'); | 674 | this.$message.warning('请规划区域!'); |
| 517 | return; | 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 | let params= { | 687 | let params= { |
| 529 | id:this.dialogParams.id, | 688 | id:this.dialogParams.id, |
| 530 | fName: this.dialogParams.regionalName, | 689 | fName: this.dialogParams.regionalName, |
| @@ -540,9 +699,11 @@ export default { | @@ -540,9 +699,11 @@ export default { | ||
| 540 | radius:this.dialogParams.radius | 699 | radius:this.dialogParams.radius |
| 541 | } | 700 | } |
| 542 | } | 701 | } |
| 702 | + console.log("params",params); | ||
| 703 | + // return; | ||
| 543 | await regionalAddEditPort(params).then((res)=>{ | 704 | await regionalAddEditPort(params).then((res)=>{ |
| 544 | this.dialogParams.dialogVisible = false; | 705 | this.dialogParams.dialogVisible = false; |
| 545 | - this.mouseTool.close(true); | 706 | + // this.mouseTool.close(true); |
| 546 | this.overlays = []; | 707 | this.overlays = []; |
| 547 | this.handleSearch(); | 708 | this.handleSearch(); |
| 548 | this.pageParam.page = 1; | 709 | this.pageParam.page = 1; |
| @@ -556,7 +717,7 @@ export default { | @@ -556,7 +717,7 @@ export default { | ||
| 556 | handleDialogClose(){ | 717 | handleDialogClose(){ |
| 557 | this.$refs.dialogParams.resetFields(); | 718 | this.$refs.dialogParams.resetFields(); |
| 558 | this.dialogParams.dialogVisible = false; | 719 | this.dialogParams.dialogVisible = false; |
| 559 | - this.mouseTool.close(true); | 720 | + // this.mouseTool.close(true); |
| 560 | this.overlays = []; | 721 | this.overlays = []; |
| 561 | 722 | ||
| 562 | }, | 723 | }, |
| @@ -576,6 +737,7 @@ export default { | @@ -576,6 +737,7 @@ export default { | ||
| 576 | this.dialogParams.dialogType= type; | 737 | this.dialogParams.dialogType= type; |
| 577 | switch (type){ | 738 | switch (type){ |
| 578 | case 'add': | 739 | case 'add': |
| 740 | + this.handler = null; | ||
| 579 | this.dialogParams.fSsczid = this.rowData.fSsczid; | 741 | this.dialogParams.fSsczid = this.rowData.fSsczid; |
| 580 | this.dialogParams.id =''; | 742 | this.dialogParams.id =''; |
| 581 | this.dialogParams.radius = ''; | 743 | this.dialogParams.radius = ''; |