Skip to content

M
mes-ui
Commit 21216612 authored by 周远喜's avatar 周远喜
Browse files
Options

地图ok

parent 0816c9d9
Hide whitespace changes
Inline Side-by-side
Showing with 601 additions and 11 deletions
libs/henq.js
View file @ 21216612
......@@ -200,4 +200,18 @@ henq.getArry = (arryList) => {//得到数据字典对应的label和value，用
});
return arry;
}
henq.random=(minNum, maxNum)=> {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * ( maxNum - minNum + 1 ) + minNum, 10);
//或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
break;
default:
return 0;
break;
}
}
export default henq;
nuxt.config.js
View file @ 21216612
......@@ -29,8 +29,12 @@ export default {
}
],
script: [{
src: '/config.js'
}],
src: '/config.js'
}
// ,{
// src:'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js'
// }
],
link: [{
rel: 'icon',
type: 'image/x-icon',
......
package-lock.json
View file @ 21216612
......@@ -3492,6 +3492,34 @@
"resolved": "http://r.cnpmjs.org/bluebird/download/bluebird-3.7.2.tgz",
"integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28="
},
"bmaplib.curveline": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz",
"integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q=="
},
"bmaplib.heatmap": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz",
"integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q=="
},
"bmaplib.lushu": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz",
"integrity": "sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w=="
},
"bmaplib.markerclusterer": {
"version": "1.0.13",
"resolved": "https://registry.npmjs.org/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz",
"integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==",
"requires": {
"bmaplib.texticonoverlay": "^1.0.2"
}
},
"bmaplib.texticonoverlay": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz",
"integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg=="
},
"bn.js": {
"version": "4.11.8",
"resolved": "http://r.cnpmjs.org/bn.js/download/bn.js-4.11.8.tgz",
......@@ -11304,6 +11332,14 @@
"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
"dev": true
},
"linkify-it": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
"integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
"requires": {
"uc.micro": "^1.0.1"
}
},
"lint-staged": {
"version": "7.3.0",
"resolved": "http://r.cnpmjs.org/lint-staged/download/lint-staged-7.3.0.tgz",
......@@ -11923,6 +11959,25 @@
"object-visit": "^1.0.0"
}
},
"markdown-it": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
"integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
"requires": {
"argparse": "^1.0.7",
"entities": "~1.1.1",
"linkify-it": "^2.0.0",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"dependencies": {
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
}
}
},
"marked": {
"version": "0.3.19",
"resolved": "http://r.cnpmjs.org/marked/download/marked-0.3.19.tgz",
......@@ -11949,6 +12004,11 @@
"resolved": "http://r.cnpmjs.org/mdn-data/download/mdn-data-2.0.4.tgz",
"integrity": "sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs="
},
"mdurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
},
"media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
......@@ -21853,6 +21913,11 @@
"resolved": "http://r.cnpmjs.org/ua-parser-js/download/ua-parser-js-0.7.21.tgz",
"integrity": "sha1-hTz5zpP2QvZxdCc8w0Vlrm8wh3c="
},
"uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
},
"uglify-js": {
"version": "3.4.10",
"resolved": "http://r.cnpmjs.org/uglify-js/download/uglify-js-3.4.10.tgz",
......@@ -22193,6 +22258,18 @@
"resolved": "http://r.cnpmjs.org/vue/download/vue-2.6.11.tgz",
"integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
},
"vue-baidu-map": {
"version": "0.21.22",
"resolved": "https://registry.npmjs.org/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz",
"integrity": "sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==",
"requires": {
"bmaplib.curveline": "^1.0.0",
"bmaplib.heatmap": "^1.0.4",
"bmaplib.lushu": "^1.0.7",
"bmaplib.markerclusterer": "^1.0.13",
"markdown-it": "^8.4.0"
}
},
"vue-class-component": {
"version": "7.2.3",
"resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.2.3.tgz",
......
package.json
View file @ 21216612
......@@ -44,6 +44,7 @@
"ua-parser-js": "^0.7.18",
"v-viewer": "^1.5.1",
"view-design": "^4.1.3",
"vue-baidu-map": "^0.21.22",
"vue-echarts": "^4.0.3",
"vue-i18n": "^8.15.5",
"vue-json-viewer": "^2.2.8",
......
pages/demo/index.vue
View file @ 21216612
<template>
<div class="bm-view">
<div class="ad">
<div class="count">
<label>配属数量（列）</label>
<span>629</span>
</div>
<div class="count">
<label>停车股道</label>
<span>250</span>
</div>
<div class="count">
<label>停产库位</label>
<span>560</span>
</div>
<div class="count">
<label>维修股道</label>
<span>38</span>
</div>
<div class="count">
<label>维修库位</label>
<span>76</span>
</div>
</div>
<div class="legend"></div>
<div class="eye">
<a @click="show">
<Icon :type="eye?'md-eye':'md-eye-off'" size="36" />
</a>
</div>
<div class="lab">
<p>图例</p>
<div>
<div class="block"></div>
<div class="info fg">为京泸京广服务的动车所</div>
</div>
<div>
<div class="block dot"></div>
<div class="info fg">目前不为京泸京广服务的动车所</div>
</div>
<div>
<div class="block line"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>
<baidu-map
class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center"
:zoom="zoom"
:maxZoom="7"
@ready="handler"
:mapStyle="my"
@click="hi"
>
<!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--缩放控件-->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
<!--聚合动态添加的点坐标-->
<bm-marker-clusterer :averageCenter="true">
<bm-marker
v-for="marker of markers"
:key="marker.code"
:position="{lng: marker.lng, lat: marker.lat}"
@click="lookDetail(marker)"
color="green"
></bm-marker>
</bm-marker-clusterer>
<bm-marker :position="marker" :dragging="true" @click="lookDetail(marker)"></bm-marker>
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_LEFT"
></bm-map-type>
<bm-info-window
:position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}"
:title="infoWindow.info.name"
:show="infoWindow.show"
@close="infoWindowClose"
@open="infoWindowOpen"
>
<div class="pop">
<h3>
{{infoWindow.info.name}}车管所
<a @click="infoWindowClose" class="fr mr5">
<Icon type="md-close" size="24" />
</a>
</h3>
<div class="content">
<ul>
<li v-for="li in infoWindow.info.list" :key="li.car">
{{li.car}}:
<span>{{li.count}}列</span>
</li>
</ul>
</div>
</div>
</bm-info-window>
</baidu-map>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BMapLib from 'BMapLib';
import BmScale from "vue-baidu-map/components/controls/Scale";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
const citys = `北京,116.28,39.54
上海,121.29,31.14
天津,117.11,39.09
重庆,106.32,29.32
哈尔滨,126.41,45.45
长春,125.19,43.52
沈阳,123.24,41.50
呼和浩特,111.48,40.49
石家庄,114.28,38.02
太原,112.34,37.52
济南,117.,36.38
郑州,113.42,34.48
西安,108.54,34.16
兰州,103.49,36.03
银川,106.16,38.20
西宁,101.45,36.38
乌鲁木齐,87.36,43.48
合肥,117.18,31.51
南京,118.50,32.02
杭州,120.09,30.14
长沙,113.,28.11
南昌,115.52,28.41
武汉,114.21,30.37
成都,104.05,30.39
贵阳,106.42,26.35
福州,119.18,26.05
台北,121.31,25.03
广州,113.15,23.08
海口,110.20,20.02
南宁,108.20,22.48
昆明,102.41,25.0
拉萨,91.10,29.40
香港,114.10,22.18`;
export default {
components: {
BaiduMap,
BmScale,
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow
},
data() {
return {
center: { lng: 0, lat: 0 },
marker: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
},
zoom: 1,
eye: false,
map: null,
infoBox: null,
my: {
styleJson: [
{
featureType: "land",
elementType: "geometry",
stylers: {
color: "#033361ff"
}
},
{
featureType: "tertiaryway",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "cityhighway",
elementType: "geometry",
stylers: {
visibility: "off"
}
},
{
featureType: "water",
elementType: "geometry",
stylers: {
color: "#4a90e2ff"
}
},
{
featureType: "districtlabel",
elementType: "labels",
stylers: {
visibility: "on"
}
},
{
featureType: "districtlabel",
elementType: "labels.icon",
stylers: {
visibility: "on"
}
},
{
featureType: "districtlabel",
elementType: "labels.text.stroke",
stylers: {
weight: 0,
color: "#ffffff00"
}
},
{
featureType: "districtlabel",
elementType: "labels.text.fill",
stylers: {
color: "#4a90e2ff",
weight: 10
}
},
{
featureType: "road",
elementType: "geometry",
stylers: {
visibility: "off"
}
}
]
},
map: null,
markers: [],
infoWindow: {
lng: 0,
lat: 0,
show: false,
info: {
name: "北京",
lng: 116.28,
lat: 39.54,
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
}
}
};
},
methods: {
handler({ BMap, map }) {
console.log(BMap, map);
this.center = "兰州";
this.zoom = 6;
map.disableDoubleClickZoom();
this.map = map;
window.map = map;
},
show() {
this.eye = !this.eye;
let ps = [];
if (this.eye) {
var arr = citys.split("\n");
arr.map(u => {
let v = u.split(",");
let p = {
name: v[0],
lng: parseFloat(v[1]),
lat: parseFloat(v[2]),
list: [
{ car: "CRH380A", count: 29 },
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
};
ps.push(p);
});
}
this.markers = ps;
},
infoWindowOpen(e) {
this.infoWindow.show = true;
},
infoWindowClose(e) {
this.infoWindow.show = false;
},
hi(e) {
// alert(1)
console.warn("EEE", e);
},
lookDetail(data, target) {
// console.log('data',data)
this.infoWindow.show = true;
this.infoWindow.info = data;
}
}
};
</script>
<style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8);
.bm-view {
position: fixed;
width: 100%;
top: 100px;
left: 0;
right: 0;
height: calc(100vh - 100px);
.ad {
position: absolute;
width: 100%;
top: 40px;
text-align: center;
z-index: 3;
height: 60px;
color: white;
.count {
background: url("../../assets/images/demo/bg.png");
width: 205px;
height: 55px;
display: inline-flex;
margin: 0 40px;
line-height: 55px;
label {
display: inline-block;
width: 120px;
font-size: 16px;
font-weight: bold;
text-align: right;
}
span {
display: inline-block;
width: 85px;
font-size: 32px;
font-weight: bold;
}
}
}
.legend {
position: absolute;
width: 200px;
height: 240px;
background: url("../../assets/images/demo/legend.png") no-repeat center
rgba(0, 38, 77, 0.8);
bottom: 20px;
left: 10px;
z-index: 2;
border: 1px solid rgba(0, 38, 77, 1);
}
.eye {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
padding-top: 5px;
text-align: center;
right: 20px;
top: 20px;
background: #00264d;
border-radius: 8px;
z-index: 10;
a {
color: #ddd;
}
a:hover {
color: white;
}
}
.lab {
position: absolute;
z-index: 5;
width: 260px;
bottom: 20px;
background: @bgcolor;
border: 1px solid black;
right: 100px;
color: white;
padding: 10px 20px;
>p{
font-size: 14px;
font-weight: bold;
line-height: 40px;
}
> div {
display: flex;
.block {
display: block;
height: 40px;
width: 60px;
border: 1px solid #ddd;
}
.dot{
border: 1px dotted #ddd;
}
.line{
border: 1px dashed #ddd;
}
.info {
padding-left: 10px;
flex-grow: 1;
}
height: 60px;
}
}
.map {
width: 100%;
height: 100%;
.BMap_cpyCtrl,
.anchorBL {
display: none;
}
.infoBoxContent {
background: red;
}
.BMap_pop {
.BMap_center {
// background: @bgcolor;
border-width: 0;
background: transparent;
}
.BMap_bottom {
// background: @bgcolor;
display: none;
}
.BMap_top {
display: none;
}
.BMap_bubble_title {
display: none;
}
img {
display: none;
}
div:nth-child(8),
div:nth-child(5) {
display: none;
}
> div:nth-child(1) {
display: none;
div {
display: none;
}
}
> div:nth-child(2) {
display: none;
}
> div:nth-child(3) {
display: none;
}
div:nth-child(7) {
display: none;
}
.pop {
color: white;
// padding: 0 0 20px 0;
// border: 1px solid #000;
border-radius: 8px;
background: #1e4b78;
h3 {
line-height: 50px;
background: #266099;
border-radius: 8px 8px 0 0;
padding-left: 20px;
a {
color: black;
}
a:hover {
color: white;
}
}
.content {
padding: 5px 15px;
li {
line-height: 30px;
font-size: 12px;
span {
float: right;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
plugins/iview.js
View file @ 21216612
......@@ -37,7 +37,7 @@ import ResourceSelect from '@/components/page/resourceSelect.vue'
import StoreTree from '@/components/page/storeTree.vue'
import StoreSelect from '@/components/page/storeSelect.vue'
import clipboard from 'clipboard';
import BaiduMap from 'vue-baidu-map'
// import i18n from '@/i18n';
import radioButton from '@/components/page/radioButton.vue'
import InputIcon from '@/components/page/inputIcon.vue'
......@@ -147,7 +147,10 @@ export default ({
i18n: (key, value) => app.i18n.t(key, value)
})
Vue.use(iViewPro);
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc'
})
Vue.prototype.$log = {
...util.log,
push(data) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment