|
|
<template>
|
|
|
<div :style="{'height':mapHeight,'width':'100%','position':'relative'}">
|
|
|
<div id="maps" class="map" :style="{'height':'100%'}">
|
|
|
</div>
|
|
|
<!-- 弹框 -->
|
|
|
<div ref="popup" class="popup" v-show="shopPopup">
|
|
|
<div class="info">
|
|
|
<div>点位名称：{{pointObj.name?pointObj.name:""}}</div>
|
|
|
<div class="address">地址：{{pointObj.address}}</div>
|
|
|
<div class="showinfo">经度：{{pointObj.lng}}</div>
|
|
|
<div>纬度:{{pointObj.lat}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</template>
|
|
|
<script>
|
|
|
import "ol/ol.css";
|
|
|
import {
|
|
|
Tile as TileLayer,
|
|
|
Vector as VectorLayer
|
|
|
} from "ol/layer";
|
|
|
import XYZ from "ol/source/XYZ";
|
|
|
import WMTS from 'ol/source/WMTS';
|
|
|
import WMTSTileGrid from 'ol/tilegrid/WMTS';
|
|
|
import {
|
|
|
TileArcGISRest
|
|
|
} from "ol/source"
|
|
|
import tilegrid from "ol/tilegrid/TileGrid"
|
|
|
import {
|
|
|
defaults as defaultControls
|
|
|
} from "ol/control";
|
|
|
import {
|
|
|
get as getprojection
|
|
|
} from "ol/proj"
|
|
|
import {
|
|
|
Projection,
|
|
|
addProjection
|
|
|
} from "ol/proj"
|
|
|
import Map from "ol/Map.js";
|
|
|
import View from "ol/View.js";
|
|
|
|
|
|
// 标注点位
|
|
|
import {
|
|
|
Vector as VectorSource
|
|
|
} from "ol/source";
|
|
|
import * as olProj from "ol/proj";
|
|
|
import {
|
|
|
Feature,
|
|
|
Overlay
|
|
|
} from "ol"
|
|
|
import {
|
|
|
Point
|
|
|
} from "ol/geom";
|
|
|
import {
|
|
|
Style,
|
|
|
Fill,
|
|
|
Stroke,
|
|
|
Circle as sCircle
|
|
|
} from "ol/style";
|
|
|
|
|
|
|
|
|
import proj4 from 'proj4'
|
|
|
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
map: null,
|
|
|
projection: "EPSG:4490",
|
|
|
mapHeight: "400px",
|
|
|
mapConfigs: {
|
|
|
Map_Code: "EPSG:4490", //坐标系名
|
|
|
// Map_extent: [390000, 3500000, 490000, 3360000], //范围框
|
|
|
Map_units: "degrees", //单位 m/degrees等
|
|
|
Map_axisOrientation: "neu", //轴
|
|
|
Map_global: false, //全球
|
|
|
MAP_center: [120.582031, 31.304329], //定义中心点
|
|
|
Map_Zooms: [13, 23, 10], //定义地图初始层级、最大层级、最小层级
|
|
|
Map_ID: "maps", //地图标识ID
|
|
|
},
|
|
|
featuresArr: [],
|
|
|
flagLayer: null,
|
|
|
pointArr: [],
|
|
|
shopPopup: false,
|
|
|
pointaddress: "",
|
|
|
pointObj: {}
|
|
|
};
|
|
|
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
// 转换坐标系
|
|
|
proj4.defs("EPSG:4490", '+proj=longlat +ellps=GRS80 +no_defs')
|
|
|
this.projection = new Projection({
|
|
|
code: this.mapConfigs.Map_Code,
|
|
|
units: this.mapConfigs.Map_units,
|
|
|
axisOrientation: this.mapConfigs.Map_axisOrientation,
|
|
|
global: this.mapConfigs.Map_global,
|
|
|
});
|
|
|
addProjection(this.projection);
|
|
|
|
|
|
this.initLoad();
|
|
|
},
|
|
|
watch: {
|
|
|
pointArr(newval, oldval) {
|
|
|
if (newval) {
|
|
|
// this.resetPointArr()
|
|
|
this.pointArr = newval
|
|
|
this.$nextTick(function() {
|
|
|
this.setMarker()
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
initLoad() {
|
|
|
var that = this;
|
|
|
var clientHeight = document.documentElement.clientHeight
|
|
|
let tableHeight = clientHeight;
|
|
|
that.mapHeight = tableHeight + "px";
|
|
|
this.showMaps()
|
|
|
},
|
|
|
showMaps() {
|
|
|
this.$nextTick(function() {
|
|
|
this.initMap();
|
|
|
})
|
|
|
},
|
|
|
initMap() {
|
|
|
let map = new Map({
|
|
|
target: "maps",
|
|
|
view: new View({
|
|
|
center: this.mapConfigs.MAP_center, //中心点经纬度
|
|
|
zoom: this.mapConfigs.Map_Zooms[0], //图层缩放大小
|
|
|
maxZoom: this.mapConfigs.Map_Zooms[1],
|
|
|
minZoom: this.mapConfigs.Map_Zooms[2],
|
|
|
projection: this.projection,
|
|
|
}),
|
|
|
layers: [],
|
|
|
// interactions: defaultControls({
|
|
|
// doubleClickZoom: false,
|
|
|
// }),
|
|
|
});
|
|
|
this.map = map;
|
|
|
// 添加天地图
|
|
|
let url = "http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}";
|
|
|
url = `${url}&T=vec_c&tk=2eecd3d615e01cf6dbe6d4b8b686d264`;
|
|
|
// let url = "http://t4.tianditu.com/DataServer?T=vec_w&tk=2eecd3d615e01cf6dbe6d4b8b686d264&x={x}&y={y}&l={z}"
|
|
|
let tdtLayer = new TileLayer({
|
|
|
title: "天地图",
|
|
|
id: "M2",
|
|
|
type: "overlay",
|
|
|
visible: true,
|
|
|
layerType: "TD地图",
|
|
|
opacity: 1,
|
|
|
source: new XYZ({
|
|
|
crossOrigin: 'anonymous',
|
|
|
url: url,
|
|
|
projection: "EPSG:4326"
|
|
|
})
|
|
|
});
|
|
|
this.map.addLayer(tdtLayer);
|
|
|
// 路网
|
|
|
let tdtLayers = new TileLayer({
|
|
|
title: "路网",
|
|
|
id: "L1",
|
|
|
type: "overlay",
|
|
|
visible: true,
|
|
|
layerType: "地图",
|
|
|
opacity: 1,
|
|
|
source: new TileArcGISRest({
|
|
|
url: "http://192.168.60.22:6080/arcgis/rest/services/szhd/dlzx/MapServer",
|
|
|
projection: "EPSG:4490"
|
|
|
})
|
|
|
});
|
|
|
this.map.addLayer(tdtLayers);
|
|
|
this.addOverlay()
|
|
|
this.singleclick()
|
|
|
},
|
|
|
//加载图层
|
|
|
ShowLayers() {
|
|
|
let urls = "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}";
|
|
|
urls = `${urls}&T=cva_w&tk=2eecd3d615e01cf6dbe6d4b8b686d264`;
|
|
|
let tdtLayers = new TileLayer({
|
|
|
title: "路网",
|
|
|
id: "L1",
|
|
|
type: "overlay",
|
|
|
visible: true,
|
|
|
layerType: "地图",
|
|
|
opacity: 1,
|
|
|
source: new TileArcGISRest({
|
|
|
url: "http://192.168.60.22:6080/arcgis/rest/services/szhd/dlzx/MapServer",
|
|
|
projection: "EPSG:4490"
|
|
|
})
|
|
|
});
|
|
|
this.map.addLayer(tdtLayers);
|
|
|
},
|
|
|
// 设置巡查 点位
|
|
|
setMarker() {
|
|
|
// 设置图层
|
|
|
if (this.flagLayer != null) {
|
|
|
this.map = null
|
|
|
let _that = this;
|
|
|
this.flagLayer
|
|
|
.getSource()
|
|
|
.getFeatures()
|
|
|
.forEach(function(feature) {
|
|
|
_that.flagLayer.getSource().removeFeature(feature);
|
|
|
});
|
|
|
this.featuresArr = [];
|
|
|
this.flagLayer.getSource().clear();
|
|
|
}
|
|
|
if(this.pointArr.length==0){
|
|
|
return
|
|
|
}
|
|
|
|
|
|
this.flagLayer = new VectorLayer({
|
|
|
source: new VectorSource()
|
|
|
});
|
|
|
// 添加图层
|
|
|
this.map.addLayer(this.flagLayer);
|
|
|
// 循环添加feature
|
|
|
|
|
|
for (let i = 0; i < this.pointArr.length; i++) {
|
|
|
// 创建feature，一个feature就是一个点坐标信息
|
|
|
let feature = new Feature({
|
|
|
geometry: new Point([this.pointArr[i].lng, this.pointArr[i].lat])
|
|
|
});
|
|
|
// 设置展示 地址
|
|
|
feature.set('pointObj', this.pointArr[i])
|
|
|
feature.setStyle(
|
|
|
new Style({
|
|
|
image: new sCircle({
|
|
|
fill: new Fill({
|
|
|
color: '#000',
|
|
|
}),
|
|
|
radius: 10,
|
|
|
}),
|
|
|
})
|
|
|
);
|
|
|
this.featuresArr.push(feature);
|
|
|
} // for 结束
|
|
|
this.flagLayer.getSource().addFeatures(this.featuresArr);
|
|
|
this.moveto(this.pointArr[0].lng,this.pointArr[0].lat)
|
|
|
},
|
|
|
|
|
|
addOverlay() {
|
|
|
// 创建Overlay
|
|
|
let elPopup = this.$refs.popup;
|
|
|
this.popup = new Overlay({
|
|
|
element: elPopup,
|
|
|
positioning: "bottom-center",
|
|
|
stopEvent: false,
|
|
|
offset: [0, -20],
|
|
|
});
|
|
|
this.map.addOverlay(this.popup);
|
|
|
},
|
|
|
singleclick() {
|
|
|
// 点击
|
|
|
this.map.on("singleclick", (e) => {
|
|
|
// 判断是否点击在点上
|
|
|
let feature = this.map.forEachFeatureAtPixel(
|
|
|
e.pixel,
|
|
|
(feature) => feature
|
|
|
);
|
|
|
if (feature) {
|
|
|
this.shopPopup = true;
|
|
|
// 设置弹窗位置
|
|
|
let coordinates = feature.getGeometry().getCoordinates();
|
|
|
this.pointObj = feature.get('pointObj');
|
|
|
this.popup.setPosition(coordinates);
|
|
|
// 打卡
|
|
|
this.$emit("getPoint", this.pointObj)
|
|
|
} else {
|
|
|
this.shopPopup = false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
moveto(longitude, latitude) {
|
|
|
this.map.getView().animate({
|
|
|
center: [longitude, latitude], // 中心点
|
|
|
rotation: undefined,
|
|
|
duration: 1000
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
/deep/ .ol-zoom {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.popup {
|
|
|
width: 200px;
|
|
|
background-color: white;
|
|
|
padding: 18px;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 0 15px rgb(177, 177, 177);
|
|
|
}
|
|
|
</style>
|
