<template>
|
<div>
|
<div id='map' style="width: 100%;height: 83vh" @contextmenu.prevent=""></div>
|
<div v-if="!mapLocation.isDetail" style="position: absolute;right:1%;top:2%;z-index: 999999;background-color: white;width: 210px">
|
<div style="margin: 10px;width: 190px">
|
<el-form ref="form" :model="searchForm" label-width="80px" label-position="top" size="small" @submit.native.prevent>
|
<el-form-item label="请输入关键字：">
|
<!-- <el-input v-model="searchForm.key" @keyup.enter.native="search"></el-input>-->
|
<el-autocomplete
|
class="inline-input"
|
v-model="searchForm.key"
|
:fetch-suggestions="querySearch"
|
placeholder="请输入内容"
|
:trigger-on-focus="false"
|
@select="handleSelect"
|
></el-autocomplete>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div v-if="!mapLocation.isDetail" style="position: absolute;right:45%;top:2%;z-index: 999999;">
|
<el-button size="small" icon="el-icon-location-outline" circle @click="createPoint"></el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import 'ol/ol.css'
|
import {Map, View, Feature} from 'ol'
|
import VectorSource from 'ol/source/Vector'
|
import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer'
|
import Point from 'ol/geom/Point';
|
import Icon from 'ol/style/Icon';
|
import {Style, Fill as StyleFill, Stroke as StyleStroke, Text as StyleText, Circle as StyleCircle} from 'ol/style'
|
import Draw from 'ol/interaction/Draw'
|
import XYZ from "ol/source/XYZ";
|
import 'ol/ol.css'
|
|
export default {
|
name: 'OpenLayersMap',
|
props: ['mapLocation'],
|
data() {
|
return {
|
map: null,
|
points: [],
|
featurePoint:null,
|
// 线条点数组
|
linePoints: [],
|
// 多边形数组
|
polygonPoints: [],
|
draw: null,
|
drawLayer: null,
|
pointVector: null,
|
coordinates: [],// 保存绘画坐标地址 [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
|
toData: null,// 保存数据库格式坐标地址
|
searchForm:{},
|
searchData:[],
|
region:[],
|
}
|
},
|
methods: {
|
//地图初始化
|
createMap() {
|
let _this = this
|
|
_this.map = new Map({
|
target: 'map',
|
layers: [
|
new TileLayer({
|
source: new XYZ({
|
url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
|
})
|
}),
|
],
|
|
view: new View({
|
// 设置中心点，默认南昌
|
center: [115.9032747077233, 28.67433116990186],
|
projection: 'EPSG:4326',
|
// 设置缩放倍数
|
zoom: 13,
|
minZoom: 8,
|
maxZoom: 19
|
})
|
})
|
|
_this.pointVector = new VectorLayer({
|
//layer所对应的source
|
source: new VectorSource({
|
wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
|
}),
|
style: new Style({
|
image: new Icon({
|
src: "/img/dwicon.jpeg",
|
anchor: [0.48, 1],
|
// imgSize: [250,320],
|
scale: 0.13
|
}),
|
})
|
})
|
_this.map.addLayer(_this.pointVector)
|
|
if (this.mapLocation.isDetail){
|
this.addPoint(this.mapLocation.location)
|
}
|
|
},
|
//调用高德地图提供的地点搜索
|
search(keyWord,cb){
|
const that = this
|
//默认南昌
|
let cityCode = "36"
|
if (this.region){
|
cityCode = this.region[2]
|
}
|
AMap.service(["AMap.PlaceSearch"], function() {
|
//构造地点查询类
|
var placeSearch = new AMap.PlaceSearch({
|
pageSize: 99999999, // 单页显示结果条数
|
pageIndex: 1, // 页码
|
city: cityCode, // 兴趣点城市
|
citylimit: true, //是否强制限制在设置的城市内搜索
|
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
});
|
//关键字查询
|
placeSearch.search(keyWord,function (status, result) {
|
that.searchData = result.poiList.pois
|
that.searchData.forEach(e=>{
|
e.value = e.name
|
})
|
cb(that.searchData)
|
});
|
});
|
},
|
//获取从父组件传递的行政区code
|
getLocation(data){
|
this.region = data
|
},
|
//搜索框选择
|
handleSelect(item) {
|
this.setCenter(item.location.lng,item.location.lat)
|
this.addPoint([item.location.lng,item.location.lat])
|
this.coordinates.push([item.location.lng,item.location.lat])
|
this.$emit("getMapData", this.coordinates)
|
},
|
//搜索
|
querySearch(queryString, cb) {
|
this.search(queryString,cb)
|
},
|
//设置中心点
|
setCenter(lon,lat){
|
const view = this.map.getView()
|
view.setCenter([lon, lat]);
|
view.setZoom(20);
|
},
|
//绘制点
|
createPoint() {
|
let _this = this
|
_this.coordinates = []
|
_this.map.removeInteraction(_this.draw)
|
// _this.pointVector.getSource().clear()
|
|
_this.draw = new Draw({
|
source: _this.pointVector.getSource(),
|
type: 'Point',
|
})
|
_this.map.addInteraction(_this.draw)
|
// 点击事件
|
_this.map.on('click', function (e) {
|
if (_this.featurePoint != null){
|
_this.pointVector.getSource().removeFeature(_this.featurePoint)
|
}
|
|
if (_this.coordinates.length > 0) {
|
let featureArray = _this.pointVector.getSource().getFeatures()
|
for (let i = 0; i < featureArray.length -1; i++) {
|
_this.pointVector.getSource().removeFeature(featureArray[i])
|
}
|
_this.coordinates = []
|
}
|
// 将点坐标保存集合
|
_this.coordinates.push(e.coordinate)
|
_this.$emit("getMapData", _this.coordinates)
|
})
|
|
},
|
//创建点
|
addPoint(pointLonLat) {
|
// pointLonLat = [115.87531914674 28.8603307485585]
|
if (pointLonLat && pointLonLat[0] && pointLonLat[1]) {
|
//设置点
|
let feature_Point = new Feature({
|
geometry: new Point([Number(pointLonLat[0]), Number(pointLonLat[1])])
|
})
|
//点样式
|
let style = new Style({
|
image: new Icon({
|
src: "/img/dwicon.jpeg",
|
anchor: [0.48, 1],
|
// imgSize: [250,320],
|
scale: 0.13
|
}),
|
})
|
this.featurePoint = feature_Point
|
feature_Point.setStyle(style)
|
this.pointVector.getSource().addFeature(feature_Point)
|
let center = [Number(pointLonLat[0]), Number(pointLonLat[1])]
|
let view = this.map.getView()
|
view.setZoom(20)
|
view.animate({
|
center: center,
|
duration: 5,
|
})
|
}
|
},
|
clearDraw() {
|
let _this = this
|
_this.coordinates = []
|
_this.map.removeInteraction(_this.draw)
|
_this.pointVector.getSource().clear()
|
},
|
},
|
mounted() {
|
this.createMap()
|
}
|
|
}
|
</script>
|
|
<style>
|
.mapTip {
|
background-color: rgb(168, 168, 168);
|
padding: 5px;
|
border: 1px solid #000;
|
position: absolute;
|
z-index: 10 !important;
|
border-radius: 5px;
|
}
|
</style>
|
