zhangzl
/
nsgk_mobile
2
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

特效属性添加

wulanhaote
hbao 4 lat temu
rodzic
6f2a64c4ea
commit
23badf8a50
1 zmienionych plików z 394 dodań i 5 usunięć
Zunifikowany widok
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +394
    -5
      src/views/homestead/index.vue

+ 394
- 5
src/views/homestead/index.vue Wyświetl plik

@@ -243,7 +243,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="info" style="display: none"></div>
<!--房地全部信息展示--> <!--房地全部信息展示-->
<div class="landHomesteadDetails_wrap"> <div class="landHomesteadDetails_wrap">
<!---农房--> <!---农房-->
@@ -1356,11 +1356,11 @@ export default {
housingSerial(item, index) { housingSerial(item, index) {
this.selectChooseOrder = index; this.selectChooseOrder = index;
if (item.type == "house") { if (item.type == "house") {
// $("#texiao_fang").val(item.name);
// $("#texiao_fang").trigger("click");
$("#texiao_fang").val(item.name);
$("#texiao_fang").trigger("click");
} else { } else {
// $("#texiao_di").val(item.name);
// $("#texiao_di").trigger("click");
$("#texiao_di").val(item.name);
$("#texiao_di").trigger("click");
} }
}, },


@@ -1398,6 +1398,67 @@ export default {
maxZoom: 18.9, //地图放大限制 maxZoom: 18.9, //地图放大限制
}), }),
}); });
//业务图层 wfs服务 属性查询开始 ------------------start
/**
* @api wfs服务空间查询
* @param {*} wfsurl
* @param {*} srsName
* @param {*} typeName
* @param {*} drawType
* @param {option 可选} geometryField
*/

var wmsSource = new ol.source.TileWMS({
//url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
url: 'http://116.255.135.38:8080/geoserver/nsgk_hc/wms',
//url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
params: {
'LAYERS': 'nsgk_hc:nsgk_hc_all',
//'LAYERS': 'mywork_mysql:t_geo_hc_land',
'TILED':true,
SRID:3857,
serverType: 'geoserver',
crossOrigin: 'anonymous',
},
})

map.on('singleclick', function (evt) {
var aa = evt.coordinate;
map.getView().animate({
// 只设置需要的属性即可
center: [aa[0],aa[1]], // 中心点
zoom: 15, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
document.getElementById('info').innerHTML = '';
var viewResolution = map.getView().getResolution();///** @type {number} */ (view.getResolution());
var url = wmsSource.getFeatureInfoUrl(
evt.coordinate,
viewResolution,
'EPSG:3857',
{'INFO_FORMAT': 'text/html'}
);
if (url) {
fetch(url)
.then(function (response) { return response.text(); })
.then(function (html) {
document.getElementById('info').innerHTML = html;
});
}
});

map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function () {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
//属性查询结束 ------------------end
var shitu = new ol.layer.Vector({ var shitu = new ol.layer.Vector({
title: "add Layer", title: "add Layer",
source: new ol.source.Vector({ source: new ol.source.Vector({
@@ -1940,6 +2001,9 @@ export default {
} else { } else {
cun = ""; cun = "";
} }
//定位个人地图
map.removeLayer(texiao_layer_fang);
map.removeLayer(texiao_layer_di);
//删除之前加载的图层 //删除之前加载的图层
if (cun != "全部") { if (cun != "全部") {
let currObjNum = currObj[0]; let currObjNum = currObj[0];
@@ -2092,6 +2156,331 @@ export default {
}); });


//开始绘制地图 ------------------- end //开始绘制地图 ------------------- end

//特效实现
$("#texiao_fang").on("click", function () {
/**
* @api wfs服务空间查询
* @param {*} wfsurl
* @param {*} srsName
* @param {*} typeName
* @param {*} drawType
* @param {option 可选} geometryField
*/

//alert("进入分类");
//删除之前加载的图层
map.removeLayer(texiao_layer_fang);
var cunmap = _this.focusVillageOptions[0].orgCode;
var cun;
let currObj = _this.villageOptions.filter((v) => {
return v.orgCode == cunmap;
});
if (currObj.length == 1) {
cun = currObj[0].deptName;
} else {
cun = "";
}
//删除之前加载的图层
//map.removeLayer(dishitu);
//map.removeLayer(cunshitu);
//分类查询查询农地、农房
var difang;
//地的数据判断
difang = "nsgk_hc:t_geo_hc_house";
//查询条件
var cql_filter;
//村的数据判断
var val = $("#texiao_fang").val();
if (val == "") {
alert("请填写查询条件在查询");
}
//for(var i=0; i< difang.length; i++){
//cql_filter = "CM='"+cun +"'"+ "and FWSYRMC='"+query_mz.value;
cql_filter = "FWSYRMC='" + val + "' and CM='" + cun + "'";
//图层加载
//地的数据判断

//定位查询位置
let param_dw = {
srsName: "EPSG:3857",
service: "WFS",
version: "1.0.0",
request: "GetFeature",
typename: difang,
//featureNS: 'nsgk_hc',//命名空间 URI
cql_filter: cql_filter,
//featurePrefix: 'nationalwater',//工作区名称
//featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
};
let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
url_dw = url_dw + "?";
for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&";
}
url_dw = url_dw.substr(0, url_dw.length - 1);
fetch(url_dw, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
.then((res) => {
var geojsonmap = res.json();
return geojsonmap;
})
.then((data) => {
//关联查询农房信息---------------start
// document.getElementById("info").innerHTML = "";
// var select_fang = (document.getElementById("info").innerHTML =
// data.features[0].properties);
// _this.hasTable = true;
// _this.hasDateStatus = 1;
// let obj = {};
// //let trs = $("#info .featureInfo").find("tr:eq(1)");
// obj.FWSYRMC = select_fang.FWSYRMC; //房屋所有人名称
// obj.CM = select_fang.CM; //村名
// obj.CDM = select_fang.CDM; //村代码
// obj.DZ = select_fang.DZ; //地址
// obj.SFYSPSX = select_fang.SFYSPSX; //是否有审批手续
// obj.FWSYQH = select_fang.FWSYQH; //房屋所有权证号
// obj.JZMJ = select_fang.JZMJ; //建筑面积
// obj.TDZH = select_fang.TDZH; //土地证号
// obj.TDXZ = select_fang.TDXZ; //土地性质
// obj.TDMJ = select_fang.TDMJ; //土地面积
// obj.XZQK = select_fang.XZQK; //现状情况
// obj.ZLRXM = select_fang.ZLRXM; //租赁人姓名
// obj.ZLHTJZRQ = select_fang.ZLHTJZRQ; //租赁合同截止时间
// obj.ZLSYNX = select_fang.ZLSYNX; //租赁剩余年现
// obj.XZFWSFYLZY = select_fang.XZFWSFYLZY; //是否流转意向
// obj.XH = select_fang.XH; //农房编号
// _this.hasData = obj;
//关联查询农房信息---------------end
//定位结束 --------------start
//var datamap = data.bbox;
var datamap = data.features[0].bbox;
map.getView().animate({
// 只设置需要的属性即可
center: datamap, // 中心点
zoom: 18, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
//定位结束 --------------end
//特效动画实现 -----------------------------start
texiao_layer_fang = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(texiao_layer_fang);

var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
var circle = new ol.Feature({
geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
});

//var out =new ol.coordinate.Coordinate(datamap);
//var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
//var center = ol.extent.getCenter(extent); //获取边界区域的中心位置
//map.getView().setCenter(center); //设置当前地图的显示中心位置
circle.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 0,
stroke: new ol.style.Stroke({
color: "yellow",
size: 1,
}),
}),
})
);
texiao_layer_fang.getSource().addFeature(circle);

// 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
var radius = 0;
map.on("postcompose", function () {
// 增大半径，最大20
radius++;
radius = radius % 10;
// 设置样式
circle.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
stroke: new ol.style.Stroke({
color: "yellow",
size: 1,
}),
}),
})
);
});
//特效动画实现 -----------------------------end
})
.catch((error) => {
console.log("【异常】", error);
});
});
//-----------------------------------------------------------------------------特效农房加载结束 end

//-----------------------------------------------------------------------------特效农地加载开始 start
//特效实现
$("#texiao_di").on("click", function () {
/**
* @api wfs服务空间查询
* @param {*} wfsurl
* @param {*} srsName
* @param {*} typeName
* @param {*} drawType
* @param {option 可选} geometryField
*/
//alert("进入分类");
//删除之前加载的图层
map.removeLayer(texiao_layer_di);
var cunmap = _this.focusVillageOptions[0].orgCode;
var cun;
let currObj = _this.villageOptions.filter((v) => {
return v.orgCode == cunmap;
});
if (currObj.length == 1) {
cun = currObj[0].deptName;
} else {
cun = "";
}
//删除之前加载的图层
//map.removeLayer(dishitu);
//map.removeLayer(cunshitu);
//分类查询查询农地、农房
var difang;
//地的数据判断
difang = "nsgk_hc:t_geo_hc_land";
//查询条件
var cql_filter;
//村的数据判断
var val = $("#texiao_di").val();
if (val == "") {
alert("请填写查询条件在查询");
}
//for(var i=0; i< difang.length; i++){
//cql_filter = "CM='"+cun +"'"+ "and FWSYRMC='"+query_mz.value;
cql_filter = "SYRMC='" + val + "' and CM='" + cun + "'";
//图层加载

//定位查询位置
let param_dw = {
srsName: "EPSG:3857",
service: "WFS",
version: "1.0.0",
request: "GetFeature",
typename: difang,
INFO_FORMAT: "text/html",
//featureNS: 'nsgk_hc',//命名空间 URI
cql_filter: cql_filter,
//featurePrefix: 'nationalwater',//工作区名称
//featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
};
let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
url_dw = url_dw + "?";
for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&";
}
url_dw = url_dw.substr(0, url_dw.length - 1);
fetch(url_dw, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
.then((res) => {
var geojsonmap = res.json();
return geojsonmap;
})
.then((data) => {
//关联查询农地信息 ----------start
// document.getElementById("info").innerHTML = "";
// var select_di = (document.getElementById("info").innerHTML =
// data.features[0].properties);
// _this.hasTable = true;
// _this.hasDateStatus = 0;
// let obj = {};
// //let trs = $("#info").find("tr:eq(1)");
// obj.XH = select_di.XH; //序号
// obj.CM = select_di.CM; //村名
// obj.CBRMC = select_di.CBRMC; //承包人名称
// obj.SYRMC = select_di.SYRMC; //使用人名称
// obj.NYDLX = select_di.NYDLX; //农用地类型
// obj.MJ = select_di.MJ; //面积
// obj.XZQK = select_di.XZQK; //现状情况
// obj.LZHTJZRQ = select_di.LZHTJZRQ; //流转合同截止时间
// obj.LZSYNX = select_di.LZSYNX; //流转剩余年限
// obj.SFYLZYX = select_di.SFYLZYX; //是否流转意向
// obj.CDM = select_di.CDM; //村代码
// obj.org_code = select_di.org_code; //行政区化代码
// _this.hasData = obj;
//关联查询农地信息 ----------end
//获取坐标定位开始----------start
//var datamap = data.bbox;
var datamap = data.features[0].bbox;
map.getView().animate({
// 只设置需要的属性即可
center: datamap, // 中心点
zoom: 16, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
//获取坐标定位开始----------end
//特效动画实现 -----------------------------start
texiao_layer_di = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(texiao_layer_di);

var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
var circle = new ol.Feature({
geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
});

//var out =new ol.coordinate.Coordinate(datamap);
//var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
//var center = ol.extent.getCenter(extent); //获取边界区域的中心位置
//map.getView().setCenter(center); //设置当前地图的显示中心位置
circle.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 0,
stroke: new ol.style.Stroke({
color: "#ef5b9c",
size: 1,
}),
}),
})
);
texiao_layer_di.getSource().addFeature(circle);

// 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
var radius = 0;
map.on("postcompose", function () {
// 增大半径，最大20
radius++;
radius = radius % 10;
// 设置样式
circle.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
stroke: new ol.style.Stroke({
color: "#ef5b9c",
size: 1,
}),
}),
})
);
});
//特效动画实现 -----------------------------end
})
.catch((error) => {
console.log("【异常】", error);
});
});

//-----------------------------------------------------------------------------特效农地加载结束 end
}, },


/*以下删*/ /*以下删*/


Napisz Podgląd
Ładowanie…
Anuluj
Zapisz