<template>
|
<div id="map"
|
style="height: 100%">
|
<div class="base-map-tab"
|
@click="mapOptionFlag = !mapOptionFlag">
|
<button type="button"
|
title="底图管理">
|
<img src="../../assets/Map.png"
|
alt="" />
|
</button>
|
</div>
|
|
<div class="base-map-options"
|
v-show="mapOptionFlag">
|
<div class="base-map-type">底图</div>
|
<div class="map-options-select">
|
<div v-for="(item, index) in mapOptions"
|
:key="index"
|
@click="mapTab(item.type)">
|
<img :src="item.src" />
|
<div>{{ item.label }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import axios from 'axios'
|
import store from '@/store/' // 全局状态
|
import yxPng from '../../assets/yx.jpg'
|
import slPng from '../../assets/sl.png'
|
import fzJson from '@/geojson/fz.json'
|
import { Style, Stroke, Text, Fill } from 'ol/style.js'
|
import { Feature } from 'ol'
|
import { Polygon } from 'ol/geom'
|
import LineString from 'ol/geom/LineString.js'
|
import Point from 'ol/geom/Point.js'
|
import VectorLayer from 'ol/layer/Vector'
|
import VectorSource from 'ol/source/Vector'
|
export default {
|
name: 'Map',
|
data () {
|
return {
|
map2D: store.state.openlayers.map2D,
|
shadow: store.state.layeredImage.shadow,
|
vector: store.state.layeredImage.vector,
|
waterAllLayer: store.state.openlayers.waterAllLayer,
|
defaultImage: store.state.layeredImage.defaultImage,
|
mapType: 'vector',
|
mapText: '天地图影像',
|
mapPng: yxPng,
|
mapOptionFlag: false,
|
mapOptions: [
|
{
|
src: slPng,
|
label: '天地图矢量',
|
type: 'vector'
|
},
|
{
|
src: yxPng,
|
label: '天地图影像',
|
type: 'shadow'
|
}
|
]
|
}
|
},
|
mounted () {
|
this.map2D.setTarget('map')
|
// this.map2D.addLayer(this.defaultImage[0])
|
// this.map2D.addLayer(this.defaultImage[1])
|
this.map2D.addLayer(this.vector[0])
|
this.map2D.addLayer(this.waterAllLayer)
|
|
// this.map2D.addLayer(this.shadow[1])
|
this.getGeoJson()
|
|
this.$store.commit('setOrgetMapScene')
|
// this.$store.commit('setOrgetMapScene
|
},
|
methods: {
|
resize () {
|
setTimeout(() => {
|
this.map2D.updateSize()
|
}, 10)
|
},
|
mapTab (type) {
|
if (this.mapType == type) return
|
this.map2D.removeLayer(this[this.mapType][0])
|
// this.map2D.removeLayer(this[this.mapType][1])
|
this.map2D.addLayer(this[type][0])
|
// this.map2D.addLayer(this[type][1])
|
this.mapType = type
|
this.mapOptionFlag = false
|
},
|
getGeoJson () {
|
var that = this
|
|
fzJson.features.forEach((item, index) => {
|
// var arr = item.geometry.coordinates
|
|
// var polygonFeature = new Feature({
|
// type: 'polygon',
|
// geometry: new Polygon(arr[0])
|
// })
|
|
// polygonFeature.setStyle(new Style({
|
// stroke: new Stroke({
|
// width: 2,
|
|
// color: '#A7ABB3'
|
|
// // lineDash: [2, 10, 4, 18]
|
// })
|
// }))
|
|
// var geoJsonLayer = new VectorLayer({
|
// zIndex: 15,
|
// source: new VectorSource({
|
// features: [polygonFeature]
|
// })
|
// })
|
|
var textFeature = new Feature({
|
geometry: new Point(item.properties.center)
|
})
|
|
textFeature.setStyle(new Style({
|
text: new Text({
|
textAlign: 'center',
|
text: item.properties.name,
|
font: 'normal 16px SimHei'
|
})
|
}))
|
|
var textLayer = new VectorLayer({
|
zIndex: 15,
|
source: new VectorSource({
|
features: [textFeature]
|
})
|
})
|
|
// that.map2D.addLayer(geoJsonLayer)
|
that.map2D.addLayer(textLayer)
|
})
|
|
// sjJson.features.forEach((item, index) => {
|
// var arr = item.geometry.coordinates
|
|
// var polygonFeature = new Feature({
|
// type: 'polygon',
|
// geometry: new Polygon(arr[0])
|
// })
|
|
// polygonFeature.setStyle(new Style({
|
// fill: new Fill({
|
// color: 'green'
|
// }),
|
// stroke: new Stroke({
|
// width: 4,
|
|
// color: '#0AB9F2'
|
|
// // lineDash: [2, 8, 4, 8]
|
// })
|
// }))
|
|
// var geoJsonLayer = new VectorLayer({
|
// zIndex: 12,
|
// source: new VectorSource({
|
// features: [polygonFeature]
|
// })
|
// })
|
|
// that.map2D.addLayer(geoJsonLayer)
|
// })
|
},
|
|
addPolyline (data) {
|
data.geometry.paths.forEach(item => {
|
var polygonFeature = new Feature({
|
geometry: new LineString(item),
|
dataReal: data.attributes
|
})
|
|
polygonFeature.setStyle(new Style({
|
// 填充色
|
fill: new Fill({
|
color: '#0EB0E8'
|
}),
|
// 边线颜色
|
stroke: new Stroke({
|
color: '#0EB0E8',
|
width: 5
|
})
|
}))
|
|
this.riversLayer.getSource().addFeature(polygonFeature)
|
})
|
|
this.riversLayer.setVisible(true)
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scope>
|
#map {
|
.base-map-tab {
|
padding: 0;
|
border-radius: 5px;
|
position: absolute;
|
right: 10px;
|
top: 130px;
|
background-color: rgba(255, 255, 255, 0.4);
|
|
pointer-events: auto;
|
user-select: none;
|
z-index: 98;
|
cursor: pointer;
|
button {
|
position: relative;
|
display: block;
|
margin: 1px;
|
padding: 0;
|
width: 30px;
|
height: 30px;
|
background: #fff;
|
color: #666;
|
|
box-shadow: 0px 0px 4px 1px #ccc;
|
border-radius: 5px;
|
border: none;
|
cursor: pointer;
|
|
img {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
.base-map-tab button:focus {
|
outline: none;
|
}
|
.base-map-options {
|
padding: 6px;
|
position: absolute;
|
top: 3em;
|
right: 3em;
|
z-index: 98;
|
max-height: 811px;
|
max-width: 320px;
|
width: auto;
|
overflow: auto;
|
color: #677788;
|
border-radius: 10px;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 0px 4px 1px #ccc;
|
|
.base-map-type {
|
display: block;
|
font-size: 16px;
|
text-align: left;
|
margin-bottom: 4px;
|
}
|
.map-options-select {
|
display: block;
|
border: 1px dashed #677788;
|
border-radius: 5px;
|
padding: 5px 0;
|
& > div {
|
display: inline-block;
|
vertical-align: top;
|
margin: 2px 5px;
|
width: 64px;
|
text-align: center;
|
cursor: pointer;
|
&:hover {
|
img {
|
box-shadow: 0 0 8px #fff, 0 0 8px #677788;
|
}
|
}
|
img {
|
display: inline-block;
|
position: relative;
|
width: inherit;
|
height: auto;
|
background-size: 100% 100%;
|
margin: 0;
|
padding: 0;
|
cursor: pointer;
|
box-sizing: border-box;
|
border-radius: 9px;
|
border: double 4px #677788;
|
}
|
|
div {
|
display: block;
|
font-size: 8px;
|
text-align: center;
|
cursor: pointer;
|
word-wrap: break-word;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
