Skip to content

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

地图更改完成

parent 30bdd2ea
Hide 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 @@ ...@@ -28,7 +28,7 @@
<Icon :type="eye?'md-eye':'md-eye-off'" size="36" /> <Icon :type="eye?'md-eye':'md-eye-off'" size="36" />
</a> </a>
</div> </div>
<div class="lab"> <!-- <div class="lab">
<p>图例</p> <p>图例</p>
<div class="item"> <div class="item">
<div class="block" v-width="60"></div> <div class="block" v-width="60"></div>
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<div class="block line" v-width="60"></div> <div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div> <div class="info fg">规划中或在建动车所</div>
</div> </div>
</div> </div>-->
<baidu-map <baidu-map
class="map" class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc" ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
:zoom="zoom" :zoom="zoom"
:maxZoom="7" :maxZoom="7"
@ready="handler" @ready="handler"
:mapStyle="my" :vmapStyle="my"
@click="hi" @click="hi"
> >
<!--比例尺控件--> <!--比例尺控件-->
...@@ -60,13 +60,17 @@ ...@@ -60,13 +60,17 @@
<!--聚合动态添加的点坐标--> <!--聚合动态添加的点坐标-->
<bm-marker-clusterer :averageCenter="true"> <bm-marker-clusterer :averageCenter="true">
<bm-marker <bm-marker
v-for="marker of markers" v-for="(marker ,i) in markers"
:key="marker.code" :key="marker.code"
:position="{lng: marker.lng, lat: marker.lat}" :position="{lng: marker.lng, lat: marker.lat}"
@click="lookDetail(marker)" @click="lookDetail(marker)"
:icon="{url: '/images/map/train/'+(i%3+1)+'.png', size: {width: 32, height: 32}}"
:width="19"
:height="23"
color="green" color="green"
></bm-marker> ></bm-marker>
</bm-marker-clusterer> </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-marker :position="marker" :dragging="true" @click="lookDetail(marker)"></bm-marker>
<bm-map-type <bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
...@@ -108,7 +112,7 @@ import BmNavigation from "vue-baidu-map/components/controls/Navigation"; ...@@ -108,7 +112,7 @@ import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer"; import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker"; import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import citys from "./city" import citys from "./city";
export default { export default {
components: { components: {
BaiduMap, BaiduMap,
...@@ -116,7 +120,7 @@ export default { ...@@ -116,7 +120,7 @@ export default {
BmNavigation, BmNavigation,
BmMarkerClusterer, BmMarkerClusterer,
BmMarker, BmMarker,
BmInfoWindow BmInfoWindow,
}, },
data() { data() {
return { return {
...@@ -130,91 +134,189 @@ export default { ...@@ -130,91 +134,189 @@ export default {
{ car: "CRH381A", count: 9 }, { car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 }, { car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 }, { car: "CRH384A", count: 19 },
{ car: "CRH388A", count: 24 } { car: "CRH388A", count: 24 },
] ],
}, },
zoom: 1, zoom: 1,
eye: false, eye: false,
map: null, map: null,
infoBox: null, infoBox: null,
icon: null,
my: { my: {
styleJson: [ styleJson: [
{ {
featureType: "land", featureType: "land",
elementType: "geometry", elementType: "geometry",
stylers: { stylers: {
color: "#033361ff" color: "#033361ff",
} },
}, },
{ {
featureType: "tertiaryway", featureType: "tertiaryway",
elementType: "geometry", elementType: "geometry",
stylers: { stylers: {
visibility: "off" visibility: "off",
} },
}, },
{ {
featureType: "arterial", featureType: "arterial",
elementType: "geometry", elementType: "geometry",
stylers: { stylers: {
visibility: "off" visibility: "off",
} },
}, },
{ {
featureType: "cityhighway", featureType: "cityhighway",
elementType: "geometry", elementType: "geometry",
stylers: { stylers: {
visibility: "off" visibility: "off",
} },
}, },
{ {
featureType: "water", featureType: "water",
elementType: "geometry", elementType: "geometry",
stylers: { stylers: {
color: "#4a90e2ff" color: "#4a90e2ff",
} },
}, },
{ {
featureType: "districtlabel", featureType: "districtlabel",
elementType: "labels", elementType: "labels",
stylers: { stylers: {
visibility: "on" visibility: "on",
} },
}, },
{ {
featureType: "districtlabel", featureType: "districtlabel",
elementType: "labels.icon", elementType: "labels.icon",
stylers: { stylers: {
visibility: "on" visibility: "on",
} },
}, },
{ {
featureType: "districtlabel", featureType: "districtlabel",
elementType: "labels.text.stroke", elementType: "labels.text.stroke",
stylers: { stylers: {
weight: 0, weight: 0,
color: "#ffffff00" color: "#ffffff00",
} },
}, },
{ {
featureType: "districtlabel", featureType: "districtlabel",
elementType: "labels.text.fill", elementType: "labels.text.fill",
stylers: { stylers: {
color: "#4a90e2ff", color: "#4a90e2ff",
weight: 10 weight: 10,
} },
}, },
{ {
featureType: "road", featureType: "road",
elementType: "geometry", elementType: "geometry",
stylers: { stylers: {
visibility: "off" visibility: "off",
} },
} },
] ],
}, },
map: null, map: null,
markers: [], 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: { infoWindow: {
lng: 0, lng: 0,
lat: 0, lat: 0,
...@@ -228,12 +330,15 @@ export default { ...@@ -228,12 +330,15 @@ export default {
{ car: "CRH381A", count: 9 }, { car: "CRH381A", count: 9 },
{ car: "CRH382A", count: 13 }, { car: "CRH382A", count: 13 },
{ car: "CRH384A", count: 19 }, { 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: { methods: {
handler({ BMap, map }) { handler({ BMap, map }) {
console.log(BMap, map); console.log(BMap, map);
...@@ -242,18 +347,65 @@ export default { ...@@ -242,18 +347,65 @@ export default {
map.disableDoubleClickZoom(); map.disableDoubleClickZoom();
this.map = map; this.map = map;
window.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() { show() {
this.eye = !this.eye; this.eye = !this.eye;
let ps = []; let ps = [];
if (this.eye) { if (this.eye) {
ps = citys;
ps=citys;
} }
this.markers = ps; this.markers = ps;
console.warn(JSON.stringify(ps)) console.warn(JSON.stringify(ps));
}, },
infoWindowOpen(e) { infoWindowOpen(e) {
this.infoWindow.show = true; this.infoWindow.show = true;
...@@ -269,13 +421,13 @@ export default { ...@@ -269,13 +421,13 @@ export default {
// console.log('data',data) // console.log('data',data)
this.infoWindow.show = true; this.infoWindow.show = true;
this.infoWindow.info = data; this.infoWindow.info = data;
} },
} },
}; };
</script> </script>
<style lang="less"> <style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8); @bgcolor: rgba(6, 119, 240, 0.8);
.bm-view { .bm-view {
position: fixed; position: fixed;
width: 100%; width: 100%;
...@@ -290,7 +442,7 @@ export default { ...@@ -290,7 +442,7 @@ export default {
text-align: center; text-align: center;
z-index: 3; z-index: 3;
height: 60px; height: 60px;
color: white; color: black;
.count { .count {
background: url("../../assets/images/demo/bg.png"); background: url("../../assets/images/demo/bg.png");
width: 205px; width: 205px;
...@@ -316,13 +468,13 @@ export default { ...@@ -316,13 +468,13 @@ export default {
.legend { .legend {
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 240px; height: 220px;
background: url("../../assets/images/demo/legend.png") no-repeat center background: url("../../assets/images/demo/legend.png") no-repeat center
rgba(0, 38, 77, 0.8); rgba(53, 145, 236, 0.5);
bottom: 20px; bottom: 20px;
left: 10px; left: 10px;
z-index: 2; z-index: 2;
border: 1px solid rgba(0, 38, 77, 1); border: 1px solid rgb(34, 139, 245);
} }
.eye { .eye {
position: absolute; position: absolute;
...@@ -334,48 +486,50 @@ export default { ...@@ -334,48 +486,50 @@ export default {
right: 20px; right: 20px;
top: 20px; top: 20px;
background: #00264d; background: #067bf0;
border-radius: 8px; border-radius: 8px;
z-index: 10; z-index: 10;
a { a {
color: #ddd; color: white;
} }
a:hover { a:hover {
color: white; color: #ddd;
} }
} }
.lab { .lab {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
width: 260px; width: 220px;
bottom: 20px; bottom: 20px;
background: @bgcolor; background: rgba(32, 145, 223, 0.2);
border: 1px solid black; border: 1px solid rgba(32, 145, 223, 1);
right: 100px; right: 100px;
color: white; color: black;
padding: 10px 10px 0 10px; padding: 10px 10px 0 10px;
>p{ > p {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
} }
.item { .item {
.block { .block {
height: 40px; height: 40px;
width: 60px; width: 60px;
border: 1px solid #ddd; border: 1px solid black;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.dot{ .dot {
border: 1px dotted #ddd; border: 1px dotted black;
} }
.line{ .line {
border: 1px dashed #ddd; border: 1px dashed black;
} }
.info { .info {
padding-left: 20px; padding-left: 20px;
flex-grow: 1; flex-grow: 1;
font-size: 120x;
font-weight: normal;
} }
height: 60px; height: 60px;
} }
...@@ -439,7 +593,7 @@ export default { ...@@ -439,7 +593,7 @@ export default {
h3 { h3 {
line-height: 38px; line-height: 38px;
// background: #266099;//#2680EB // background: #266099;//#2680EB
background:#2680EB;// background: #2680eb; //
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
padding-left: 20px; padding-left: 20px;
a { a {
......
pages/demo/lid/3.vue
View file @ 4f9a288a
<template> <template>
<div class="bm-lid"> <div class="bm-lid3">
<div class="ad"> <div class="ad">
<FormRow></FormRow> <FormRow></FormRow>
<!-- <div class="count"> <!-- <div class="count">
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<div class="menu"> <div class="menu">
<Menu></Menu> <Menu></Menu>
</div> </div>
<div class="legend"></div> <!-- <div class="legend"></div>
<div class="lab"> <div class="lab">
<p>图例</p> <p>图例</p>
<div class="item"> <div class="item">
...@@ -41,16 +41,15 @@ ...@@ -41,16 +41,15 @@
<div class="block line" v-width="60"></div> <div class="block line" v-width="60"></div>
<div class="info fg">规划中或在建动车所</div> <div class="info fg">规划中或在建动车所</div>
</div> </div>
</div> </div>-->
<baidu-map <baidu-map
class="map" class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc" ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center" :center="{lng:103.546,lat:36.2909}"
:zoom="zoom" :zoom="zoom"
:maxZoom="7" :maxZoom="7"
@ready="handler" @ready="handler"
:mapStyle="my" :vmapStyle="my"
@click="hi"
> >
<!--比例尺控件--> <!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
...@@ -96,6 +95,19 @@ ...@@ -96,6 +95,19 @@
</div> </div>
</bm-info-window> </bm-info-window>
</baidu-map> </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> </div>
</template> </template>
...@@ -124,6 +136,8 @@ export default { ...@@ -124,6 +136,8 @@ export default {
data() { data() {
return { return {
center: { lng: 0, lat: 0 }, center: { lng: 0, lat: 0 },
dot:null,
lidModal: false,
marker: { marker: {
name: "北京", name: "北京",
lng: 116.28, lng: 116.28,
...@@ -146,7 +160,8 @@ export default { ...@@ -146,7 +160,8 @@ export default {
featureType: "land", featureType: "land",
elementType: "geometry", elementType: "geometry",
stylers: { stylers: {
color: "#033361ff", // color: "#033361ff",
color: "#f8f3e0ff",
}, },
}, },
{ {
...@@ -235,6 +250,103 @@ export default { ...@@ -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: { methods: {
...@@ -245,6 +357,75 @@ export default { ...@@ -245,6 +357,75 @@ export default {
map.disableDoubleClickZoom(); map.disableDoubleClickZoom();
this.map = map; this.map = map;
window.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() { show() {
this.eye = !this.eye; this.eye = !this.eye;
...@@ -275,13 +456,16 @@ export default { ...@@ -275,13 +456,16 @@ export default {
<style lang="less"> <style lang="less">
@bgcolor: rgba(0, 38, 77, 0.8); @bgcolor: rgba(0, 38, 77, 0.8);
.bm-lid { .bm-lid3 {
position: fixed; position: absolute;
width: 100%; width: 100%;
top: 100px; top: 100px;
left: 0; left: 0;
right: 0; right: 0;
height: calc(100vh - 100px); height: calc(100vh - 100px);
.ivu-drawer-header{
background: #f5f6fa;
}
.ad { .ad {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -291,48 +475,30 @@ export default { ...@@ -291,48 +475,30 @@ export default {
height: 60px; height: 60px;
text-align: center; text-align: center;
z-index: 3; z-index: 3;
// height: 60px;
// padding: 0 150px;
// line-height: 60px;
.form-row { .form-row {
margin: 10px auto; margin: 10px auto;
width: 80%; width: 60%;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ddd;
background: white; background: white;
padding: 20px 40px 0 40px; padding: 10px 40px;
.ivu-form-item {
margin-bottom: 0;
}
} }
// 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;
// }
// }
} }
.menu { .menu {
position: absolute; position: absolute;
width: 240px; width: 240px;
height: 700px; top:80px;
background: white; background: white;
border-radius: 5px; border-radius: 8px;
bottom: 15px; bottom: 15px;
left: 20px; left: 20px;
z-index: 4; z-index: 4;
border: 1px solid #ddd;
padding-top: 15px;
} }
.legend { .legend {
position: absolute; position: absolute;
...@@ -455,21 +621,24 @@ export default { ...@@ -455,21 +621,24 @@ export default {
// padding: 0 0 20px 0; // padding: 0 0 20px 0;
// border: 1px solid #000; // border: 1px solid #000;
border-radius: 8px; border-radius: 8px;
background: #1e4b78; // background: #1e4b78;
background: white;
h3 { h3 {
line-height: 50px; line-height: 38px;
background: #266099; // background: #266099;//#2680EB
background: #2680eb; //
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
padding-left: 20px; padding-left: 20px;
a { a {
color: black; color: white;
} }
a:hover { a:hover {
color: white; color: #ddd;
} }
} }
.content { .content {
padding: 5px 15px; padding: 5px 15px;
color: black;
li { li {
line-height: 30px; line-height: 30px;
font-size: 12px; font-size: 12px;
......
pages/demo/lid/components/sideEast.vue
View file @ 4f9a288a
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
</Card> </Card>
<div class="mt30 treeDiv"> <div class="mt30 treeDiv">
<Tree :data="data1"></Tree> <Tree :data="data1" @on-select-change="gopage()"></Tree>
</div> </div>
</div> </div>
</template> </template>
...@@ -71,7 +71,17 @@ export default { ...@@ -71,7 +71,17 @@ export default {
], ],
}; };
}, },
methods: {}, methods: {
gopage(){
this.$router.push({
path:"/demo/lid/3",
params:{
count:1,
num:0
}
})
}
},
mounted() {}, mounted() {},
}; };
</script> </script>
......
pages/demo/lid/components/sideWest.vue
View file @ 4f9a288a
<template> <template>
<div> <div class="ads">
<div class="gradient" > <div class="gradient" @click="gopage(1)">
<p>井盖总数</p> <p>井盖总数</p>
<p><span class="f20 fwBold">1234</span>个</p> <p>
<span class="f20 fwBold">1234</span>个
</p>
</div> </div>
<div class="mt30 gradient1" > <div class="mt30 gradient1" @click="gopage(2)">
<p>正常数量</p> <p>正常数量</p>
<p><span class="f20 fwBold">1204</span>个</p> <p>
<span class="f20 fwBold">1204</span>个
</p>
</div> </div>
<div class="mt30 gradient2" > <div class="mt30 gradient2" @click="gopage(3)">
<p>报警数量</p> <p>报警数量</p>
<p><span class="f20 fwBold">30</span>个</p> <p>
<span class="f20 fwBold">30</span>个
</p>
</div> </div>
<div class="mt30 demoDiv"> <div class="mt30 demoDiv">
<Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000"> <Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
<p slot="title" class="tl">实时行车异常列车</p> <p slot="title" class="tl">实时行车异常列车</p>
<div class="divInfo"> <div class="divInfo">
<p>地址：山西省西安市未央区</p> <p>地址：山西省西安市未央区</p>
<p>设备名称：凤城五路11号井盖</p> <p>设备名称：凤城五路11号井盖</p>
<p>报警时间：2020-06-06 08:08:08</p> <p>报警时间：2020-06-06 08:08:08</p>
<p class="red">报警数值：甲烷浓度-55%</p> <p class="red">报警数值：甲烷浓度-55%</p>
</div> </div>
<divider></divider> <divider></divider>
<div class="mt20 divInfo"> <div class="mt20 divInfo">
<p>地址：山西省西安市未央区</p> <p>地址：山西省西安市未央区</p>
<p>设备名称：凤城五路11号井盖</p> <p>设备名称：凤城五路11号井盖</p>
<p>报警时间：2020-06-06 08:08:08</p> <p>报警时间：2020-06-06 08:18:28</p>
<p class="red">报警数值：甲烷浓度-55%</p> <p class="red">报警数值：井盖移位</p>
</div> </div>
</Card> </Card>
</div> </div>
</div> </div>
</template> </template>
...@@ -38,89 +44,104 @@ export default { ...@@ -38,89 +44,104 @@ export default {
data() { data() {
return {}; return {};
}, },
methods: {}, methods: {
gopage(n) {
this.$router.push({
path: "/demo/lid/3",
params: {
count: 10,
num: n,
},
});
},
},
mounted() {}, mounted() {},
}; };
</script> </script>
<style scoped> <style lang="less">
.gradient { .ads {
background: url(/imgshow/bg1.png) right top no-repeat, >div{
-moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%); cursor: pointer;
background: -webkit-gradient( }
linear, .gradient {
left top, background: url(/imgshow/bg1.png) right top no-repeat,
left bottom, -moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%);
color-stop(0%, #43aaf9), background: -webkit-gradient(
color-stop(100%, #917dfb) linear,
); left top,
background: -webkit-linear-gradient(top, #43aaf9 0%, #917dfb 100%); left bottom,
background: -o-linear-gradient(top, #43aaf9 0%, #917dfb 100%); color-stop(0%, #43aaf9),
background: -ms-linear-gradient(top, #43aaf9 0%, #917dfb 100%); color-stop(100%, #917dfb)
background: url(/imgshow/bg1.png) right top no-repeat, );
linear-gradient(to right, #43aaf9 0%, #917dfb 100%); background: -webkit-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
border-radius: 5px; background: -o-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
box-shadow: 0 0 10px #000; background: -ms-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
color: white; background: url(/imgshow/bg1.png) right top no-repeat,
height: 100px; linear-gradient(to right, #43aaf9 0%, #917dfb 100%);
width: 300px; border-radius: 5px;
text-align: left; box-shadow: 0 0 10px #000;
padding:20px ; color: white;
} height: 100px;
.gradient1 { width: 300px;
background: url(/imgshow/bg3.png) right top no-repeat, text-align: left;
-moz-linear-gradient(left, #05E99C 0%, #7CF538 100%); padding: 20px;
background: -webkit-gradient( }
linear, .gradient1 {
left top, background: url(/imgshow/bg3.png) right top no-repeat,
left bottom, -moz-linear-gradient(left, #05e99c 0%, #7cf538 100%);
color-stop(0%, #05E99C), background: -webkit-gradient(
color-stop(100%, #7CF538) linear,
); left top,
background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%); left bottom,
background: -o-linear-gradient(top, #05E99C 0%, #7CF538 100%); color-stop(0%, #05e99c),
background: -ms-linear-gradient(top, #05E99C 0%, #7CF538 100%); color-stop(100%, #7cf538)
background: url(/imgshow/bg3.png) right top no-repeat, );
linear-gradient(to right, #05E99C 0%, #7CF538 100%); background: -webkit-linear-gradient(top, #05e99c 0%, #7cf538 100%);
border-radius: 5px; background: -o-linear-gradient(top, #05e99c 0%, #7cf538 100%);
box-shadow: 0 0 10px #000; background: -ms-linear-gradient(top, #05e99c 0%, #7cf538 100%);
color: white; background: url(/imgshow/bg3.png) right top no-repeat,
height: 100px; linear-gradient(to right, #05e99c 0%, #7cf538 100%);
width: 300px; border-radius: 5px;
text-align: left; box-shadow: 0 0 10px #000;
padding:20px ; color: white;
} height: 100px;
.gradient2 { width: 300px;
background: url(/imgshow/bg5.png) right top no-repeat, text-align: left;
-moz-linear-gradient(left, #F95577 0%, #FCA534 100%); padding: 20px;
background: -webkit-gradient( }
linear, .gradient2 {
left top, background: url(/imgshow/bg5.png) right top no-repeat,
left bottom, -moz-linear-gradient(left, #f95577 0%, #fca534 100%);
color-stop(0%, #F95577), background: -webkit-gradient(
color-stop(100%, #FCA534) linear,
); left top,
background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%); left bottom,
background: -o-linear-gradient(top, #F95577 0%, #FCA534 100%); color-stop(0%, #f95577),
background: -ms-linear-gradient(top, #F95577 0%, #FCA534 100%); color-stop(100%, #fca534)
background: url(/imgshow/bg5.png) right top no-repeat, );
linear-gradient(to right, #F95577 0%, #FCA534 100%); background: -webkit-linear-gradient(top, #f95577 0%, #fca534 100%);
border-radius: 5px; background: -o-linear-gradient(top, #f95577 0%, #fca534 100%);
box-shadow: 0 0 10px #000; background: -ms-linear-gradient(top, #f95577 0%, #fca534 100%);
color: white; background: url(/imgshow/bg5.png) right top no-repeat,
height: 100px; linear-gradient(to right, #f95577 0%, #fca534 100%);
width: 300px; border-radius: 5px;
text-align: left; box-shadow: 0 0 10px #000;
padding:20px ; color: white;
} height: 100px;
.divInfo { width: 300px;
background: #fff; text-align: left;
padding: 0 20px; padding: 20px;
} }
.divInfo p { .divInfo {
text-align: left; background: #fff;
line-height: 26px; padding: 0 20px;
} }
.demoDiv .ivu-card-head { .divInfo p {
text-align: left;
line-height: 26px;
}
.demoDiv .ivu-card-head {
background: #dedde4; background: #dedde4;
}
} }
</style> </style>
\ No newline at end of file
pages/demo/lid/formRow.vue
View file @ 4f9a288a
...@@ -76,6 +76,6 @@ export default { ...@@ -76,6 +76,6 @@ export default {
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
</style> </style>
pages/demo/lid/index.vue
View file @ 4f9a288a
<template> <template>
<div class="bm-lid"> <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"> <div class="sideWest">
<SideWest></SideWest> <SideWest></SideWest>
</div> </div>
<div class="sideEast"> <div class="sideEast">
<SideEast></SideEast> <SideEast></SideEast>
</div> </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 <baidu-map
class="map" class="map"
ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc" ak="NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc"
:center="center" :center="{lng:103.546,lat:36.2909}"
:zoom="zoom" :zoom="zoom"
:maxZoom="7" :maxZoom="7"
@ready="handler" @ready="handler"
:mapStyle="my"
@click="hi" @click="hi"
> >
<!--比例尺控件--> <!--比例尺控件-->
...@@ -126,6 +110,8 @@ export default { ...@@ -126,6 +110,8 @@ export default {
}, },
data() { data() {
return { return {
icon: 0,
color: "#000",
center: { lng: 0, lat: 0 }, center: { lng: 0, lat: 0 },
marker: { marker: {
name: "北京", name: "北京",
...@@ -238,6 +224,106 @@ export default { ...@@ -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: { methods: {
...@@ -247,7 +333,81 @@ export default { ...@@ -247,7 +333,81 @@ export default {
this.zoom = 6; this.zoom = 6;
map.disableDoubleClickZoom(); map.disableDoubleClickZoom();
this.map = map; 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; 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() { show() {
this.eye = !this.eye; this.eye = !this.eye;
...@@ -257,6 +417,70 @@ export default { ...@@ -257,6 +417,70 @@ export default {
} }
this.markers = ps; 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) { infoWindowOpen(e) {
this.infoWindow.show = true; this.infoWindow.show = true;
}, },
...@@ -285,6 +509,15 @@ export default { ...@@ -285,6 +509,15 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
height: calc(100vh - 100px); height: calc(100vh - 100px);
.tools {
position: absolute;
width: 40%;
text-align: center;
left: 50%;
top: 0;
transform: translate(-50%, 0);
z-index: -8;
}
.ad { .ad {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -361,7 +594,7 @@ export default { ...@@ -361,7 +594,7 @@ export default {
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
} }
.item { .item {
.block { .block {
height: 40px; height: 40px;
...@@ -384,22 +617,21 @@ export default { ...@@ -384,22 +617,21 @@ export default {
} }
} }
.sideWest { .sideWest {
position: absolute; position: absolute;
width: 300px; width: 300px;
top: 40px; top: 40px;
left:30px; left: 30px;
text-align: center; text-align: center;
z-index: 4; z-index: 4;
} }
.sideEast .sideEast {
{ position: absolute;
position: absolute; width: 328px;
width: 328px; top: 40px;
top: 40px; right: 30px;
right:30px; text-align: center;
text-align: center; z-index: 4;
z-index: 4; }
}
.map { .map {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -454,21 +686,24 @@ export default { ...@@ -454,21 +686,24 @@ export default {
// padding: 0 0 20px 0; // padding: 0 0 20px 0;
// border: 1px solid #000; // border: 1px solid #000;
border-radius: 8px; border-radius: 8px;
background: #1e4b78; // background: #1e4b78;
background: white;
h3 { h3 {
line-height: 50px; line-height: 38px;
background: #266099; // background: #266099;//#2680EB
background: #2680eb; //
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
padding-left: 20px; padding-left: 20px;
a { a {
color: black; color: white;
} }
a:hover { a:hover {
color: white; color: #ddd;
} }
} }
.content { .content {
padding: 5px 15px; padding: 5px 15px;
color: black;
li { li {
line-height: 30px; line-height: 30px;
font-size: 12px; 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