|
|
@@ -7,6 +7,7 @@ |
|
|
|
<!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>--> |
|
|
|
<!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/> --> |
|
|
|
<!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>--> |
|
|
|
<input :id="this.positioningMap" type="button" class="ant-btn ant-btn-red" value="图层定位"/> |
|
|
|
<input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/> |
|
|
|
<input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/> |
|
|
|
</div> |
|
|
@@ -29,6 +30,10 @@ export default { |
|
|
|
uuidMap: this.guidProduct(), |
|
|
|
drawingPolygonMap: this.guidProduct(), |
|
|
|
drawingResetMap: this.guidProduct(), |
|
|
|
positioningMap: this.guidProduct(), |
|
|
|
newZb: null, |
|
|
|
newGeom: null, |
|
|
|
mapData: null, |
|
|
|
}; |
|
|
|
}, |
|
|
|
props: ['theGeom','message'], |
|
|
@@ -108,6 +113,7 @@ export default { |
|
|
|
maxZoom: 18.3, //地图放大限制 |
|
|
|
}), |
|
|
|
}); |
|
|
|
that.mapData= that.message; |
|
|
|
//图层查询定位开始 ---------start |
|
|
|
if(this.message.substring(0,1) =="{"){ |
|
|
|
//that.newHt ="1"; |
|
|
@@ -199,6 +205,7 @@ export default { |
|
|
|
//图层查询定位结束 ---------end |
|
|
|
//开始绘制地图 |
|
|
|
$("#"+this.drawingPolygonMap).click(function () { |
|
|
|
that.newGeom = 1; |
|
|
|
map.removeLayer(hc_land); |
|
|
|
map.removeLayer(vector_drawing); |
|
|
|
//that.closeMoule = null; |
|
|
@@ -238,6 +245,7 @@ export default { |
|
|
|
// }); |
|
|
|
//还原之前图层 |
|
|
|
$("#"+this.drawingResetMap).click(function () { |
|
|
|
that.newGeom = 2; |
|
|
|
if(that.closeMoule !=null) { |
|
|
|
map.addLayer(hc_land); |
|
|
|
map.removeInteraction(draw); |
|
|
@@ -245,6 +253,189 @@ export default { |
|
|
|
that.formSubmit(); |
|
|
|
} |
|
|
|
}); |
|
|
|
//定位当前绘制图层 |
|
|
|
$("#"+this.positioningMap).click(function () { |
|
|
|
//图层查询定位开始 ---------start |
|
|
|
console.log(that.message); |
|
|
|
console.log(that.closeMoule); |
|
|
|
console.log(that.newGeom); |
|
|
|
// var dwmap; |
|
|
|
// if(that.closeMoule != null && that.closeMoule !=""){ |
|
|
|
// dwmap = JSON.stringify(that.closeMoule); |
|
|
|
// }else { |
|
|
|
// console.log(that.newGeom); |
|
|
|
// dwmap = JSON.stringify(that.newGeom); |
|
|
|
// } |
|
|
|
var deMap = JSON.stringify(that.closeMoule); |
|
|
|
if(that.newGeom == 1){ |
|
|
|
if(deMap.substring(0,1) =="{"){ |
|
|
|
//that.newHt ="1"; |
|
|
|
// var theGeomMap =this.message.replace("Point", "MultiPolygon"); |
|
|
|
// var pointLeft = theGeomMap.replace("[", "[[[["); |
|
|
|
// var pointRight = pointLeft.replace("]", "]]]]"); |
|
|
|
hc_landFuther = new ol.layer.Vector({ |
|
|
|
title: "add Layer", |
|
|
|
source: new ol.source.Vector({ |
|
|
|
projection: projection, |
|
|
|
features: new ol.format.GeoJSON().readFeatures("{\n" + |
|
|
|
" \"type\": \"Feature\",\n" + |
|
|
|
" \"geometry\":" + deMap + "}"), |
|
|
|
}), |
|
|
|
style: new ol.style.Style({ |
|
|
|
fill: new ol.style.Fill({ |
|
|
|
//矢量图层填充颜色,以及透明度 |
|
|
|
color: "rgba(204, 255, 204,0.3)", |
|
|
|
}), |
|
|
|
stroke: new ol.style.Stroke({ |
|
|
|
//边界样式 |
|
|
|
color: "#47c68f", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
//map.addLayer(hc_land); |
|
|
|
var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; |
|
|
|
var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; |
|
|
|
var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; |
|
|
|
var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; |
|
|
|
//定位查询位置 |
|
|
|
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 |
|
|
|
map.getView().animate({ |
|
|
|
// 只设置需要的属性即可 |
|
|
|
center: center, // 中心点 |
|
|
|
zoom: 17.9, // 缩放级别 |
|
|
|
rotation: undefined, // 缩放完成view视图旋转弧度 |
|
|
|
duration: 1000, // 缩放持续时间,默认不需要设置 |
|
|
|
}); |
|
|
|
// let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize()); |
|
|
|
// map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]); |
|
|
|
// map.getView().setResolution(resolution); |
|
|
|
} else if(deMap.substring(0,1) =="[") { |
|
|
|
//that.newHt ="1"; |
|
|
|
var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [deMap.replaceAll("\"", "")]}); |
|
|
|
var leftJoin = zbNew.replace("\"[", "["); |
|
|
|
var rightJoin = leftJoin.replace("\"]", "]"); |
|
|
|
hc_landFuther = new ol.layer.Vector({ |
|
|
|
title: "add Layer", |
|
|
|
source: new ol.source.Vector({ |
|
|
|
projection: projection, |
|
|
|
features: new ol.format.GeoJSON().readFeatures("{\n" + |
|
|
|
" \"type\": \"Feature\",\n" + |
|
|
|
" \"geometry\":" + rightJoin + "}"), |
|
|
|
}), |
|
|
|
style: new ol.style.Style({ |
|
|
|
fill: new ol.style.Fill({ |
|
|
|
//矢量图层填充颜色,以及透明度 |
|
|
|
color: "rgba(204, 255, 204,0.3)", |
|
|
|
}), |
|
|
|
stroke: new ol.style.Stroke({ |
|
|
|
//边界样式 |
|
|
|
color: "#47c68f", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
//map.addLayer(hc_land); |
|
|
|
var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; |
|
|
|
var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; |
|
|
|
var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; |
|
|
|
var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; |
|
|
|
//定位查询位置 |
|
|
|
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 |
|
|
|
map.getView().animate({ |
|
|
|
// 只设置需要的属性即可 |
|
|
|
center: center, // 中心点 |
|
|
|
zoom: 16.9, // 缩放级别 |
|
|
|
rotation: undefined, // 缩放完成view视图旋转弧度 |
|
|
|
duration: 1000, // 缩放持续时间,默认不需要设置 |
|
|
|
}); |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.log(that.mapData); |
|
|
|
if(that.mapData.substring(0,1) =="{"){ |
|
|
|
//that.newHt ="1"; |
|
|
|
// var theGeomMap =this.message.replace("Point", "MultiPolygon"); |
|
|
|
// var pointLeft = theGeomMap.replace("[", "[[[["); |
|
|
|
// var pointRight = pointLeft.replace("]", "]]]]"); |
|
|
|
hc_landFuther = new ol.layer.Vector({ |
|
|
|
title: "add Layer", |
|
|
|
source: new ol.source.Vector({ |
|
|
|
projection: projection, |
|
|
|
features: new ol.format.GeoJSON().readFeatures("{\n" + |
|
|
|
" \"type\": \"Feature\",\n" + |
|
|
|
" \"geometry\":" + that.mapData + "}"), |
|
|
|
}), |
|
|
|
style: new ol.style.Style({ |
|
|
|
fill: new ol.style.Fill({ |
|
|
|
//矢量图层填充颜色,以及透明度 |
|
|
|
color: "rgba(204, 255, 204,0.3)", |
|
|
|
}), |
|
|
|
stroke: new ol.style.Stroke({ |
|
|
|
//边界样式 |
|
|
|
color: "#47c68f", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
//map.addLayer(hc_land); |
|
|
|
var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; |
|
|
|
var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; |
|
|
|
var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; |
|
|
|
var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; |
|
|
|
//定位查询位置 |
|
|
|
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 |
|
|
|
map.getView().animate({ |
|
|
|
// 只设置需要的属性即可 |
|
|
|
center: center, // 中心点 |
|
|
|
zoom: 17.9, // 缩放级别 |
|
|
|
rotation: undefined, // 缩放完成view视图旋转弧度 |
|
|
|
duration: 1000, // 缩放持续时间,默认不需要设置 |
|
|
|
}); |
|
|
|
// let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize()); |
|
|
|
// map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]); |
|
|
|
// map.getView().setResolution(resolution); |
|
|
|
} else if(that.mapData.substring(0,1) =="[") { |
|
|
|
//that.newHt ="1"; |
|
|
|
var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.mapData.replaceAll("\"", "")]}); |
|
|
|
var leftJoin = zbNew.replace("\"[", "["); |
|
|
|
var rightJoin = leftJoin.replace("\"]", "]"); |
|
|
|
hc_landFuther = new ol.layer.Vector({ |
|
|
|
title: "add Layer", |
|
|
|
source: new ol.source.Vector({ |
|
|
|
projection: projection, |
|
|
|
features: new ol.format.GeoJSON().readFeatures("{\n" + |
|
|
|
" \"type\": \"Feature\",\n" + |
|
|
|
" \"geometry\":" + rightJoin + "}"), |
|
|
|
}), |
|
|
|
style: new ol.style.Style({ |
|
|
|
fill: new ol.style.Fill({ |
|
|
|
//矢量图层填充颜色,以及透明度 |
|
|
|
color: "rgba(204, 255, 204,0.3)", |
|
|
|
}), |
|
|
|
stroke: new ol.style.Stroke({ |
|
|
|
//边界样式 |
|
|
|
color: "#47c68f", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
//map.addLayer(hc_land); |
|
|
|
var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; |
|
|
|
var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; |
|
|
|
var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; |
|
|
|
var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; |
|
|
|
//定位查询位置 |
|
|
|
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 |
|
|
|
map.getView().animate({ |
|
|
|
// 只设置需要的属性即可 |
|
|
|
center: center, // 中心点 |
|
|
|
zoom: 16.9, // 缩放级别 |
|
|
|
rotation: undefined, // 缩放完成view视图旋转弧度 |
|
|
|
duration: 1000, // 缩放持续时间,默认不需要设置 |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} else{ |
|
|
|
//this.closeMoule = null; |
|
|
|
document.getElementById(that.uuidMap).innerHTML = ''; |
|
|
@@ -398,6 +589,7 @@ export default { |
|
|
|
var feature = evt.feature; |
|
|
|
var geometry = feature.getGeometry(); |
|
|
|
var coordinate = geometry.getCoordinates(); |
|
|
|
that.newZb = JSON.stringify(coordinate); |
|
|
|
if(coordinate !="" && coordinate !=null){ |
|
|
|
//map.addLayer(vector_drawing); |
|
|
|
map.removeInteraction(draw); |
|
|
@@ -424,6 +616,101 @@ export default { |
|
|
|
//that.closeMoule = null; |
|
|
|
that.formSubmit(); |
|
|
|
}); |
|
|
|
//定位当前绘制图层 |
|
|
|
$("#"+this.positioningMap).click(function () { |
|
|
|
console.log(that.newZb); |
|
|
|
//图层查询定位开始 ---------start |
|
|
|
//if(){} |
|
|
|
//map.removeLayer(hc_landFuther); |
|
|
|
if(that.newZb.substring(0,1) =="{"){ |
|
|
|
//that.newHt ="1"; |
|
|
|
// var theGeomMap =this.message.replace("Point", "MultiPolygon"); |
|
|
|
// var pointLeft = theGeomMap.replace("[", "[[[["); |
|
|
|
// var pointRight = pointLeft.replace("]", "]]]]"); |
|
|
|
hc_landFuther = new ol.layer.Vector({ |
|
|
|
title: "add Layer", |
|
|
|
source: new ol.source.Vector({ |
|
|
|
projection: projection, |
|
|
|
features: new ol.format.GeoJSON().readFeatures("{\n" + |
|
|
|
" \"type\": \"Feature\",\n" + |
|
|
|
" \"geometry\":" + that.newZb + "}"), |
|
|
|
}), |
|
|
|
style: new ol.style.Style({ |
|
|
|
fill: new ol.style.Fill({ |
|
|
|
//矢量图层填充颜色,以及透明度 |
|
|
|
color: "rgba(204, 255, 204,0.3)", |
|
|
|
}), |
|
|
|
stroke: new ol.style.Stroke({ |
|
|
|
//边界样式 |
|
|
|
color: "#47c68f", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
//map.addLayer(hc_landFuther); |
|
|
|
var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; |
|
|
|
var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; |
|
|
|
var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; |
|
|
|
var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; |
|
|
|
//定位查询位置 |
|
|
|
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 |
|
|
|
map.getView().animate({ |
|
|
|
// 只设置需要的属性即可 |
|
|
|
center: center, // 中心点 |
|
|
|
zoom: 17.9, // 缩放级别 |
|
|
|
rotation: undefined, // 缩放完成view视图旋转弧度 |
|
|
|
duration: 1000, // 缩放持续时间,默认不需要设置 |
|
|
|
}); |
|
|
|
// let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize()); |
|
|
|
// map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]); |
|
|
|
// map.getView().setResolution(resolution); |
|
|
|
} else if(that.newZb.substring(0,1) =="["){ |
|
|
|
//that.newHt ="1"; |
|
|
|
var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.newZb.replaceAll("\"","")]}); |
|
|
|
var leftJoin = zbNew.replace("\"[","["); |
|
|
|
var rightJoin = leftJoin.replace("\"]","]"); |
|
|
|
hc_landFuther = new ol.layer.Vector({ |
|
|
|
title: "add Layer", |
|
|
|
source: new ol.source.Vector({ |
|
|
|
projection: projection, |
|
|
|
features: new ol.format.GeoJSON().readFeatures("{\n" + |
|
|
|
" \"type\": \"Feature\",\n" + |
|
|
|
" \"geometry\":" + rightJoin + "}"), |
|
|
|
}), |
|
|
|
style: new ol.style.Style({ |
|
|
|
fill: new ol.style.Fill({ |
|
|
|
//矢量图层填充颜色,以及透明度 |
|
|
|
color: "rgba(204, 255, 204,0.3)", |
|
|
|
}), |
|
|
|
stroke: new ol.style.Stroke({ |
|
|
|
//边界样式 |
|
|
|
color: "#47c68f", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
//map.addLayer(hc_landFuther); |
|
|
|
var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; |
|
|
|
var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; |
|
|
|
var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; |
|
|
|
var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; |
|
|
|
//定位查询位置 |
|
|
|
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 |
|
|
|
map.getView().animate({ |
|
|
|
// 只设置需要的属性即可 |
|
|
|
center: center, // 中心点 |
|
|
|
zoom: 16.9, // 缩放级别 |
|
|
|
rotation: undefined, // 缩放完成view视图旋转弧度 |
|
|
|
duration: 1000, // 缩放持续时间,默认不需要设置 |
|
|
|
}); |
|
|
|
// let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize()); |
|
|
|
// map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]); |
|
|
|
// map.getView().setResolution(resolution); |
|
|
|
} else { |
|
|
|
|
|
|
|
} |
|
|
|
//图层查询定位结束 ---------end |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|