zhangzl
/
nsgk_mobile
2
0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

添加地图

wulanhaote
hbao пре 3 година
родитељ
ae9d998c5c
комит
12ddd0c563
9 измењених фајлова са 1357 додато и 16 уклоњено
Један поглед
Diff Options
Show Stats Download Patch File Download Diff File
  1. +54
    -0
      src/api/homesteadSurvey/town.js
  2. +54
    -0
      src/api/homesteadSurvey/village.js
  3. +8
    -0
      src/api/homesteadSurvey/zjdzd.js
  4. BIN
      src/assets/images/housesteadSurvey/mark.png
  5. +380
    -0
      src/components/Map/MapGisDrawing.vue
  6. +381
    -0
      src/components/Map/MapGisLine.vue
  7. +437
    -0
      src/components/Map/MapGisTag.vue
  8. +10
    -10
      src/views/homestead/index.vue
  9. +33
    -6
      src/views/homesteadSurvey/add.vue

+ 54
- 0
src/api/homesteadSurvey/town.js Прегледај датотеку

@@ -0,0 +1,54 @@
import request from '@/utils/request'

// 查询镇边界列表
export function listTown(query) {
return request({
url: '/houseSurvey/town/list',
method: 'get',
params: query
})
}

// 导出镇边界
export function exportTown(query) {
return request({
url: '/houseSurvey/town/export',
method: 'get',
params: query
})
}

// 查询镇边界详细
export function getTown(fid) {
return request({
url: '/houseSurvey/town/get/' + fid,
method: 'get'
})
}

// 新增镇边界
export function addTown(data) {
return request({
url: '/houseSurvey/town/add',
method: 'post',
data: data
})
}

// 修改镇边界
export function updateTown(data) {
return request({
url: '/houseSurvey/town/edit',
method: 'post',
data: data
})
}

// 删除镇边界
export function delTown(fid) {
return request({
url: '/houseSurvey/town/remove/' + fid,
method: 'get'
})
}


+ 54
- 0
src/api/homesteadSurvey/village.js Прегледај датотеку

@@ -0,0 +1,54 @@
import request from '@/utils/request'

// 查询村边界列表
export function listVillage(query) {
return request({
url: '/houseSurvey/village/list',
method: 'get',
params: query
})
}

// 导出村边界
export function exportVillage(query) {
return request({
url: '/houseSurvey/village/export',
method: 'get',
params: query
})
}

// 查询村边界详细
export function getVillage(fid) {
return request({
url: '/houseSurvey/village/get/' + fid,
method: 'get'
})
}

// 新增村边界
export function addVillage(data) {
return request({
url: '/houseSurvey/village/add',
method: 'post',
data: data
})
}

// 修改村边界
export function updateVillage(data) {
return request({
url: '/houseSurvey/village/edit',
method: 'post',
data: data
})
}

// 删除村边界
export function delVillage(fid) {
return request({
url: '/houseSurvey/village/remove/' + fid,
method: 'get'
})
}


+ 8
- 0
src/api/homesteadSurvey/zjdzd.js Прегледај датотеку

@@ -69,3 +69,11 @@ export function uploadFile(data) {
data: data data: data
}) })
} }

//查询当前登录账号坐标
export function getQueryLand() {
return request({
url: '/system/dept/get/current',
method: 'get'
})
}

BIN
src/assets/images/housesteadSurvey/mark.png Прегледај датотеку

Before After
Width: 19  |  Height: 31  |  Size: 1.7 KiB

+ 380
- 0
src/components/Map/MapGisDrawing.vue Прегледај датотеку

@@ -0,0 +1,380 @@
<template>
<div>
<p class="fuTitle">地块位置绘制</p>
<div id="full-screen-acceptance" style="width: 100%;height:45vh;">
<div :id=this.uuidMap style="width: 100%;height: 100%"></div>
<div id='land-btn-wrap'>
<!--<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="取消"/>&nbsp;&nbsp;-->
<!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>-->
<input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
<input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>
</div>
</div>
<div id="info" style="display: none"></div>
</div>
</template>

<script>
import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
import $ from "jquery";

export default {
components: {
getQueryLand,
},
data() {
return {
closeMoule: null,
uuidMap: this.guidProduct(),
drawingPolygonMap: this.guidProduct(),
drawingResetMap: this.guidProduct(),
};
},
props: ['theGeom','message'],
// created() {
// // setTimeout(() => {
// // this.drawingPaceCountryDarw();
// // }, 100);
// },
methods: {
//地图加载
formSubmit(){
//父组件监听的名字必须是formSubmit
// 子组件调用父组件的方法并传参
if(this.closeMoule =="" || this.closeMoule == null){
this.$emit('formSubmit', null);
}else{
this.$emit('formSubmit', JSON.stringify(this.closeMoule));
}
},
guidProduct(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
},
//地图查看
drawingPaceCountryDarw() {
//加载地图编辑
var that = this;
var map;
//var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
if (that.message != null && that.message != ""
&& that.message != undefined) {
document.getElementById(that.uuidMap).innerHTML = '';
var hc_land;
var hc_landFuther;
var draw; // global so we can remove it later
var vector_drawing;
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
target: that.uuidMap,
view: new ol.View({
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 15,
minZoom: 5, //地图缩小限制
maxZoom: 18.3, //地图放大限制
}),
});
//图层查询定位开始 ---------start
if(this.message.substring(0,1) =="{"){
// var theGeomMap =this.message.replace("Point", "MultiPolygon");
// var pointLeft = theGeomMap.replace("[", "[[[[");
// var pointRight = pointLeft.replace("]", "]]]]");
hc_land = 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\":" + this.message + "}"),
}),
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_land.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land.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, // 缩放持续时间，默认不需要设置
});
}
// if(this.message.substring(0,1) =="["){
// var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [[[this.message.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: 17.9, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// });
// }
//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawingPolygonMap).click(function () {
map.removeLayer(hc_land);
//map.removeLayer(hc_landFuther);
map.removeLayer(vector_drawing);
//that.closeMoule = null;
map.removeInteraction(draw);
//var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Polygon"
});
draw.on('drawend', function (evt) {
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
that.closeMoule = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}

addInteraction();
});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#"+this.drawingResetMap).click(function () {
if(that.closeMoule !=null) {
map.removeLayer(vector_drawing);
//map.removeLayer(hc_landFuther);
map.removeInteraction(draw);
map.addLayer(hc_land);
//map.addLayer(hc_landFuther);
// that.closeMoule = null;
that.formSubmit();
}
});
} else{
//this.closeMoule = null;
document.getElementById(that.uuidMap).innerHTML = '';
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//获取坐标是否存在
var Zb;
getQueryLand().then((response) => {
if (response.code == 200) {
let InsertCode = response.data;
if (InsertCode != null) {
var lat = InsertCode.lat;
var lng = InsertCode.lng;
if(lat !=null && lng !=null && lat !="" && lng !=""){
Zb = [lng,lat];
}else {
Zb =[115.452752, 31.789033];
}
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
logo: 'false',
target: that.uuidMap,
view: new ol.View({
center: ol.proj.fromLonLat(Zb),
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 16.9,
minZoom: 5, //地图缩小限制
maxZoom: 18, //地图放大限制
}),
});
}
}
});

//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawingPolygonMap).click(function () {
//that.closeMoule = null;
map.removeInteraction(draw);
//var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Polygon"
});
draw.on('drawend', function (evt) {
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
that.closeMoule = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}

addInteraction();

});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#"+this.drawingResetMap).click(function () {
map.removeInteraction(draw);
map.removeLayer(vector_drawing);
//that.closeMoule = null;
that.formSubmit();
});
}
},
},
watch: {},
};
</script>

<style scoped>
#that.message {
width: 100%;
height: 100%;
}
.fuTitle {
border-top: 1px solid #e9e9e9;
text-align: center;
padding: 10px 0px 0px 0px;
font-size: 36px;
color: #999;
}
.ant-btn-red {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;

}
#land-btn-wrap{
position: relative;
width: 25%;
left: 75%;
bottom: 100%;
z-index: 2000;
padding-top: 5%;
}
</style>

+ 381
- 0
src/components/Map/MapGisLine.vue Прегледај датотеку

@@ -0,0 +1,381 @@
<template>
<div>
<p class="fuTitle">地块位置绘制</p>
<div id="full-screen-acceptance" style="width: 100%;height:45vh;">
<div :id=this.uuidMap style="width: 100%;height: 100%"></div>
<div id='land-btn-wrap'>
<el-row>
<!--<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="取消"/>&nbsp;&nbsp;-->
<!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>-->
<input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
<input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>
</el-row>
</div>
</div>
<div id="info" style="display: none"></div>
</div>
</template>

<script>
import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
import $ from "jquery";

export default {
components: {
getQueryLand,
},
data() {
return {
closeMoule: null,
uuidMap: this.guidProduct(),
drawingPolygonMap: this.guidProduct(),
drawingResetMap: this.guidProduct(),
};
},
props: ['theGeom','message'],
// created() {
// // setTimeout(() => {
// // this.drawingPaceCountryLine();
// // }, 100);
// },
methods: {
//地图加载
formSubmit(){
//父组件监听的名字必须是formSubmit
// 子组件调用父组件的方法并传参
if(this.closeMoule =="" || this.closeMoule == null){
this.$emit('formSubmit', null);
}else{
this.$emit('formSubmit', JSON.stringify(this.closeMoule));
}
},
guidProduct(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
},
//地图查看
drawingPaceCountryLine() {
//加载地图编辑
var that = this;
var map;
//var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
if (that.message != null && that.message != ""
&& that.message != undefined) {
document.getElementById(that.uuidMap).innerHTML = '';
var hc_land;
var hc_landFuther;
var draw; // global so we can remove it later
var vector_drawing;
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
target: that.uuidMap,
view: new ol.View({
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 15,
minZoom: 5, //地图缩小限制
maxZoom: 18.3, //地图放大限制
}),
});
//图层查询定位开始 ---------start
if(this.message.substring(0,1) =="{"){
// var theGeomMap =this.message.replace("Point", "MultiPolygon");
// var pointLeft = theGeomMap.replace("[", "[[[[");
// var pointRight = pointLeft.replace("]", "]]]]");
hc_land = 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\":" + this.message + "}"),
}),
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_land.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land.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, // 缩放持续时间，默认不需要设置
});
}
// if(this.message.substring(0,1) =="["){
// var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [[[this.message.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: 17.9, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// });
// }
//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawingPolygonMap).click(function () {
map.removeLayer(hc_land);
//map.removeLayer(hc_landFuther);
map.removeLayer(vector_drawing);
//that.closeMoule = null;
map.removeInteraction(draw);
//var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Polygon"
});
draw.on('drawend', function (evt) {
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
that.closeMoule = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}

addInteraction();
});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#"+this.drawingResetMap).click(function () {
if(that.closeMoule !=null) {
map.removeLayer(vector_drawing);
//map.removeLayer(hc_landFuther);
map.removeInteraction(draw);
map.addLayer(hc_land);
//map.addLayer(hc_landFuther);
// that.closeMoule = null;
that.formSubmit();
}
});
} else{
//this.closeMoule = null;
document.getElementById(that.uuidMap).innerHTML = '';
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//获取坐标是否存在
var Zb;
getQueryLand().then((response) => {
if (response.code == 200) {
let InsertCode = response.data;
if (InsertCode != null) {
var lat = InsertCode.lat;
var lng = InsertCode.lng;
if(lat !=null && lng !=null && lat !="" && lng !=""){
Zb = [lng,lat];
}else {
Zb =[115.452752, 31.789033];
}
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
logo: 'false',
target: that.uuidMap,
view: new ol.View({
center: ol.proj.fromLonLat(Zb),
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 16.9,
minZoom: 5, //地图缩小限制
maxZoom: 18, //地图放大限制
}),
});
}
}
});

//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawingPolygonMap).click(function () {
//that.closeMoule = null;
map.removeInteraction(draw);
//var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Polygon"
});
draw.on('drawend', function (evt) {
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
that.closeMoule = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}

addInteraction();

});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#"+this.drawingResetMap).click(function () {
map.removeInteraction(draw);
map.removeLayer(vector_drawing);
//that.closeMoule = null;
that.formSubmit();
});
}
},
},
watch: {},
};
</script>

<style scoped>
#that.message {
width: 100%;
height: 100%;
}
.fuTitle {
border-top: 1px solid #e9e9e9;
text-align: center;
padding: 10px 0px 0px 0px;
font-size: 18px;
color: #999;
}
.ant-btn-red {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
#land-btn-wrap{
position: relative;
width: 25%;
left: 75%;
bottom: 100%;
z-index: 2000;
padding-top: 5%;
}
</style>

+ 437
- 0
src/components/Map/MapGisTag.vue Прегледај датотеку

@@ -0,0 +1,437 @@
<template>
<div>
<p class="fuTitle">地块位置绘制</p>
<div id="full-screen-acceptance" style="width: 100%;height:45vh;">
<div :id=this.uuidMap style="width: 100%;height: 100%"></div>
<div id='land-btn-wrap'>
<el-row>
<input :id="this.drawPolygonMap" class="ant-btn ant-btn-red" type="button" value="标记"/>&nbsp;&nbsp;
<!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
<input :id="this.drawResetMap" type="button" class="ant-btn ant-btn-red" value="重置标记"/>
</el-row>
</div>
</div>
<div id="info" style="display: none"></div>
</div>
</template>

<script>
import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
import $ from "jquery";

export default {
components: {
getQueryLand,
},
data() {
return {
closeMoule: null,
reduction: null,
uuidMap: this.guidProduct(),
drawPolygonMap: this.guidProduct(),
drawResetMap: this.guidProduct(),
};
},
props: ['theGeom','message'],
methods: {
//地图加载
formSubmit(){
//父组件监听的名字必须是formSubmit
// 子组件调用父组件的方法并传参
if(this.closeMoule =="" || this.closeMoule == null){
this.$emit('formSubmit', null);
}else{
this.$emit('formSubmit', JSON.stringify(this.closeMoule));
}
},
guidProduct(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
},
//地图查看
pointPaceCountryDarw() {
//加载地图编辑
var that = this;
var map;
//var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle() {
return new ol.style.Style({
image: new ol.style.Icon({
//设置图标偏移
anchor: [0.5, 1],
//标注样式的起点位置
anchorOrigin: "top-right",
//X方向单位：分数
anchorXUnits: "fraction",
//Y方向单位：像素
anchorYUnits: "pixels",
//偏移起点位置的方向
offsetOrigin: "top-right",
//透明度
opacity: 0.9,
//图片路径
src: require("../../assets/images/housesteadSurvey/mark.png"),
}),
text: new ol.style.Text({
textAlign: "center", //位置
textBaseline: "middle", //基准线
font: "normal 12px 微软雅黑", //文字样式
//text: "标注点", //文本内容
fill: new ol.style.Fill({
//文本填充样式（即文字颜色)
color: "#ff0000",
}),
}),
zIndex: 9999,
});
}
if (that.message != null && that.message != ""
&& that.message != undefined) {
this.closeMoule = null;
document.getElementById(that.uuidMap).innerHTML = '';
var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
target: that.uuidMap,
view: new ol.View({
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 15.9,
minZoom: 5, //地图缩小限制
maxZoom: 18.3, //地图放大限制
}),
});
//图层查询定位开始 ---------start
if(this.message.substring(0,1) =="{"){
var theGeomMap =this.message.replace("Point", "MultiPolygon");
var pointLeft = theGeomMap.replace("[", "[[[[");
var pointRight = pointLeft.replace("]", "]]]]");
hc_land = 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\":" + pointRight + "}"),
}),
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,
}),
}),
});
}
if(this.message.substring(0,1) =="["){
var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [[[this.message.replaceAll("\"","")]]]});
var leftJoin = zbNew.replace("\"[","[");
var rightJoin = leftJoin.replace("\"]","]");
hc_land = 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_land.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
//定位查询位置
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
var newcenterFeature = new ol.Feature({
geometry: new ol.geom.Point(center), //几何信息
name: "标注点",
});
var sourceMapLook = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: sourceMapLook,
});
map.addLayer(vector_drawing);
newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMapLook.addFeature(newcenterFeature);
map.getView().animate({
// 只设置需要的属性即可
center: center, // 中心点
zoom: 15.9, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawPolygonMap).click(function () {
map.removeLayer(hc_land);
map.removeLayer(vector_drawing);
that.closeMoule = null;
var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: source,
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Point",
});
draw.on('drawend', function (evt) {
map.removeInteraction(draw);
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
//name: "标注点",
});
newFeature.setStyle(createLabelStyle()); //设置要素样式
source.addFeature(newFeature);
that.closeMoule = coordinate;
that.reduction = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}
addInteraction();
});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#" + this.drawResetMap).click(function () {
if(that.reduction !=null) {
map.removeInteraction(draw);
map.removeLayer(vector_drawing);
map.addLayer(hc_land);
newcenterFeature = new ol.Feature({
geometry: new ol.geom.Point(center), //几何信息
//name: "标注点",
});
sourceMapLook = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: sourceMapLook,
});
map.addLayer(vector_drawing);
newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMapLook.addFeature(newcenterFeature);
that.closeMoule = null;
that.formSubmit();
}
});
} else{
this.closeMoule = null;
document.getElementById(that.uuidMap).innerHTML = '';
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//获取坐标是否存在
var Zb;
var latitude;
var longitude;
//开始定位当前位置
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;// 获取纬度
longitude = position.coords.longitude;// 获取经度
});
getQueryLand().then((response) => {
if (response.code == 200) {
let InsertCode = response.data;
if (InsertCode != null) {
var lat = InsertCode.lat;
var lng = InsertCode.lng;
if(latitude !=null && longitude !=null && latitude !="" && longitude !=""){
Zb = [longitude,latitude];
}else if(lat !=null && lng !=null && lat !="" && lng !=""){
Zb = [lng,lat];
}else {
Zb =[115.452752, 31.789033];
}
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
logo: 'false',
target: that.uuidMap,
view: new ol.View({
center: ol.proj.fromLonLat(Zb),
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 15.9,
minZoom: 5, //地图缩小限制
maxZoom: 18, //地图放大限制
}),
});
}
}
});

//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawPolygonMap).click(function () {
//map.removeLayer(hc_land);
map.removeLayer(vector_drawing);
that.closeMoule = null;
map.removeInteraction(draw);
var sourceMap = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: sourceMap,
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Point",
});
draw.on('drawend', function (evt) {
map.removeInteraction(draw);
$("#drawRemove").trigger('click');
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
//name: "标注点",
});
newFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMap.addFeature(newFeature);
that.closeMoule = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}
addInteraction();

});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#" + this.drawResetMap).click(function () {
map.removeInteraction(draw);
map.removeLayer(vector_drawing);
//map.addLayer(hc_land);
that.closeMoule = null;
that.formSubmit();
});
}
},
},
watch: {},
};
</script>

<style scoped>
#peaceCountryMap {
width: 100%;
height: 100%;
}
.fuTitle {
border-top: 1px solid #e9e9e9;
text-align: center;
padding: 10px 0px 0px 0px;
font-size: 18px;
color: #999;
}
.ant-btn-red {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
#land-btn-wrap{
position: relative;
width: 25%;
left: 75%;
bottom: 100%;
z-index: 2000;
padding-top: 5%;
}
</style>

+ 10
- 10
src/views/homestead/index.vue Прегледај датотеку

@@ -2173,7 +2173,7 @@ export default {


var wmsSource = new ol.source.TileWMS({ var wmsSource = new ol.source.TileWMS({
//url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms', //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
url: "http://116.255.223.226:8080/geoserver/nsgk_hc/wms",
//url: 'http://localhost:8888/geoserver/mywork_mysql/wms', //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
params: { params: {
LAYERS: "nsgk_hc:nsgk_hc_all", LAYERS: "nsgk_hc:nsgk_hc_all",
@@ -2202,7 +2202,7 @@ export default {
title: "add Layer", title: "add Layer",
source: new ol.source.Vector({ source: new ol.source.Vector({
projection: projection, projection: projection,
// url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
// url: "http://116.255.223.226:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
// format: new ol.format.GeoJSON(), // format: new ol.format.GeoJSON(),
features: new ol.format.GeoJSON().readFeatures(data), features: new ol.format.GeoJSON().readFeatures(data),
}), }),
@@ -2244,7 +2244,7 @@ export default {
// title: "add Layer", // title: "add Layer",
// source: new ol.source.Vector({ // source: new ol.source.Vector({
// projection: projection, // projection: projection,
// url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
// url: "http://116.255.223.226:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
// format: new ol.format.GeoJSON(), // format: new ol.format.GeoJSON(),
// }), // }),
// style: new ol.style.Style({ // style: new ol.style.Style({
@@ -2264,7 +2264,7 @@ export default {
// title: "add huancui_zhen", // title: "add huancui_zhen",
// source: new ol.source.Vector({ // source: new ol.source.Vector({
// projection: projection, // projection: projection,
// url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui_zhen.json", //GeoJSON的文件路径，用户可以根据需求而改变
// url: "http://116.255.223.226:8081/nsgk_test/profile/geojson/huancui_zhen.json", //GeoJSON的文件路径，用户可以根据需求而改变
// format: new ol.format.GeoJSON(), // format: new ol.format.GeoJSON(),
// }), // }),
// style: new ol.style.Style({ // style: new ol.style.Style({
@@ -2700,7 +2700,7 @@ export default {
nongZt[i] = new ol.layer.Tile({ nongZt[i] = new ol.layer.Tile({
source: new ol.source.TileWMS({ source: new ol.source.TileWMS({
//url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms', //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
url: "http://116.255.223.226:8080/geoserver/nsgk_hc/wms",
//url: 'http://localhost:8888/geoserver/mywork_mysql/wms', //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
//url: 'http://localhost:8888/geoserver/new_shp/wms', //url: 'http://localhost:8888/geoserver/new_shp/wms',
params: { params: {
@@ -2727,7 +2727,7 @@ export default {
outputFormat: "application/json", outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
}; };
let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
let url_dw = "http://116.255.223.226:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
url_dw = url_dw + "?"; url_dw = url_dw + "?";
for (let key in param_dw) { for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&"; url_dw = url_dw + key + "=" + param_dw[key] + "&";
@@ -2859,7 +2859,7 @@ export default {
delete_map[i] = new ol.layer.Tile({ delete_map[i] = new ol.layer.Tile({
source: new ol.source.TileWMS({ source: new ol.source.TileWMS({
//url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms', //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
url: "http://116.255.223.226:8080/geoserver/nsgk_hc/wms",
//url: 'http://localhost:8888/geoserver/mywork_mysql/wms', //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
//url: 'http://localhost:8888/geoserver/new_shp/wms', //url: 'http://localhost:8888/geoserver/new_shp/wms',
params: { params: {
@@ -2887,7 +2887,7 @@ export default {
outputFormat: "application/json", outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
}; };
let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
let url_dw = "http://116.255.223.226:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
url_dw = url_dw + "?"; url_dw = url_dw + "?";
for (let key in param_dw) { for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&"; url_dw = url_dw + key + "=" + param_dw[key] + "&";
@@ -3121,7 +3121,7 @@ export default {
outputFormat: "application/json", outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
}; };
let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
let url_dw = "http://116.255.223.226:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
url_dw = url_dw + "?"; url_dw = url_dw + "?";
for (let key in param_dw) { for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&"; url_dw = url_dw + key + "=" + param_dw[key] + "&";
@@ -3288,7 +3288,7 @@ export default {
outputFormat: "application/json", outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
}; };
let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
let url_dw = "http://116.255.223.226:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
url_dw = url_dw + "?"; url_dw = url_dw + "?";
for (let key in param_dw) { for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&"; url_dw = url_dw + key + "=" + param_dw[key] + "&";


+ 33
- 6
src/views/homesteadSurvey/add.vue Прегледај датотеку

@@ -339,6 +339,7 @@
label="备注" label="备注"
placeholder="备注" placeholder="备注"
/> />
<MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block color="#7AC943" native-type="submit">保存</van-button> <van-button round block color="#7AC943" native-type="submit">保存</van-button>
</div> </div>
@@ -697,6 +698,7 @@
placeholder="备注" placeholder="备注"
:rules="[{ required: true, message: '' }]" :rules="[{ required: true, message: '' }]"
/> />
<MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block color="#7AC943" native-type="submit">保存</van-button> <van-button round block color="#7AC943" native-type="submit">保存</van-button>
</div> </div>
@@ -817,6 +819,7 @@
placeholder="备注" placeholder="备注"
:rules="[{ required: true, message: '' }]" :rules="[{ required: true, message: '' }]"
/> />
<MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block color="#7AC943" native-type="submit">保存</van-button> <van-button round block color="#7AC943" native-type="submit">保存</van-button>
</div> </div>
@@ -930,6 +933,7 @@
placeholder="备注" placeholder="备注"
:rules="[{ required: true, message: '' }]" :rules="[{ required: true, message: '' }]"
/> />
<MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block color="#7AC943" native-type="submit">保存</van-button> <van-button round block color="#7AC943" native-type="submit">保存</van-button>
</div> </div>
@@ -1176,6 +1180,7 @@
<div style="text-align:center;overflow:auto;"> <div style="text-align:center;overflow:auto;">
<van-button plain round color="#7AC943" size="mini" style="margin:0 auto;">查看户主信息</van-button> <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;">查看户主信息</van-button>
</div> </div>
<MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block color="#7AC943" native-type="submit">保存</van-button> <van-button round block color="#7AC943" native-type="submit">保存</van-button>
</div> </div>
@@ -1198,7 +1203,7 @@
<p style="flex:1;text-align:right;">个人</p> <p style="flex:1;text-align:right;">个人</p>
</div> </div>
<div style="text-align:center;overflow:auto;"> <div style="text-align:center;overflow:auto;">
<van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" @click="showzrz=true">查看自然幢信息</van-button>
<van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" @click="showPopupzrz">查看自然幢信息</van-button>
</div> </div>
</div> </div>
<template #right> <template #right>
@@ -1258,7 +1263,7 @@
<p style="flex:1;text-align:right;">个人</p> <p style="flex:1;text-align:right;">个人</p>
</div> </div>
<div style="text-align:center;overflow:auto;"> <div style="text-align:center;overflow:auto;">
<van-button plain round color="#7AC943" size="mini" @click="showfsss=true" style="margin:0 auto;">查看附属设施信息</van-button>
<van-button plain round color="#7AC943" size="mini" @click="showPopupfsss" style="margin:0 auto;">查看附属设施信息</van-button>
</div> </div>
</div> </div>
<template #right> <template #right>
@@ -1280,9 +1285,17 @@


<script> <script>
import {listShyqr} from "@/api/homesteadSurvey/shyqr"; import {listShyqr} from "@/api/homesteadSurvey/shyqr";
import {listZjdzd,getZjdzd,updateZjdzd,addZjdzd,uploadFile} from "@/api/homesteadSurvey/zjdzd";
export default {
import {listZjdzd,getZjdzd,updateZjdzd,addZjdzd,uploadFile,getQueryLand} from "@/api/homesteadSurvey/zjdzd";
import MapGisDrawing from "@/components/Map/MapGisDrawing";
import {listZrz,getZrzZjdDmList} from "@/api/homesteadSurvey/zrz";
import {listFsss,getFsssZjdDmList} from "@/api/homesteadSurvey/fsss";
import { listTown, getTown } from "@/api/homesteadSurvey/town";
import { listVillage} from "@/api/homesteadSurvey/village";


export default {
name: "homesteadAdd", name: "homesteadAdd",
components: { MapGisDrawing,},
data() { data() {
return { return {
active:1, active:1,
@@ -1345,7 +1358,7 @@
this.getZjd() this.getZjd()
}, },
mounted(){ mounted(){
this.mapClickLoading();
}, },
methods: { methods: {
// 图片上传前 // 图片上传前
@@ -1503,15 +1516,18 @@
}, },
showPopupzrz() { showPopupzrz() {
this.showzrz = true; this.showzrz = true;
this.mapClickLoading();
}, },
showPopupfw() { showPopupfw() {
this.showfw = true; this.showfw = true;
}, },
showPopupfsss() { showPopupfsss() {
this.showfsss = true; this.showfsss = true;
this.mapClickLoading();
}, },
showPopup3() { showPopup3() {
this.show3 = true; this.show3 = true;
this.mapClickLoading();
}, },
onSubmit(values) { onSubmit(values) {
console.log('submit', values); console.log('submit', values);
@@ -1529,7 +1545,18 @@
}else{ }else{
this.active=1 this.active=1
} }
}
},
//地图加载js------start
mapClickLoading(){
setTimeout(() => {
this.$refs.drewingClickLoading.drawingPaceCountryDarw();
}, 500);
},
/** 查找地图中定位点 */
MapTag: function (data) {
this.form.theGeom = data;
},
//地图加载js------end
} }
} }
</script> </script>


Write Preview
Loading…
Откажи
Сачувај