You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
8.7 KiB
251 lines
8.7 KiB
<template>
|
|
<div class="Map_Zhongdianrenyuan_box">
|
|
<div class="Map_Zhongdianrenyuan_box_map" id="Map_Zhongdianrenyuan_box_map">
|
|
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="center" :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-geojson :geo="roadline1" :polygon-options="polygonOptions" :draggable="draggable"
|
|
@click="JSONclick2" />
|
|
|
|
<el-amap-geojson :geo="roadline2" :polygon-options="polygonOptions" :draggable="draggable"
|
|
@click="JSONclick3" /> -->
|
|
<!-- <el-amap-geojson :geo="roadpoint" :polygon-options="polygonOptions" :draggable="draggable" @click="JSONclick" />
|
|
<el-amap-geojson :geo="roadpoint2" :polygon-options="polygonOptions" :draggable="draggable"
|
|
@click="JSONclick" /> -->
|
|
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
|
|
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 2 || radio == 1">
|
|
<div class="markerStyles">
|
|
<!-- <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" />
|
|
</div>
|
|
</el-amap-marker>
|
|
|
|
<el-amap-marker v-for="(marker, index) in markers2" :title="marker.name" :key="marker.id + 5"
|
|
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 3 || radio == 1">
|
|
<div class="markerStyles">
|
|
<!-- <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="red" :zIndex="500"
|
|
:strokeDasharray="[10,10]" strokeStyle="dashed"
|
|
/>
|
|
</div>
|
|
</el-amap-marker>
|
|
</el-amap>
|
|
</div>
|
|
<!-- 图层展示 -->
|
|
<div>
|
|
<ZhanshiTubiao showType="重点人员" @markersradio="markersradio"></ZhanshiTubiao>
|
|
</div>
|
|
<leftrightEcahts></leftrightEcahts>
|
|
<righttEcahts></righttEcahts>
|
|
<Mapdialog ref="Mapdialog"></Mapdialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
|
// 线路
|
|
import roadline1 from "@/assets/mapjson/Chaangshazhen/road-line.geojson"
|
|
//
|
|
import roadline2 from "@/assets/mapjson/Chaangshazhen/road-line2.geojson"
|
|
// 点
|
|
import roadpoint from "@/assets/mapjson/Chaangshazhen/road-point.geojson"
|
|
// 点
|
|
import roadpoint2 from "@/assets/mapjson/Chaangshazhen/road-point2.geojson"
|
|
|
|
// 人员分布图标
|
|
import ZhanshiTubiao from "@/views/components/ZhanshiTubiao/index.vue"
|
|
import Mapdialog from "@/views/components/Mapdialog/index.vue"
|
|
|
|
// 左右两边图
|
|
import leftrightEcahts from "@/views/Map/Map_Zhongdianrenyuan/leftrightEcahts/index.vue"
|
|
import righttEcahts from "@/views/Map/Map_Zhongdianrenyuan/righttEcahts/index.vue"
|
|
|
|
export default {
|
|
name: "map-view",
|
|
components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, Mapdialog },
|
|
data() {
|
|
return {
|
|
zoom: 11.8,
|
|
zooms: [3, 20],
|
|
center: [121.298563, 32.451807],
|
|
map: null,
|
|
draggable: false,
|
|
visible: true,
|
|
changshazhen: changshazhen,
|
|
roadline1: roadline1,
|
|
roadline2: roadline2,
|
|
roadpoint: roadpoint,
|
|
roadpoint2: roadpoint2,
|
|
// 面图层样式
|
|
polygonOptions: {
|
|
strokeColor: '#00C5EC',
|
|
fillColor: '#00AEFF'
|
|
},
|
|
// 线图层样式
|
|
polyline: {
|
|
path: roadline1,
|
|
editable: false,
|
|
visible: true,
|
|
draggable: false
|
|
},
|
|
// 人员点
|
|
markers: [
|
|
{
|
|
position: [121.183697866903292, 32.460227941215508],
|
|
id: 1,
|
|
name: "本地重点人员",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren2.png"),
|
|
pathlist: [[121.183697866903292, 32.460227941215508],[121.173697866903292, 32.430227941215508],]
|
|
},
|
|
{
|
|
position: [121.235712627230569, 32.447218823220901],
|
|
id: 2,
|
|
name: "本地重点人员",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren2.png"),
|
|
pathlist: [[121.235712627230569, 32.447218823220901],[ 121.245712627230569, 32.427218823220901 ],]
|
|
},
|
|
{
|
|
position: [121.318413448767714, 32.411908360092688],
|
|
id: 3,
|
|
name: "本地重点人员",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren2.png")
|
|
,
|
|
pathlist: [[121.318413448767714, 32.411908360092688],[ 121.328413448767714, 32.421908360092688],]
|
|
},
|
|
{
|
|
position: [121.359751265879749, 32.38683020264299],
|
|
id: 4,
|
|
name: "本地重点人员",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren2.png")
|
|
,
|
|
pathlist: [[121.359751265879749, 32.38683020264299],[ 121.349751265879749, 32.36683020264299],]
|
|
},
|
|
],
|
|
markers2: [
|
|
{
|
|
position: [121.24012643512161, 32.392859294457729],
|
|
id: 1,
|
|
name: "外地重点人员",
|
|
content: '<i class="el-icon-user-solid waidi"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
|
|
pathlist: [[121.227349622803477, 32.389607014959076],[121.24012643512161, 32.392859294457729],]
|
|
},
|
|
{
|
|
position: [121.316090391982954, 32.406100718130809 ],
|
|
id: 2,
|
|
name: "外地重点人员",
|
|
content: '<i class="el-icon-user-solid waidi"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
|
|
pathlist: [[121.252903247437729, 32.397970019384182],[ 121.316090391982954, 32.406100718130809 ],]
|
|
},
|
|
{
|
|
position: [121.295647492277155, 32.404939189738435],
|
|
id: 3,
|
|
name: "外地重点人员",
|
|
content: '<i class="el-icon-user-solid waidi"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
|
|
pathlist: [[121.295647492277155, 32.404939189738435],[ 121.316090391982954, 32.426100718130809 ],]
|
|
},
|
|
{
|
|
position: [121.3418763222937, 32.418412919089988],
|
|
id: 4,
|
|
name: "外地重点人员",
|
|
content: '<i class="el-icon-user-solid waidi"></i>',
|
|
imgSrc: require("@/assets/images/icon/zhongdianren.png")
|
|
,
|
|
pathlist: [[121.3418763222937, 32.418412919089988],[ 121.326090391982954, 32.406100718130809 ],]
|
|
},
|
|
],
|
|
// 选项
|
|
radio: 1
|
|
|
|
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
},
|
|
unmounted() {
|
|
},
|
|
methods: {
|
|
getMap() {
|
|
// bmap vue component
|
|
console.log('$refs: ', this.$refs.map.$$getInstance())
|
|
},
|
|
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);
|
|
},
|
|
JSONclick2: (e) => {
|
|
console.log('click event2: ', e);
|
|
},
|
|
JSONclick3: (e) => {
|
|
console.log('click event3: ', e);
|
|
},
|
|
//mark点
|
|
clickArrayMarker(e) {
|
|
console.log(e);
|
|
this.$refs.Mapdialog.open("person")
|
|
|
|
},
|
|
// 切换人员
|
|
markersradio(type) {
|
|
console.log(type);
|
|
|
|
this.radio = type
|
|
}
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
.Map_Zhongdianrenyuan_box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
position: relative;
|
|
|
|
.Map_Zhongdianrenyuan_box_map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep {
|
|
.bendiren {
|
|
color: greenyellow;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.waidi {
|
|
color: goldenrod;
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
|
|
::v-deep .marker-Text {
|
|
width: 100px;
|
|
}
|
|
</style>
|