新增导入图标和地图右下角功能
Showing
13 changed files
with
90 additions
and
11 deletions
| ... | @@ -31,6 +31,12 @@ | ... | @@ -31,6 +31,12 @@ |
| 31 | <ul class="icon_lists dib-box"> | 31 | <ul class="icon_lists dib-box"> |
| 32 | 32 | ||
| 33 | <li class="dib"> | 33 | <li class="dib"> |
| 34 | <span class="icon iconfont"></span> | ||
| 35 | <div class="name">上传</div> | ||
| 36 | <div class="code-name">&#xe786;</div> | ||
| 37 | </li> | ||
| 38 | |||
| 39 | <li class="dib"> | ||
| 34 | <span class="icon iconfont"></span> | 40 | <span class="icon iconfont"></span> |
| 35 | <div class="name">绘制方式1</div> | 41 | <div class="name">绘制方式1</div> |
| 36 | <div class="code-name">&#xe6d7;</div> | 42 | <div class="code-name">&#xe6d7;</div> |
| ... | @@ -477,6 +483,15 @@ | ... | @@ -477,6 +483,15 @@ |
| 477 | <ul class="icon_lists dib-box"> | 483 | <ul class="icon_lists dib-box"> |
| 478 | 484 | ||
| 479 | <li class="dib"> | 485 | <li class="dib"> |
| 486 | <span class="icon iconfont iconshangchuan"></span> | ||
| 487 | <div class="name"> | ||
| 488 | 上传 | ||
| 489 | </div> | ||
| 490 | <div class="code-name">.iconshangchuan | ||
| 491 | </div> | ||
| 492 | </li> | ||
| 493 | |||
| 494 | <li class="dib"> | ||
| 480 | <span class="icon iconfont iconhuizhifangshi1"></span> | 495 | <span class="icon iconfont iconhuizhifangshi1"></span> |
| 481 | <div class="name"> | 496 | <div class="name"> |
| 482 | 绘制方式1 | 497 | 绘制方式1 |
| ... | @@ -1101,6 +1116,14 @@ | ... | @@ -1101,6 +1116,14 @@ |
| 1101 | 1116 | ||
| 1102 | <li class="dib"> | 1117 | <li class="dib"> |
| 1103 | <svg class="icon svg-icon" aria-hidden="true"> | 1118 | <svg class="icon svg-icon" aria-hidden="true"> |
| 1119 | <use xlink:href="#iconshangchuan"></use> | ||
| 1120 | </svg> | ||
| 1121 | <div class="name">上传</div> | ||
| 1122 | <div class="code-name">#iconshangchuan</div> | ||
| 1123 | </li> | ||
| 1124 | |||
| 1125 | <li class="dib"> | ||
| 1126 | <svg class="icon svg-icon" aria-hidden="true"> | ||
| 1104 | <use xlink:href="#iconhuizhifangshi1"></use> | 1127 | <use xlink:href="#iconhuizhifangshi1"></use> |
| 1105 | </svg> | 1128 | </svg> |
| 1106 | <div class="name">绘制方式1</div> | 1129 | <div class="name">绘制方式1</div> | ... | ... |
This diff is collapsed.
Click to expand it.
No preview for this file type
This diff could not be displayed because it is too large.
| ... | @@ -6,6 +6,13 @@ | ... | @@ -6,6 +6,13 @@ |
| 6 | "description": "", | 6 | "description": "", |
| 7 | "glyphs": [ | 7 | "glyphs": [ |
| 8 | { | 8 | { |
| 9 | "icon_id": "19243689", | ||
| 10 | "name": "上传", | ||
| 11 | "font_class": "shangchuan", | ||
| 12 | "unicode": "e786", | ||
| 13 | "unicode_decimal": 59270 | ||
| 14 | }, | ||
| 15 | { | ||
| 9 | "icon_id": "15148386", | 16 | "icon_id": "15148386", |
| 10 | "name": "绘制方式1", | 17 | "name": "绘制方式1", |
| 11 | "font_class": "huizhifangshi1", | 18 | "font_class": "huizhifangshi1", | ... | ... |
| ... | @@ -20,6 +20,9 @@ Created by iconfont | ... | @@ -20,6 +20,9 @@ Created by iconfont |
| 20 | /> | 20 | /> |
| 21 | <missing-glyph /> | 21 | <missing-glyph /> |
| 22 | 22 | ||
| 23 | <glyph glyph-name="shangchuan" unicode="" d="M523.776 781.568l155.392-155.3408a25.6 25.6 0 1 1 36.1984 36.1984L519.8848 857.9584a25.6 25.6 0 0 1-36.2496 0L288.1536 662.4256a25.6 25.6 0 0 1 36.1984-36.1984l148.2752 148.2752V174.08a25.6 25.6 0 1 1 51.2 0V781.568z m182.4768-409.088H875.52a25.6 25.6 0 0 0 25.6-25.6v-364.5952a25.6 25.6 0 0 0-25.6-25.6H128a25.6 25.6 0 0 0-25.6 25.6v364.6464a25.6 25.6 0 0 0 25.6 25.6h145.7664a25.6 25.6 0 1 1 0 51.2H128a76.8 76.8 0 0 1-76.8-76.8v-364.6464a76.8 76.8 0 0 1 76.8-76.8h747.52a76.8 76.8 0 0 1 76.8 76.8v364.6464a76.8 76.8 0 0 1-76.8 76.8h-169.2672a25.6 25.6 0 1 1 0-51.2z" horiz-adv-x="1024" /> | ||
| 24 | |||
| 25 | |||
| 23 | <glyph glyph-name="huizhifangshi1" unicode="" d="M153.6 742.4h716.8a102.4 102.4 0 0 0 102.4-102.4v-512a102.4 102.4 0 0 0-102.4-102.4H153.6a102.4 102.4 0 0 0-102.4 102.4V640a102.4 102.4 0 0 0 102.4 102.4z m0-51.2a51.2 51.2 0 0 1-51.2-51.2v-512a51.2 51.2 0 0 1 51.2-51.2h716.8a51.2 51.2 0 0 1 51.2 51.2V640a51.2 51.2 0 0 1-51.2 51.2H153.6z" horiz-adv-x="1024" /> | 26 | <glyph glyph-name="huizhifangshi1" unicode="" d="M153.6 742.4h716.8a102.4 102.4 0 0 0 102.4-102.4v-512a102.4 102.4 0 0 0-102.4-102.4H153.6a102.4 102.4 0 0 0-102.4 102.4V640a102.4 102.4 0 0 0 102.4 102.4z m0-51.2a51.2 51.2 0 0 1-51.2-51.2v-512a51.2 51.2 0 0 1 51.2-51.2h716.8a51.2 51.2 0 0 1 51.2 51.2V640a51.2 51.2 0 0 1-51.2 51.2H153.6z" horiz-adv-x="1024" /> |
| 24 | 27 | ||
| 25 | 28 | ... | ... |
No preview for this file type
No preview for this file type
No preview for this file type
| ... | @@ -2,6 +2,14 @@ | ... | @@ -2,6 +2,14 @@ |
| 2 | <div class="map"> | 2 | <div class="map"> |
| 3 | <div :id="viewId" class="viewDiv"> | 3 | <div :id="viewId" class="viewDiv"> |
| 4 | </div> | 4 | </div> |
| 5 | <div class="mapViewPoint"> | ||
| 6 | <span class="key">比例尺:</span> | ||
| 7 | <span class="value">{{ mapInfo.scale }}km</span> | ||
| 8 | <span class="key">经度:</span> | ||
| 9 | <span class="value">{{ mapInfo.x }}</span> | ||
| 10 | <span class="key">纬度:</span> | ||
| 11 | <span class="value">{{ mapInfo.y }}</span> | ||
| 12 | </div> | ||
| 5 | </div> | 13 | </div> |
| 6 | </template> | 14 | </template> |
| 7 | <script> | 15 | <script> |
| ... | @@ -20,8 +28,12 @@ | ... | @@ -20,8 +28,12 @@ |
| 20 | }, | 28 | }, |
| 21 | data(){ | 29 | data(){ |
| 22 | return{ | 30 | return{ |
| 23 | 31 | mapInfo:{ | |
| 24 | } | 32 | scale:"", |
| 33 | x:"", | ||
| 34 | y:'' | ||
| 35 | } | ||
| 36 | } | ||
| 25 | }, | 37 | }, |
| 26 | 38 | ||
| 27 | mounted(){ | 39 | mounted(){ |
| ... | @@ -54,6 +66,13 @@ | ... | @@ -54,6 +66,13 @@ |
| 54 | if(self.afterLoaderFunction && typeof self.afterLoaderFunction == 'function'){ | 66 | if(self.afterLoaderFunction && typeof self.afterLoaderFunction == 'function'){ |
| 55 | self.afterLoaderFunction(view); | 67 | self.afterLoaderFunction(view); |
| 56 | } | 68 | } |
| 69 | view.on("pointer-move", function(event){ | ||
| 70 | var point = view.toMap({x: event.x, y: event.y}); | ||
| 71 | self.mapInfo.x = point.longitude.toFixed(6); | ||
| 72 | self.mapInfo.y = point.latitude.toFixed(6); | ||
| 73 | self.mapInfo.scale = (view.scale/1000).toFixed(3); | ||
| 74 | |||
| 75 | }); | ||
| 57 | }).catch(err => { | 76 | }).catch(err => { |
| 58 | throw(err); | 77 | throw(err); |
| 59 | }); | 78 | }); |
| ... | @@ -70,5 +89,24 @@ | ... | @@ -70,5 +89,24 @@ |
| 70 | height: 100%; | 89 | height: 100%; |
| 71 | width: 100%; | 90 | width: 100%; |
| 72 | } | 91 | } |
| 92 | .mapViewPoint{ | ||
| 93 | position: absolute; | ||
| 94 | bottom: 10px; | ||
| 95 | left: 5px; | ||
| 96 | background-color: white; | ||
| 97 | line-height: 36px; | ||
| 98 | font-size: 12px; | ||
| 99 | border-radius: 4px; | ||
| 100 | box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18); | ||
| 101 | .key{ | ||
| 102 | font-weight: 600; | ||
| 103 | } | ||
| 104 | .value{ | ||
| 105 | margin-left: 0px; | ||
| 106 | } | ||
| 107 | span{ | ||
| 108 | margin:0px 5px; | ||
| 109 | } | ||
| 110 | } | ||
| 73 | } | 111 | } |
| 74 | </style> | 112 | </style> |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -167,6 +167,12 @@ export default { | ... | @@ -167,6 +167,12 @@ export default { |
| 167 | this.$nextTick(()=>{ | 167 | this.$nextTick(()=>{ |
| 168 | this.lineTreeVisible = true | 168 | this.lineTreeVisible = true |
| 169 | }) | 169 | }) |
| 170 | var routePath = this.$route.path; | ||
| 171 | if(routePath == '/viewMap'){ | ||
| 172 | this.isMap = true; | ||
| 173 | }else{ | ||
| 174 | this.isMap = false; | ||
| 175 | } | ||
| 170 | }, | 176 | }, |
| 171 | created() { | 177 | created() { |
| 172 | if (this.$route.meta) { | 178 | if (this.$route.meta) { | ... | ... |
| ... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
| 9 | :auto-upload="false" | 9 | :auto-upload="false" |
| 10 | :on-change="txtFileChange" | 10 | :on-change="txtFileChange" |
| 11 | > | 11 | > |
| 12 | <i class="el-icon-upload"></i> | 12 | <i class="iconfont iconshangchuan"></i> |
| 13 | <div class="title">TXT文本格式</div> | 13 | <div class="title">TXT文本格式</div> |
| 14 | <div class="templateDowload"> | 14 | <div class="templateDowload"> |
| 15 | <a href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt','txttemplet.txt')">TXT模板下载</a> | 15 | <a href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt','txttemplet.txt')">TXT模板下载</a> |
| ... | @@ -25,7 +25,7 @@ | ... | @@ -25,7 +25,7 @@ |
| 25 | :show-file-list="false" | 25 | :show-file-list="false" |
| 26 | :on-success="shpFileSuccess" | 26 | :on-success="shpFileSuccess" |
| 27 | > | 27 | > |
| 28 | <i class="el-icon-upload"></i> | 28 | <i class="iconfont iconshangchuan"></i> |
| 29 | <div class="title">ESRI Shape文件格式</div> | 29 | <div class="title">ESRI Shape文件格式</div> |
| 30 | </el-upload> | 30 | </el-upload> |
| 31 | </li> | 31 | </li> |
| ... | @@ -36,7 +36,7 @@ | ... | @@ -36,7 +36,7 @@ |
| 36 | action="https://jsonplaceholder.typicode.com/posts/" | 36 | action="https://jsonplaceholder.typicode.com/posts/" |
| 37 | accept=".dwg,.dxf" | 37 | accept=".dwg,.dxf" |
| 38 | > | 38 | > |
| 39 | <i class="el-icon-upload"></i> | 39 | <i class="iconfont iconshangchuan"></i> |
| 40 | <div class="title">CAD文件</div> | 40 | <div class="title">CAD文件</div> |
| 41 | </el-upload> | 41 | </el-upload> |
| 42 | </li> | 42 | </li> |
| ... | @@ -48,7 +48,7 @@ | ... | @@ -48,7 +48,7 @@ |
| 48 | :show-file-list="false" | 48 | :show-file-list="false" |
| 49 | :on-success="excelFileSuccess" | 49 | :on-success="excelFileSuccess" |
| 50 | > | 50 | > |
| 51 | <i class="el-icon-upload"></i> | 51 | <i class="iconfont iconshangchuan"></i> |
| 52 | <div class="title">Excel文件格式</div> | 52 | <div class="title">Excel文件格式</div> |
| 53 | <div class="templateDowload"> | 53 | <div class="templateDowload"> |
| 54 | <a href="#" @click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx','exceltemplet.xlsx')">Excel模板下载</a> | 54 | <a href="#" @click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx','exceltemplet.xlsx')">Excel模板下载</a> |
| ... | @@ -334,7 +334,7 @@ export default { | ... | @@ -334,7 +334,7 @@ export default { |
| 334 | align-content:center; | 334 | align-content:center; |
| 335 | li{ | 335 | li{ |
| 336 | margin: 5px; | 336 | margin: 5px; |
| 337 | width: 20%; | 337 | width: 50%; |
| 338 | .title{ | 338 | .title{ |
| 339 | line-height: 1; | 339 | line-height: 1; |
| 340 | margin-top: -57px; | 340 | margin-top: -57px; |
| ... | @@ -343,7 +343,9 @@ export default { | ... | @@ -343,7 +343,9 @@ export default { |
| 343 | .templateDowload{ | 343 | .templateDowload{ |
| 344 | line-height: 1; | 344 | line-height: 1; |
| 345 | margin-top: 7px; | 345 | margin-top: 7px; |
| 346 | 346 | a{ | |
| 347 | color: #409eff; | ||
| 348 | } | ||
| 347 | } | 349 | } |
| 348 | } | 350 | } |
| 349 | } | 351 | } |
| ... | @@ -360,8 +362,8 @@ export default { | ... | @@ -360,8 +362,8 @@ export default { |
| 360 | /deep/ .avatar-uploader .el-upload:hover { | 362 | /deep/ .avatar-uploader .el-upload:hover { |
| 361 | border-color: #409EFF; | 363 | border-color: #409EFF; |
| 362 | } | 364 | } |
| 363 | /deep/ .el-icon-upload { | 365 | /deep/ .iconfont { |
| 364 | font-size: 28px; | 366 | font-size: 20px; |
| 365 | color: #8c939d; | 367 | color: #8c939d; |
| 366 | width:100%; | 368 | width:100%; |
| 367 | text-align: center; | 369 | text-align: center; | ... | ... |
-
Please register or sign in to post a comment