suzhou-jichuang-lanhai
/
RudongPC
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新地图

Browse Source
main
李劲龙 5 months ago
parent 8b1f5c3388
commit aa14705cc6
7 changed files with 112 additions and 20 deletions
Show Stats Download Patch File Download Diff File

8
src/assets/mapjson/Chaangshazhen/myxiuanlufeiji1.geojson
Unescape View File

@ -0,0 +1,8 @@
{
"type": "FeatureCollection",
"name": "road-line",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 1, "name": "线路1" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 121.165324006652625, 32.450238797041074 ], [ 121.165556312331091, 32.456975661716854 ], [ 121.166485535044998, 32.46440944342806 ], [ 121.171596259971452, 32.472307836496213 ], [ 121.187393046107758, 32.466500194534333 ], [ 121.21341128209697, 32.457440273073807 ], [ 121.23246034773193, 32.446289600507001 ], [ 121.257084749650289, 32.437926596081894 ], [ 121.276133815285249, 32.431654342763068 ] ] ] } }
]
}

101
src/views/Map/Map_Dikong/leftrightEcahts/index.vue
Unescape View File

@ -19,38 +19,76 @@
一号无人机
</div>
<div class="Echarts" ref="EchartsTop">
<el-steps :active="1" >
<!-- <el-steps :active="1">
<el-step v-for="(step, index) in steps" :key="index" :icon="step.icon">
<template #icon>
<img :src="step.image" alt="步骤图标" class="custom-icon" />
</template>
</el-step>
</el-steps>
</el-step>
</el-steps> -->
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="myxiuanlu.features[0].geometry.coordinates[0][0]" :zoom="zoom"
:zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
@click="JSONclick" />
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4" geodesic />
</el-amap>
</div>
<div class="rightleft-title">
二号无人机
</div>
<div class="Echarts" ref="EchartsTopTow">
<el-steps :active="2" >
<!-- <el-steps :active="2">
<el-step v-for="(step, index) in steps" :key="index" :icon="step.icon">
<template #icon>
<img :src="step.image" alt="步骤图标" class="custom-icon" />
</template>
</el-step>
</el-steps>
</el-steps> -->
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="roadline2.features[0].geometry.coordinates[0][0]" :zoom="zoom"
:zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
@click="JSONclick" />
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline2.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4" geodesic />
</el-amap>
</div>
<div class="rightleft-title">
三号无人机
</div>
<div class="Echarts" ref="EchartsTopTow">
<el-steps :active="3" >
<!-- <el-steps :active="3">
<el-step v-for="(step, index) in steps" :key="index" :icon="step.icon">
<template #icon>
<img :src="step.image" alt="步骤图标" class="custom-icon" />
</template>
</el-step>
</el-steps>
</el-steps> -->
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="roadline.features[0].geometry.coordinates[0][0]" :zoom="zoom"
:zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
@click="JSONclick" />
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4" geodesic />
</el-amap>
</div>
</div>
</div>
@ -59,6 +97,11 @@
</template>
<script>
import titleBox from '@/views/components/title/index.vue'
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import myxiuanlu from "@/assets/mapjson/Chaangshazhen/myxiuanlufeiji1.geojson"
import roadline from "@/assets/mapjson/Chaangshazhen/road-line.geojson"
import roadline2 from "@/assets/mapjson/Chaangshazhen/road-line2.geojson"
export default {
name: 'mapLeftContent',
components: { titleBox, },
@ -75,13 +118,50 @@ export default {
itemTwo: {
height: '',
},
changshazhen: changshazhen,
myxiuanlu: myxiuanlu,
roadline:roadline,
roadline2:roadline2,
polygonOptions: {
strokeColor: '#00C5EC',
fillColor: '#00AEFF'
},
zoom: 10,
zooms: [3, 20],
center: [121.298563, 32.451807],
map: null,
draggable: false,
visible: true,
}
},
methods: {
init(map) {
this.map = map;
// o.setMapStyle('amap://styles/darkblue')
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
console.log(this.map.getCenter())
console.log(this.$refs.map.$$getInstance())
},
click() {
alert('click map')
},
// 面图层样式
JSONclick: (e) => {
console.log('click event: ', e);
},
polylineclick(e, type) {
if (type == "线1") {
}
if (type == "线2") {
}
},
next() {
if (this.active < this.steps.length - 1) {
this.active++;
@ -120,15 +200,18 @@ export default {
padding: 0 20px;
margin: 30px 0;
width: 100%;
height: 120px;
}
}
}
.custom-icon{
.custom-icon {
width: 30px;
}
::v-deep .el-step__icon.is-text{
::v-deep .el-step__icon.is-text {
background: transparent;
border: none;
}

6
src/views/Map/Map_ZhongDahuodong/index.vue
Unescape View File

@ -13,10 +13,10 @@
<!-- 线 -->
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线1') }" />
lineCap="round" @click="(e) => { polylineclick(e, '线1') }" :strokeWeight="4"/>
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline2.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线2') }" />
:path="roadline2.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="green" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线2') }" :strokeWeight="4"/>
<!-- 人员 -->
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="index" :position="marker.position"
@click="(e) => { clickArrayMarker(marker, e) }">

3
src/views/Map/Map_Zhongdianrenyuan/index.vue
Unescape View File

@ -20,7 +20,7 @@
<!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="greenyellow" :zIndex="500"
:strokeDasharray="[10,10]" strokeStyle="dashed" />
:strokeDasharray="[10,10]" strokeStyle="dashed" :strokeWeight="4"/>
</div>
</el-amap-marker>
@ -31,6 +31,7 @@
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="red" :zIndex="500"
:strokeDasharray="[10,10]" strokeStyle="dashed"
:strokeWeight="4"
/>
</div>
</el-amap-marker>

4
src/views/Zhongdahuodong/quanzhendaolu/index.vue
Unescape View File

@ -40,12 +40,12 @@
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="red" isOutline lineCap="round"
@click="(e) => { polylineclick(e, '线') }" />
@click="(e) => { polylineclick(e, '线') }" :strokeWeight="4"/>
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline2.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="green" isOutline
lineCap="round" @click="(e) => { polylineclick(e, '线') }" />
lineCap="round" @click="(e) => { polylineclick(e, '线') }":strokeWeight="4" />
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">

2
src/views/components/MapWrenjidialog/index.vue
Unescape View File

@ -60,7 +60,7 @@
:extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-person">
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline1.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red"
isOutline lineCap="round" />
isOutline lineCap="round" :strokeWeight="4"/>
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions"
:draggable="true" />

2
src/views/components/Mapdialog/index.vue
Unescape View File

@ -75,7 +75,7 @@
:extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-person">
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline1.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red"
isOutline lineCap="round" />
isOutline lineCap="round" :strokeWeight="4"/>
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions"
:draggable="true" />

Write Preview
Loading…
Cancel
Save