Skip to content

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

地图更改完成

parent 30bdd2ea
Show whitespace changes
Inline Side-by-side
Showing with 869 additions and 280 deletions
assets/images/demo/bg.png
View replaced file @ 30bdd2ea View file @ 4f9a288a
assets/images/demo/bg.png

892 Bytes | W: | H:

assets/images/demo/bg.png

852 Bytes | W: | H:

assets/images/demo/bg.png
assets/images/demo/bg.png
assets/images/demo/bg.png
assets/images/demo/bg.png
  • 2-up
  • Swipe
  • Onion skin
assets/images/demo/legend.png
View replaced file @ 30bdd2ea View file @ 4f9a288a
assets/images/demo/legend.png

7.21 KB | W: | H:

assets/images/demo/legend.png

12.2 KB | W: | H:

assets/images/demo/legend.png
assets/images/demo/legend.png
assets/images/demo/legend.png
assets/images/demo/legend.png
  • 2-up
  • Swipe
  • Onion skin
pages/demo/index.vue
View file @ 4f9a288a
......@@ -28,7 +28,7 @@
<Icon :type="eye?'md-eye':'md-eye-off'" size="36" />
</a>
</div>
<div class="lab">
<!-- <div class="lab">
<p>图例</p>
<div class="item">
<div class="block" v-width="60"></div>
......@@ -42,7 +42,7 @@
<div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>
</div>-->
<baidu-map
class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
......@@ -50,7 +50,7 @@
:zoom="zoom"
:maxZoom="7"
@ready="handler"
:mapStyle="my"
:vmapStyle="my"
@click="hi"
>
<!--比例尺控件-->
......@@ -60,13 +60,17 @@
<!--聚合动态添加的点坐标-->
<bm-marker-clusterer :averageCenter="true">
<bm-marker
v-for="marker of markers"
v-for="(marker ,i) in markers"
:key="marker.code"
:position="{lng: marker.lng, lat: marker.lat}"
@click="lookDetail(marker)"
:icon="{url: '/images/map/train/'+(i%3+1)+'.png', size: {width: 32, height: 32}}"
:width="19"
:height="23"
color="green"
></bm-marker>
</bm-marker-clusterer>
<!-- :icon="{url:'/images/map/train/1.png',size:{widht:19,height:23}}" -->
<bm-marker :position="marker" :dragging="true" @click="lookDetail(marker)"></bm-marker>
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
......@@ -108,7 +112,7 @@ 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";
import citys from "./city"
import citys from "./city";
export default {
components: {
BaiduMap,
......@@ -116,7 +120,7 @@ export default {
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow
BmInfoWindow,
},
data() {
return {
......@@ -130,91 +134,189 @@ export default {
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
{ car: "CRH388A", count: 24 },
],
},
zoom: 1,
eye: false,
map: null,
infoBox: null,
icon: null,
my: {
styleJson: [
{
featureType: "land",
elementType: "geometry",
stylers: {
color: "#033361ff"
}
color: "#033361ff",
},
},
{
featureType: "tertiaryway",
elementType: "geometry",
stylers: {
visibility: "off"
}
visibility: "off",
},
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
visibility: "off"
}
visibility: "off",
},
},
{
featureType: "cityhighway",
elementType: "geometry",
stylers: {
visibility: "off"
}
visibility: "off",
},
},
{
featureType: "water",
elementType: "geometry",
stylers: {
color: "#4a90e2ff"
}
color: "#4a90e2ff",
},
},
{
featureType: "districtlabel",
elementType: "labels",
stylers: {
visibility: "on"
}
visibility: "on",
},
},
{
featureType: "districtlabel",
elementType: "labels.icon",
stylers: {
visibility: "on"
}
visibility: "on",
},
},
{
featureType: "districtlabel",
elementType: "labels.text.stroke",
stylers: {
weight: 0,
color: "#ffffff00"
}
color: "#ffffff00",
},
},
{
featureType: "districtlabel",
elementType: "labels.text.fill",
stylers: {
color: "#4a90e2ff",
weight: 10
}
weight: 10,
},
},
{
featureType: "road",
elementType: "geometry",
stylers: {
visibility: "off"
}
}
]
visibility: "off",
},
},
],
},
map: null,
markers: [],
plat: {
markers: [
{ lng: 115.467616, lat: 39.639978, color: 3 },
{ lng: 113.223145, lat: 37.502619, color: 3 },
{ lng: 112.855199, lat: 35.362032, color: 3 },
{ lng: 109.911632, lat: 33.533201, color: 3 },
{ lng: 107.299216, lat: 31.821696, color: 3 },
{ lng: 103.104632, lat: 30.556405, color: 3 },
{ lng: 112.266486, lat: 33.779374, color: 1 },
{ lng: 122.495383, lat: 42.152382, color: 2 },
{ lng: 115.945945, lat: 40.262994, color: 2 },
{ lng: 113.075967, lat: 34.908621, color: 2 },
{ lng: 117.712086, lat: 31.632994, color: 2 },
{ lng: 114.584545, lat: 30.333231, color: 2 },
{ lng: 112.119308, lat: 28.496996, color: 2 },
{ lng: 112.818405, lat: 23.613362, color: 2 },
{ lng: 110.169194, lat: 21.666574, color: 2 },
{ lng: 115.062875, lat: 38.115676, color: 1 },
{ lng: 112.524048, lat: 25.731484, color: 3 },
{ lng: 112.266486, lat: 37.911894, color: 3 },
{ lng: 109.102151, lat: 35.331884, color: 3 },
{ lng: 103.546167, lat: 36.290971, color: 3 },
{ lng: 102.994248, lat: 30.969496, color: 3 },
{ lng: 107.262421, lat: 30.01352, color: 3 },
{ lng: 107.188832, lat: 26.329873, color: 3 },
{ lng: 102.699892, lat: 25.096532, color: 3 },
{ lng: 104.650005, lat: 33.286319, color: 1 },
{ lng: 107.041654, lat: 23.511602, color: 1 },
{ lng: 100.197859, lat: 37.002584, color: 2 },
{ lng: 95.524946, lat: 33.594811, color: 2 },
{ lng: 91.95587, lat: 29.853272, color: 2 },
{ lng: 97.548648, lat: 28.00826, color: 2 },
{ lng: 100.381832, lat: 25.464548, color: 2 },
{ lng: 110.757908, lat: 26.95813, color: 2 },
{ lng: 116.313891, lat: 27.910241, color: 2 },
{ lng: 120.398091, lat: 29.435411, color: 2 },
{ lng: 95.340973, lat: 29.499811, color: 1 },
{ lng: 92.765351, lat: 32.010009, color: 1 },
],
lines: [
{
color: "#000000",
points: [
{ lng: 115.98274, lat: 39.583056 },
{ lng: 114.326983, lat: 37.473298 },
{ lng: 113.25994, lat: 35.060041 },
{ lng: 110.242783, lat: 33.069718 },
{ lng: 106.894475, lat: 31.001198 },
{ lng: 103.288605, lat: 30.205473 },
],
},
{
color: "#5D4037",
points: [
{ lng: 123.010507, lat: 41.657604 },
{ lng: 116.829016, lat: 40.065382 },
{ lng: 114.290189, lat: 38.318886 },
{ lng: 113.701475, lat: 34.999507 },
{ lng: 117.049783, lat: 32.010009 },
{ lng: 114.14301, lat: 30.874326 },
{ lng: 112.744816, lat: 28.626943 },
{ lng: 113.443913, lat: 23.681157 },
{ lng: 110.463551, lat: 21.494489 },
{ lng: 110.242783, lat: 19.588245 },
],
},
{
color: "#00C2B1",
points: [
{ lng: 117.417729, lat: 36.201554 },
{ lng: 112.524048, lat: 37.414621 },
{ lng: 109.359713, lat: 34.756918 },
{ lng: 104.282059, lat: 36.052296 },
{ lng: 103.877319, lat: 31.191186 },
{ lng: 106.268967, lat: 29.756998 },
{ lng: 106.784091, lat: 27.089948 },
{ lng: 103.178221, lat: 24.861755 },
{ lng: 107.740751, lat: 23.001614 },
],
},
{
color: "#00B5FF",
points: [
{ lng: 119.772583, lat: 30.045538 },
{ lng: 116.497864, lat: 28.496996 },
{ lng: 107.4096, lat: 26.66097 },
{ lng: 100.529011, lat: 25.931289 },
{ lng: 98.026978, lat: 28.724296 },
{ lng: 91.0728, lat: 29.628488 },
{ lng: 92.91253, lat: 31.664471 },
{ lng: 95.745713, lat: 33.069718 },
{ lng: 97.40147, lat: 34.604934 },
{ lng: 101.154519, lat: 36.736507 },
],
},
],
},
infoWindow: {
lng: 0,
lat: 0,
......@@ -228,12 +330,15 @@ export default {
{ car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 }
]
}
}
{ car: "CRH388A", count: 24 },
],
},
},
};
},
created() {
this.icon = new BMap.Icon("/images/map/train/1.png", new BMap.Size(19, 23));
},
methods: {
handler({ BMap, map }) {
console.log(BMap, map);
......@@ -242,18 +347,65 @@ export default {
map.disableDoubleClickZoom();
this.map = map;
window.map = map;
// this.draw()
setTimeout(this.draw, 2000);
},
draw() {
// this.plat.markers.map((u) => {
// this.addMarker(u);
// });
this.plat.lines.map((line, i) => {
line.color = i % 2 == 0 ? "#000" : "#00C2B1";
this.addRailway(line);
});
},
addRailway(line) {
line.points.map((u) => {
this.addDot("#000", u);
});
//BMap_Symbol_SHAPE_RECTANGLE,BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_RECTANGLE, {
scale: 0.8, //图标缩放大小
strokeColor: "#fff", //设置矢量图标的线填充颜色
strokeWeight: "2", //设置线宽
});
var icons = new BMap.IconSequence(sy, "10", "20");
let dots = [];
line.points.map((u) => {
dots.push(new BMap.Point(u.lng, u.lat));
});
var polyline = new BMap.Polyline(dots, {
enableEditing: false, //是否启用线编辑，默认为false
enableClicking: false, //是否响应点击事件，默认为true
icons: [icons],
strokeWeight: "3", //折线的宽度，以像素为单位
strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
strokeColor: line.color, //折线颜色
// strokeColor: '#333', //折线颜色
});
this.map.addOverlay(polyline);
},
addDot(color, u) {
var myIcon = new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
strokeWeight: 4,
strokeColor: color,
});
var opt = {
title: `${u.lng}:${u.lat}`,
icon: myIcon,
};
var point = new BMap.Point(u.lng, u.lat);
var marker2 = new BMap.Marker(point, opt); // 创建标注
this.map.addOverlay(marker2); // 将标注添
},
show() {
this.eye = !this.eye;
let ps = [];
if (this.eye) {
ps=citys;
ps = citys;
}
this.markers = ps;
console.warn(JSON.stringify(ps))
console.warn(JSON.stringify(ps));
},
infoWindowOpen(e) {
this.infoWindow.show = true;
......@@ -269,13 +421,13 @@ export default {
// console.log('data',data)
this.infoWindow.show = true;
this.infoWindow.info = data;
}
}
},
},
};
</script>
<style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8);
@bgcolor: rgba(6, 119, 240, 0.8);
.bm-view {
position: fixed;
width: 100%;
......@@ -290,7 +442,7 @@ export default {
text-align: center;
z-index: 3;
height: 60px;
color: white;
color: black;
.count {
background: url("../../assets/images/demo/bg.png");
width: 205px;
......@@ -316,13 +468,13 @@ export default {
.legend {
position: absolute;
width: 200px;
height: 240px;
height: 220px;
background: url("../../assets/images/demo/legend.png") no-repeat center
rgba(0, 38, 77, 0.8);
rgba(53, 145, 236, 0.5);
bottom: 20px;
left: 10px;
z-index: 2;
border: 1px solid rgba(0, 38, 77, 1);
border: 1px solid rgb(34, 139, 245);
}
.eye {
position: absolute;
......@@ -334,27 +486,27 @@ export default {
right: 20px;
top: 20px;
background: #00264d;
background: #067bf0;
border-radius: 8px;
z-index: 10;
a {
color: #ddd;
color: white;
}
a:hover {
color: white;
color: #ddd;
}
}
.lab {
position: absolute;
z-index: 5;
width: 260px;
width: 220px;
bottom: 20px;
background: @bgcolor;
border: 1px solid black;
background: rgba(32, 145, 223, 0.2);
border: 1px solid rgba(32, 145, 223, 1);
right: 100px;
color: white;
color: black;
padding: 10px 10px 0 10px;
>p{
> p {
font-size: 14px;
font-weight: bold;
line-height: 40px;
......@@ -363,19 +515,21 @@ export default {
.block {
height: 40px;
width: 60px;
border: 1px solid #ddd;
border: 1px solid black;
float: left;
margin-right: 10px;
}
.dot{
border: 1px dotted #ddd;
.dot {
border: 1px dotted black;
}
.line{
border: 1px dashed #ddd;
.line {
border: 1px dashed black;
}
.info {
padding-left: 20px;
flex-grow: 1;
font-size: 120x;
font-weight: normal;
}
height: 60px;
}
......@@ -439,7 +593,7 @@ export default {
h3 {
line-height: 38px;
// background: #266099;//#2680EB
background:#2680EB;//
background: #2680eb; //
border-radius: 8px 8px 0 0;
padding-left: 20px;
a {
......
pages/demo/lid/3.vue
View file @ 4f9a288a
<template>
<div class="bm-lid">
<div class="bm-lid3">
<div class="ad">
<FormRow></FormRow>
<!-- <div class="count">
......@@ -26,7 +26,7 @@
<div class="menu">
<Menu></Menu>
</div>
<div class="legend"></div>
<!-- <div class="legend"></div>
<div class="lab">
<p>图例</p>
<div class="item">
......@@ -41,16 +41,15 @@
<div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>
</div>-->
<baidu-map
class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center"
:center="{lng:103.546,lat:36.2909}"
:zoom="zoom"
:maxZoom="7"
@ready="handler"
:mapStyle="my"
@click="hi"
:vmapStyle="my"
>
<!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
......@@ -96,6 +95,19 @@
</div>
</bm-info-window>
</baidu-map>
<Drawer title="设备详情" width="300" :transfer="false" :inner="true" :mask="false" v-model="lidModal">
<div>
<p>MAC :45678954345670987</p>
<p>编号：0001</p>
<p>名称：鸿蒙</p>
<p>街道：迪拜大楼</p>
<p>财务状态：已设防</p>
<p class="red">状态：报警</p>
<p v-if="dot">经纬度:
<span>{{dot.point.lng}},{{dot.point.lat}}</span>
</p>
</div>
</Drawer>
</div>
</template>
......@@ -124,6 +136,8 @@ export default {
data() {
return {
center: { lng: 0, lat: 0 },
dot:null,
lidModal: false,
marker: {
name: "北京",
lng: 116.28,
......@@ -146,7 +160,8 @@ export default {
featureType: "land",
elementType: "geometry",
stylers: {
color: "#033361ff",
// color: "#033361ff",
color: "#f8f3e0ff",
},
},
{
......@@ -235,6 +250,103 @@ export default {
],
},
},
plat: {
markers: [
{ lng: 115.467616, lat: 39.639978, color: 3 },
{ lng: 113.223145, lat: 37.502619, color: 3 },
{ lng: 112.855199, lat: 35.362032, color: 3 },
{ lng: 109.911632, lat: 33.533201, color: 3 },
{ lng: 107.299216, lat: 31.821696, color: 3 },
{ lng: 103.104632, lat: 30.556405, color: 3 },
{ lng: 112.266486, lat: 33.779374, color: 1 },
{ lng: 122.495383, lat: 42.152382, color: 2 },
{ lng: 115.945945, lat: 40.262994, color: 2 },
{ lng: 113.075967, lat: 34.908621, color: 2 },
{ lng: 117.712086, lat: 31.632994, color: 2 },
{ lng: 114.584545, lat: 30.333231, color: 2 },
{ lng: 112.119308, lat: 28.496996, color: 2 },
{ lng: 112.818405, lat: 23.613362, color: 2 },
{ lng: 110.169194, lat: 21.666574, color: 2 },
{ lng: 115.062875, lat: 38.115676, color: 1 },
{ lng: 112.524048, lat: 25.731484, color: 3 },
{ lng: 112.266486, lat: 37.911894, color: 3 },
{ lng: 109.102151, lat: 35.331884, color: 3 },
{ lng: 103.546167, lat: 36.290971, color: 3 },
{ lng: 102.994248, lat: 30.969496, color: 3 },
{ lng: 107.262421, lat: 30.01352, color: 3 },
{ lng: 107.188832, lat: 26.329873, color: 3 },
{ lng: 102.699892, lat: 25.096532, color: 3 },
{ lng: 104.650005, lat: 33.286319, color: 1 },
{ lng: 107.041654, lat: 23.511602, color: 1 },
{ lng: 100.197859, lat: 37.002584, color: 2 },
{ lng: 95.524946, lat: 33.594811, color: 2 },
{ lng: 91.95587, lat: 29.853272, color: 2 },
{ lng: 97.548648, lat: 28.00826, color: 2 },
{ lng: 100.381832, lat: 25.464548, color: 2 },
{ lng: 110.757908, lat: 26.95813, color: 2 },
{ lng: 116.313891, lat: 27.910241, color: 2 },
{ lng: 120.398091, lat: 29.435411, color: 2 },
{ lng: 95.340973, lat: 29.499811, color: 1 },
{ lng: 92.765351, lat: 32.010009, color: 1 },
],
lines: [
{
color: "#000000",
points: [
{ lng: 115.98274, lat: 39.583056 },
{ lng: 114.326983, lat: 37.473298 },
{ lng: 113.25994, lat: 35.060041 },
{ lng: 110.242783, lat: 33.069718 },
{ lng: 106.894475, lat: 31.001198 },
{ lng: 103.288605, lat: 30.205473 },
],
},
{
color: "#5D4037",
points: [
{ lng: 123.010507, lat: 41.657604 },
{ lng: 116.829016, lat: 40.065382 },
{ lng: 114.290189, lat: 38.318886 },
{ lng: 113.701475, lat: 34.999507 },
{ lng: 117.049783, lat: 32.010009 },
{ lng: 114.14301, lat: 30.874326 },
{ lng: 112.744816, lat: 28.626943 },
{ lng: 113.443913, lat: 23.681157 },
{ lng: 110.463551, lat: 21.494489 },
{ lng: 110.242783, lat: 19.588245 },
],
},
{
color: "#00C2B1",
points: [
{ lng: 117.417729, lat: 36.201554 },
{ lng: 112.524048, lat: 37.414621 },
{ lng: 109.359713, lat: 34.756918 },
{ lng: 104.282059, lat: 36.052296 },
{ lng: 103.877319, lat: 31.191186 },
{ lng: 106.268967, lat: 29.756998 },
{ lng: 106.784091, lat: 27.089948 },
{ lng: 103.178221, lat: 24.861755 },
{ lng: 107.740751, lat: 23.001614 },
],
},
{
color: "#00B5FF",
points: [
{ lng: 119.772583, lat: 30.045538 },
{ lng: 116.497864, lat: 28.496996 },
{ lng: 107.4096, lat: 26.66097 },
{ lng: 100.529011, lat: 25.931289 },
{ lng: 98.026978, lat: 28.724296 },
{ lng: 91.0728, lat: 29.628488 },
{ lng: 92.91253, lat: 31.664471 },
{ lng: 95.745713, lat: 33.069718 },
{ lng: 97.40147, lat: 34.604934 },
{ lng: 101.154519, lat: 36.736507 },
],
},
],
},
};
},
methods: {
......@@ -245,6 +357,75 @@ export default {
map.disableDoubleClickZoom();
this.map = map;
window.map = map;
setTimeout(this.draw, 1000);
},
draw() {
this.plat.markers.map((u, i) => {
if (i % 3 == 0) {
u.color - 1;
this.addMarker(u);
}
});
this.plat.lines.map((line, i) => {
line.color = i % 2 == 0 ? "#000" : "#00C2B1";
this.addRailway(line);
});
},
addRailway(line) {
line.points.map((u) => {
this.addDot("#000", u);
});
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_RECTANGLE, {
scale: 0.6, //图标缩放大小
strokeColor: "#fff", //设置矢量图标的线填充颜色
strokeWeight: "2", //设置线宽
});
var icons = new BMap.IconSequence(sy, "10", "20");
let dots = [];
line.points.map((u) => {
dots.push(new BMap.Point(u.lng, u.lat));
});
var polyline = new BMap.Polyline(dots, {
enableEditing: false, //是否启用线编辑，默认为false
enableClicking: false, //是否响应点击事件，默认为true
icons: [icons],
strokeWeight: "4", //折线的宽度，以像素为单位
strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
strokeColor: line.color, //折线颜色
// strokeColor: '#333', //折线颜色
});
this.map.addOverlay(polyline);
},
addMarker(u) {
var myIcon = new BMap.Icon(
"/images/map/lid/" + u.color + ".png",
new BMap.Size(18, 22)
);
var opt = {
title: `${u.lng}:${u.lat}`,
icon: myIcon,
};
var point = new BMap.Point(u.lng, u.lat);
var marker2 = new BMap.Marker(point, opt); // 创建标注
this.map.addOverlay(marker2); // 将标注添
marker2.addEventListener("click", (p) => {
this.lidModal = true;
this.dot=p;
console.warn("vvv",p)
});
},
addDot(color, u) {
var myIcon = new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
strokeWeight: 4,
strokeColor: color,
});
var opt = {
title: `${u.lng}:${u.lat}`,
icon: myIcon,
};
var marker2 = new BMap.Marker(u, opt); // 创建标注
this.map.addOverlay(marker2); // 将标注添
},
show() {
this.eye = !this.eye;
......@@ -275,13 +456,16 @@ export default {
<style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8);
.bm-lid {
position: fixed;
.bm-lid3 {
position: absolute;
width: 100%;
top: 100px;
left: 0;
right: 0;
height: calc(100vh - 100px);
.ivu-drawer-header{
background: #f5f6fa;
}
.ad {
position: absolute;
width: 100%;
......@@ -291,48 +475,30 @@ export default {
height: 60px;
text-align: center;
z-index: 3;
// height: 60px;
// padding: 0 150px;
// line-height: 60px;
.form-row {
margin: 10px auto;
width: 80%;
width: 60%;
border-radius: 5px;
border: 1px solid #ddd;
background: white;
padding: 20px 40px 0 40px;
}
// 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;
// }
// }
padding: 10px 40px;
.ivu-form-item {
margin-bottom: 0;
}
}
}
.menu {
position: absolute;
width: 240px;
height: 700px;
top:80px;
background: white;
border-radius: 5px;
border-radius: 8px;
bottom: 15px;
left: 20px;
z-index: 4;
border: 1px solid #ddd;
padding-top: 15px;
}
.legend {
position: absolute;
......@@ -455,21 +621,24 @@ export default {
// padding: 0 0 20px 0;
// border: 1px solid #000;
border-radius: 8px;
background: #1e4b78;
// background: #1e4b78;
background: white;
h3 {
line-height: 50px;
background: #266099;
line-height: 38px;
// background: #266099;//#2680EB
background: #2680eb; //
border-radius: 8px 8px 0 0;
padding-left: 20px;
a {
color: black;
color: white;
}
a:hover {
color: white;
color: #ddd;
}
}
.content {
padding: 5px 15px;
color: black;
li {
line-height: 30px;
font-size: 12px;
......
pages/demo/lid/components/sideEast.vue
View file @ 4f9a288a
......@@ -7,7 +7,7 @@
</div>
</Card>
<div class="mt30 treeDiv">
<Tree :data="data1"></Tree>
<Tree :data="data1" @on-select-change="gopage()"></Tree>
</div>
</div>
</template>
......@@ -71,7 +71,17 @@ export default {
],
};
},
methods: {},
methods: {
gopage(){
this.$router.push({
path:"/demo/lid/3",
params:{
count:1,
num:0
}
})
}
},
mounted() {},
};
</script>
......
pages/demo/lid/components/sideWest.vue
View file @ 4f9a288a
<template>
<div>
<div class="gradient" >
<div class="ads">
<div class="gradient" @click="gopage(1)">
<p>井盖总数</p>
<p><span class="f20 fwBold">1234</span>个</p>
<p>
<span class="f20 fwBold">1234</span>个
</p>
</div>
<div class="mt30 gradient1" >
<div class="mt30 gradient1" @click="gopage(2)">
<p>正常数量</p>
<p><span class="f20 fwBold">1204</span>个</p>
<p>
<span class="f20 fwBold">1204</span>个
</p>
</div>
<div class="mt30 gradient2" >
<div class="mt30 gradient2" @click="gopage(3)">
<p>报警数量</p>
<p><span class="f20 fwBold">30</span>个</p>
<p>
<span class="f20 fwBold">30</span>个
</p>
</div>
<div class="mt30 demoDiv">
<Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
......@@ -25,8 +31,8 @@
<div class="mt20 divInfo">
<p>地址：山西省西安市未央区</p>
<p>设备名称：凤城五路11号井盖</p>
<p>报警时间：2020-06-06 08:08:08</p>
<p class="red">报警数值：甲烷浓度-55%</p>
<p>报警时间：2020-06-06 08:18:28</p>
<p class="red">报警数值：井盖移位</p>
</div>
</Card>
</div>
......@@ -38,12 +44,26 @@ export default {
data() {
return {};
},
methods: {},
methods: {
gopage(n) {
this.$router.push({
path: "/demo/lid/3",
params: {
count: 10,
num: n,
},
});
},
},
mounted() {},
};
</script>
<style scoped>
.gradient {
<style lang="less">
.ads {
>div{
cursor: pointer;
}
.gradient {
background: url(/imgshow/bg1.png) right top no-repeat,
-moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%);
background: -webkit-gradient(
......@@ -64,63 +84,64 @@ export default {
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.gradient1 {
padding: 20px;
}
.gradient1 {
background: url(/imgshow/bg3.png) right top no-repeat,
-moz-linear-gradient(left, #05E99C 0%, #7CF538 100%);
-moz-linear-gradient(left, #05e99c 0%, #7cf538 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #05E99C),
color-stop(100%, #7CF538)
color-stop(0%, #05e99c),
color-stop(100%, #7cf538)
);
background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: -o-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: -ms-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: -webkit-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: -o-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: -ms-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: url(/imgshow/bg3.png) right top no-repeat,
linear-gradient(to right, #05E99C 0%, #7CF538 100%);
linear-gradient(to right, #05e99c 0%, #7cf538 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.gradient2 {
padding: 20px;
}
.gradient2 {
background: url(/imgshow/bg5.png) right top no-repeat,
-moz-linear-gradient(left, #F95577 0%, #FCA534 100%);
-moz-linear-gradient(left, #f95577 0%, #fca534 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #F95577),
color-stop(100%, #FCA534)
color-stop(0%, #f95577),
color-stop(100%, #fca534)
);
background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: -o-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: -ms-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: -webkit-linear-gradient(top, #f95577 0%, #fca534 100%);
background: -o-linear-gradient(top, #f95577 0%, #fca534 100%);
background: -ms-linear-gradient(top, #f95577 0%, #fca534 100%);
background: url(/imgshow/bg5.png) right top no-repeat,
linear-gradient(to right, #F95577 0%, #FCA534 100%);
linear-gradient(to right, #f95577 0%, #fca534 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.divInfo {
padding: 20px;
}
.divInfo {
background: #fff;
padding: 0 20px;
}
.divInfo p {
}
.divInfo p {
text-align: left;
line-height: 26px;
}
.demoDiv .ivu-card-head {
}
.demoDiv .ivu-card-head {
background: #dedde4;
}
}
</style>
\ No newline at end of file
pages/demo/lid/formRow.vue
View file @ 4f9a288a
......@@ -76,6 +76,6 @@ export default {
},
};
</script>
<style lang="less" scoped>
<style lang="less">
</style>
pages/demo/lid/index.vue
View file @ 4f9a288a
<template>
<div class="bm-lid">
<!--
<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="lab">
<p>图例</p>
<div class="item">
<div class="block" v-width="60"></div>
<div class="info fg">为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block dot" v-width="60"></div>
<div class="info fg">目前不为京泸京广服务的动车所</div>
</div>
<div class="item">
<div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div>
</div>
</div>-->
<div class="sideWest">
<SideWest></SideWest>
</div>
<div class="sideEast">
<SideEast></SideEast>
</div>
<div class="tools">
<RadioGroup v-model="icon" type="button" size="small">
<Radio :label="0">
<Icon type="ios-flame" />
</Radio>
<Radio :label="1">
<img src="/images/map/1.png" width="12" />
</Radio>
<Radio :label="2">
<img src="/images/map/2.png" width="12" />
</Radio>
<Radio :label="3">
<img src="/images/map/3.png" width="12" />
</Radio>
<Radio :label="4">
<Icon type="md-flame" />
</Radio>
</RadioGroup>
<ColorPicker v-model="color" recommend />
<Button @click="addLine" type="primary">划线</Button>
<Button @click="clear" type="warning">清空</Button>
<Button @click="save" type="success">保存</Button>
<Button @click="draw" type="success">重绘</Button>
</div>
<baidu-map
class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center"
:center="{lng:103.546,lat:36.2909}"
:zoom="zoom"
:maxZoom="7"
@ready="handler"
:mapStyle="my"
@click="hi"
>
<!--比例尺控件-->
......@@ -126,6 +110,8 @@ export default {
},
data() {
return {
icon: 0,
color: "#000",
center: { lng: 0, lat: 0 },
marker: {
name: "北京",
......@@ -238,6 +224,106 @@ export default {
],
},
},
points: [],
lines: [],
lids: [],
plat: {
markers: [
{ lng: 115.467616, lat: 39.639978, color: 3 },
{ lng: 113.223145, lat: 37.502619, color: 3 },
{ lng: 112.855199, lat: 35.362032, color: 3 },
{ lng: 109.911632, lat: 33.533201, color: 3 },
{ lng: 107.299216, lat: 31.821696, color: 3 },
{ lng: 103.104632, lat: 30.556405, color: 3 },
{ lng: 112.266486, lat: 33.779374, color: 1 },
{ lng: 122.495383, lat: 42.152382, color: 2 },
{ lng: 115.945945, lat: 40.262994, color: 2 },
{ lng: 113.075967, lat: 34.908621, color: 2 },
{ lng: 117.712086, lat: 31.632994, color: 2 },
{ lng: 114.584545, lat: 30.333231, color: 2 },
{ lng: 112.119308, lat: 28.496996, color: 2 },
{ lng: 112.818405, lat: 23.613362, color: 2 },
{ lng: 110.169194, lat: 21.666574, color: 2 },
{ lng: 115.062875, lat: 38.115676, color: 1 },
{ lng: 112.524048, lat: 25.731484, color: 3 },
{ lng: 112.266486, lat: 37.911894, color: 3 },
{ lng: 109.102151, lat: 35.331884, color: 3 },
{ lng: 103.546167, lat: 36.290971, color: 3 },
{ lng: 102.994248, lat: 30.969496, color: 3 },
{ lng: 107.262421, lat: 30.01352, color: 3 },
{ lng: 107.188832, lat: 26.329873, color: 3 },
{ lng: 102.699892, lat: 25.096532, color: 3 },
{ lng: 104.650005, lat: 33.286319, color: 1 },
{ lng: 107.041654, lat: 23.511602, color: 1 },
{ lng: 100.197859, lat: 37.002584, color: 2 },
{ lng: 95.524946, lat: 33.594811, color: 2 },
{ lng: 91.95587, lat: 29.853272, color: 2 },
{ lng: 97.548648, lat: 28.00826, color: 2 },
{ lng: 100.381832, lat: 25.464548, color: 2 },
{ lng: 110.757908, lat: 26.95813, color: 2 },
{ lng: 116.313891, lat: 27.910241, color: 2 },
{ lng: 120.398091, lat: 29.435411, color: 2 },
{ lng: 95.340973, lat: 29.499811, color: 1 },
{ lng: 92.765351, lat: 32.010009, color: 1 },
],
lines: [
{
color: "#000000",
points: [
{ lng: 115.98274, lat: 39.583056 },
{ lng: 114.326983, lat: 37.473298 },
{ lng: 113.25994, lat: 35.060041 },
{ lng: 110.242783, lat: 33.069718 },
{ lng: 106.894475, lat: 31.001198 },
{ lng: 103.288605, lat: 30.205473 },
],
},
{
color: "#5D4037",
points: [
{ lng: 123.010507, lat: 41.657604 },
{ lng: 116.829016, lat: 40.065382 },
{ lng: 114.290189, lat: 38.318886 },
{ lng: 113.701475, lat: 34.999507 },
{ lng: 117.049783, lat: 32.010009 },
{ lng: 114.14301, lat: 30.874326 },
{ lng: 112.744816, lat: 28.626943 },
{ lng: 113.443913, lat: 23.681157 },
{ lng: 110.463551, lat: 21.494489 },
{ lng: 110.242783, lat: 19.588245 },
],
},
{
color: "#00C2B1",
points: [
{ lng: 117.417729, lat: 36.201554 },
{ lng: 112.524048, lat: 37.414621 },
{ lng: 109.359713, lat: 34.756918 },
{ lng: 104.282059, lat: 36.052296 },
{ lng: 103.877319, lat: 31.191186 },
{ lng: 106.268967, lat: 29.756998 },
{ lng: 106.784091, lat: 27.089948 },
{ lng: 103.178221, lat: 24.861755 },
{ lng: 107.740751, lat: 23.001614 },
],
},
{
color: "#00B5FF",
points: [
{ lng: 119.772583, lat: 30.045538 },
{ lng: 116.497864, lat: 28.496996 },
{ lng: 107.4096, lat: 26.66097 },
{ lng: 100.529011, lat: 25.931289 },
{ lng: 98.026978, lat: 28.724296 },
{ lng: 91.0728, lat: 29.628488 },
{ lng: 92.91253, lat: 31.664471 },
{ lng: 95.745713, lat: 33.069718 },
{ lng: 97.40147, lat: 34.604934 },
{ lng: 101.154519, lat: 36.736507 },
],
},
],
},
};
},
methods: {
......@@ -247,7 +333,81 @@ export default {
this.zoom = 6;
map.disableDoubleClickZoom();
this.map = map;
this.map.addEventListener("click", (p) => {
console.warn(p);
if (this.icon > 0) {
this.addIcon(p.point);
if (this.icon == 4) {
this.points.push(p.point);
} else {
p.point.color = this.icon;
this.lids.push(p.point);
}
}
});
window.map = map;
setTimeout(this.draw,1000)
},
draw() {
this.plat.markers.map((u) => {
this.addMarker(u);
});
this.plat.lines.map((line,i) => {
line.color=i%2==0?'#000':'#00C2B1';
this.addRailway(line);
});
},
addRailway(line) {
line.points.map((u) => {
this.addDot("#000", u);
});
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_RECTANGLE, {
scale: 0.6, //图标缩放大小
strokeColor: "#fff", //设置矢量图标的线填充颜色
strokeWeight: "2", //设置线宽
});
var icons = new BMap.IconSequence(sy, "10", "20");
let dots=[];
line.points.map(u=>{
dots.push(new BMap.Point(u.lng,u.lat));
})
var polyline = new BMap.Polyline(dots, {
enableEditing: false, //是否启用线编辑，默认为false
enableClicking: false, //是否响应点击事件，默认为true
icons: [icons],
strokeWeight: "4", //折线的宽度，以像素为单位
strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
strokeColor: line.color, //折线颜色
// strokeColor: '#333', //折线颜色
});
this.map.addOverlay(polyline);
},
addMarker(u) {
var myIcon = new BMap.Icon(
"/images/map/" + u.color + ".png",
new BMap.Size(17, 17)
);
var opt = {
title: `${u.lng}:${u.lat}`,
icon: myIcon,
};
var point=new BMap.Point(u.lng,u.lat)
var marker2 = new BMap.Marker(point, opt); // 创建标注
this.map.addOverlay(marker2); // 将标注添
},
addDot(color, u) {
var myIcon = new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
strokeWeight: 4,
strokeColor: color,
});
var opt = {
title: `${u.lng}:${u.lat}`,
icon: myIcon,
};
var point=new BMap.Point(u.lng,u.lat)
var marker2 = new BMap.Marker(point, opt); // 创建标注
this.map.addOverlay(marker2); // 将标注添
},
show() {
this.eye = !this.eye;
......@@ -257,6 +417,70 @@ export default {
}
this.markers = ps;
},
clear() {
this.map.clearOverlays();
},
addIcon(point) {
var myIcon = new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
strokeWeight: 4,
strokeColor: this.color,
});
var opt = {
title: `${point.lng}:${point.lat}`,
};
if (this.icon != 4) {
myIcon = new BMap.Icon(
"/images/map/" + this.icon + ".png",
new BMap.Size(17, 17)
);
}
opt.icon = myIcon;
// var marker2 = new BMap.Marker(pt, { icon: myIcon,offset:{width:0,height:-20},title:`${pt.lng}:${pt.lat}` }); // 创建标注
var marker2 = new BMap.Marker(point, opt); // 创建标注
// marker2.addEventListener('click',p=>{
// // console.warn(p)
// alert("西安："+p.point.lng+":"+p.point.lat)
// })
this.map.addOverlay(marker2); // 将标注添
},
addLine() {
if (this.points.length < 2) return;
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 0.6, //图标缩放大小
strokeColor: "#fff", //设置矢量图标的线填充颜色
strokeWeight: "2", //设置线宽
});
var icons = new BMap.IconSequence(sy, "10", "30");
// var polyline = new BMap.Polyline(this.points, {
var polyline = new BMap.Polyline(this.points, {
enableEditing: false, //是否启用线编辑，默认为false
enableClicking: false, //是否响应点击事件，默认为true
icons: [icons],
strokeWeight: "4", //折线的宽度，以像素为单位
strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
// strokeColor: "#18a45b", //折线颜色
// strokeColor: "#333", //折线颜色
strokeColor: this.color, //折线颜色
});
this.map.addOverlay(polyline);
// polyline.enableEditing();
var line = {
color: this.color,
points: this.points,
};
this.lines.push(line);
this.points = [];
},
save() {
console.info("line,markers", this.markers, this.lines);
var json = {
markers: this.lids,
lines: this.lines,
};
console.warn("txt", JSON.stringify(json));
this.plat = json;
},
infoWindowOpen(e) {
this.infoWindow.show = true;
},
......@@ -285,6 +509,15 @@ export default {
left: 0;
right: 0;
height: calc(100vh - 100px);
.tools {
position: absolute;
width: 40%;
text-align: center;
left: 50%;
top: 0;
transform: translate(-50%, 0);
z-index: -8;
}
.ad {
position: absolute;
width: 100%;
......@@ -387,16 +620,15 @@ export default {
position: absolute;
width: 300px;
top: 40px;
left:30px;
left: 30px;
text-align: center;
z-index: 4;
}
.sideEast
{
.sideEast {
position: absolute;
width: 328px;
top: 40px;
right:30px;
right: 30px;
text-align: center;
z-index: 4;
}
......@@ -454,21 +686,24 @@ export default {
// padding: 0 0 20px 0;
// border: 1px solid #000;
border-radius: 8px;
background: #1e4b78;
// background: #1e4b78;
background: white;
h3 {
line-height: 50px;
background: #266099;
line-height: 38px;
// background: #266099;//#2680EB
background: #2680eb; //
border-radius: 8px 8px 0 0;
padding-left: 20px;
a {
color: black;
color: white;
}
a:hover {
color: white;
color: #ddd;
}
}
.content {
padding: 5px 15px;
color: black;
li {
line-height: 30px;
font-size: 12px;
......
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