Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
8f92fc89 by 杨威
Options

gis空间查询 属性查询展示

1 parent 1091b4a8
Inline Side-by-side
Showing 11 changed files with 620 additions and 24 deletions
......@@ -8,7 +8,7 @@
"fillSymbol": {
"defaultSymbol": {
"type": "simple-fill",
"color": [ 0,233, 245, 0.8 ],
"color": [ 0,233, 245, 0.4 ],
"style": "solid",
"outline": {
"color": "#00e9f5",
......@@ -17,7 +17,7 @@
},
"highlightSymbol": {
"type": "simple-fill",
"color": [ 245,3, 37, 0.8 ],
"color": [ 245,3, 37, 0.4 ],
"style": "solid",
"outline": {
"color": "#f50325",
......
[{
"layerName": "ZDJBXX",
"layerLabel": "宗地",
"layerUrl": "http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
"id": "8"
"id":8,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"ZDDM": "宗地代码",
"BDCDYH": "不动产单元号",
"ZDTZM": "宗地特征码",
"ZL": "坐落",
"ZDMJ": "宗地面积",
"MJDW": "面积单位",
"YT": "用途",
"DJ": "等级",
"JG": "价格",
"QLLX": "权利类型",
"QLXZ": "权利性质",
"QLSDFS": "权利设定方式",
"RJL": "容积率",
"JZMD": "建筑密度",
"JZXG": "建筑限高",
"ZDSZD": "宗地四至-东",
"ZDSZN": "宗地四至-南",
"ZDSZX": "宗地四至-西",
"ZDSZB": "宗地四至-北",
"TFH": "图幅号",
"DJH": "地籍号",
"DAH": "档案号",
"BZ": "备注",
"ZT": "状态",
"YWZT": "业务状态",
"XMMC": "项目名称",
"BGRQ": "变更日期",
"TDZH": "土地证号"
}
},
{
"layerName": "ZRZ",
"layerLabel": "自然幢",
"layerUrl": "http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
"id": "10"
"id": 10,
"fieldAliases": {
"YSDM": "要素代码",
"BDCDYH": "不动产单元号",
"ZDDM": "宗地代码",
"ZRZH": "自然幢号",
"XMMC": "项目名称",
"JZWMC": "建筑物名称",
"JGRQ": "竣工日期",
"JZWGD": "建筑物高度",
"ZZDMJ": "幢占地面积",
"ZYDMJ": "幢用地面积",
"YCJZMJ": "预测建筑面积",
"SCJZMJ": "实测建筑面积",
"ZCS": "总层数",
"DSCS": "地上层数",
"DXCS": "地下层数",
"DXSD": "地下深度",
"GHYT": "规划用途",
"FWJG": "房屋结构",
"ZTS": "总套数",
"JZWJBYT": "建筑物基本用途",
"DAH": "档案号",
"BZ": "备注",
"ZT": "状态",
"YWZT": "业务状态",
"BSM": "标识码"
}
},
{
"layerName": "DJQ",
"layerLabel": "地籍区",
"layerUrl": "http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
"id": "13"
"id": 13,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"DJQDM": "地籍区代码",
"DJQMC": "地籍区名称"
}
},
{
"layerName": "DJZQ",
"layerLabel": "地籍子区",
"layerUrl": "http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
"id": "14"
"id": 14,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"DJZQDM": "地籍子区代码",
"DJZQMC": "地籍子区名称"
}
},
{
"layerName": "XJZQ",
"layerLabel": "行政区",
"layerUrl": "http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
"id": "19"
"id": 19,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"XZQDM": "行政区代码",
"XZQMC": "行政区名称",
"XZQMJ": "行政区面积"
}
}
]
\ No newline at end of file
......
......@@ -6,6 +6,7 @@ import layers from '@/assets/json/layers.json'
import queryUtils from "@libs/map/queryUtils";
import identifyUtils from '@/libs/map/IdentifyUtils'
import {loadModules} from "esri-loader"
import featureUpdate from "@libs/map/featureUpdate";
import arcgisParser from 'terraformer-arcgis-parser'
import wktParse from 'terraformer-wkt-parser'
......@@ -199,11 +200,38 @@ export default {
if(callBacFunction && typeof callBacFunction == "function"){
callBacFunction(isJoint,message);
}
})
},true)
}).catch(err => {
console.log(err);
throw (err);
})
},
//保存或者编辑属性信息
updAttributes(bsm,type,attributes,callBackFunction){
var layer = null;
if(type == 'zd'){
layer = this.getLayerByName("ZDJBXX");
}else{
layer = this.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer","FeatureServer");
featureUrl += "/"+layer.id;
this.queryGeoByBsm(bsm,type,function (features) {
if(features && features.length > 0){
attributes.OBJECTID = features[0].attributes.OBJECTID;
features[0].attributes = attributes;
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
features[0].geometry.spatialReference = {
wkt:wkt
}
featureUpdate.methods.updateGraphic(featureUrl,features[0],callBackFunction);
}else{
var graphic = {
attributes:attributes
}
featureUpdate.methods.addGraphic(featureUrl,graphic,callBackFunction) ;
}
});
}
}
......
......@@ -3,7 +3,7 @@ import {loadModules} from 'esri-loader'
export default {
methods: {
identify(url,layerIds,geometry ,callBackFunction){
identify(url,layerIds,geometry,callBackFunction,returnGeometry,layerOption,tolerance,mapExtent){
var self = this;
loadModules([
"esri/tasks/IdentifyTask",
......@@ -20,10 +20,11 @@ export default {
if(layerIds){
identifyParameters.layerIds = layerIds;
}
identifyParameters.layerOption = "all";
identifyParameters.tolerance = 3;
identifyParameters.mapExtent = geometry.extent;
identifyParameters.returnGeometry = true;
identifyParameters.layerOption = layerOption ? layerOption : "all";
identifyParameters.tolerance = tolerance ? tolerance : 3;
identifyParameters.mapExtent = mapExtent ? mapExtent : geometry.extent;
identifyParameters.returnGeometry = returnGeometry ? returnGeometry : false;
//identifyParameters.returnFieldName = false;
identifyParameters.spatialReference = geometry.spatialReference;
identifyTask.execute(identifyParameters).then(result => {
if(callBackFunction && typeof callBackFunction == 'function'){
......
......@@ -87,15 +87,36 @@ export default {
},
delGraphic(url,graphic,callBackFunction){
loadModules([
"esri/layers/FeatureLayer"
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Polygon",
"esri/geometry/Polyline"
]).then(([
FeatureLayer
FeatureLayer,
Graphic,
Point,
Polygon,
Polyline
])=>{
var featureLayer = new FeatureLayer({
url:url
})
var geo = null;
if(graphic.geometry.type == 'point'){
geo = new Point(graphic.geometry);
}else if(graphic.geometry.type == 'polyline'){
geo = new Polyline(graphic.geometry);
}else if(graphic.geometry.type == 'polygon'){
geo = new Polygon(graphic.geometry);
}
var delGraphic = new Graphic({
attributes:graphic.attributes,
geometry:geo
});
featureLayer.applyEdits({
deleteFeatures:[graphic]
deleteFeatures:[delGraphic]
}).then(function (res){
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(res);
......
import {loadModules} from 'esri-loader'
export default {
methods:{
findByPro(url,layerIds,searchFields,searchText,returnGeometry,callBackFunction){
loadModules([
"esri/tasks/FindTask",
"esri/tasks/support/FindParameters"
]).then(([
FindTask,
FindParameters
]) => {
var findTask = new FindTask({
url:url
}),
findParameters = new FindParameters();
findParameters.returnGeometry = returnGeometry ? returnGeometry : false;
findParameters.layerIds = layerIds;
findParameters.searchFields = searchFields;
findParameters.searchText = searchText;
findTask.execute(findParameters).then(function (result) {
if(callBackFunction){
callBackFunction(result);
}
});
}).catch(err => {
throw (err);
})
}
}
}
\ No newline at end of file
......@@ -4,6 +4,46 @@
<mapTools :viewId="viewId"></mapTools>
</div>
<EsriMap :viewId = "viewId" :afterLoaderFunction="addLayer"></EsriMap>
<div class="searchDiv">
<el-input placeholder="请输入标识码" clearable v-model="inputBsm"> <el-button slot="append" type="primary" icon="el-icon-search" @click="doSearch"></el-button> </el-input>
<!--搜索弹出框-->
<div class="searchResult" v-show="dialogVisible">
<div class="-header">
<span class="title">地块信息</span>
<span class="closeButton">
<i class="close el-icon-close" @click="closeResultDialog"></i>
</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<!-- 图层选择-->
<span class="formTitle">图层选择:</span>
<el-select v-model="selectResLayerId" size="mini" @change="selectLayerChange" placeholder="请选择">
<el-option
v-for="(item,index) in resultLayers"
:key="index"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</div>
<!-- 数据结果-->
<div class="text item" v-for="(item,index) in features" :key="index">
<P>
<span class="title"><i class="iconfont iconxinxi"></i> 基本信息</span>
<a href="#" @click="toMap(item)">缩放至</a>
</P>
<hr />
<div class="contentItem" v-for="(value,key,index) in item.attributes" :key="index">
<span class="key">{{key}}：</span>
<span class="value" :title="value">{{value}}</span>
</div>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
......@@ -12,6 +52,9 @@ import MapTools from './mapWeight/mapTools'
import {loadModules} from 'esri-loader'
import {maps} from '@/libs/map/mapUtils'
import mapLayerManager from "./mapWeight/js/mapLayerManager";
import layers from '@/assets/json/layers.json'
import findTask from '@/libs/map/findTask'
export default {
components:{
EsriMap,
......@@ -20,10 +63,17 @@ export default {
data(){
return{
viewId:"testMap",
layerUrl:"http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer"
layerUrl:"http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
dialogVisible:false,
selectResLayerId:null,
features:[],
resultLayers:[],
results:[],
inputBsm:"",
heighGraphic:null
}
},
mixins:[mapLayerManager],
mixins:[mapLayerManager,findTask],
mounted(){
var query = this.$route.query;
if(query && JSON.stringify(query) != "{}"){
......@@ -34,6 +84,7 @@ export default {
addLayer(){
var self = this;
var view = maps[this.viewId];
view.ui.remove('zoom');
loadModules([
"esri/layers/MapImageLayer",
]).then(([
......@@ -60,8 +111,119 @@ export default {
}).catch(err => {
throw(err);
})
},
//缩放至
toMap(attr){
var self = this;
this.extentToGraphic(attr,this.heighGraphic,this.viewId,function () {
self.heighGraphic = attr;
});
},
//图层选择事件
selectLayerChange(){
var self = this;
var layerAndResult = this.results.filter(function (item) {
return item.layerId = self.selectResLayerId;
})
if(layerAndResult){
this.features = layerAndResult[0].features;
}
},
//属性查询
doSearch(){
var self = this;
if(!this.inputBsm){
return;
}else if(this.inputBsm.length != 19){
this.$message.warning("标识码格式输入有误!!!");
return;
}
this.findByPro(this.layerUrl,[8,10],'BSM',this.inputBsm,true,function (res) {
var resultes = res.results;
if(resultes && resultes.length > 0){
self.delIdentifyData(resultes);
if(!self.dialogVisible){
self.dialogVisible = true;
}
}else {
self.$message.warning("查询不到相关数据!!!");
}
});
},
//关闭查询结果
closeResultDialog(){
//关闭时清除查询结果 清除数据
this.results = [];
this.selectResLayerId =null;
this.features = [];
this.resultLayers = [];
this.heighGraphic = null;
//清除查询图层
this.clearSearchLayer(this.viewId);
this.dialogVisible = false;
},
//处理数据
delIdentifyData(data){
var self = this;
self.results = [];
self.selectResLayerId =null;
self.features = [];
self.resultLayers = [];
this.heighGraphic = null;
for(var i = 0;i < data.length;i++){
var layerId = data[i].layerId;
var layer = self.getLayerById(layerId);
var layerResult = self.results.filter(function (item) {
return item.layerId == layerId;
})
if(layerResult && layerResult.length > 0){
var feature = data[i].feature,
attributes = {},
fieldAliases = layer.fieldAliases;
for(var key in feature.attributes){
if(!feature.attributes[key]){
delete feature.attributes[key]
}
}
layerResult.features.push(feature);
}else{
if(layer){
this.resultLayers.push({
id:layerId,
label:layer.layerLabel
})
var layerAndResult = {
layerId:layerId,
features:[]
}
var feature = data[i].feature,
attributes = {},
fieldAliases = layer.fieldAliases;
for(var key in feature.attributes){
if(!feature.attributes[key]){
delete feature.attributes[key]
}
}
layerAndResult.features.push(feature);
self.results.push(layerAndResult);
}
}
}
this.addSearchResultToMap(this.results,this.viewId);
},
getLayerById(layerId){
var parseLayers = JSON.parse(JSON.stringify(layers));
var layer = parseLayers.filter(function (item) {
return item.id == layerId;
})
if(layer){
return layer[0];
}
return null;
},
//展示查询数据结果
}
}
</script>
......@@ -76,5 +238,86 @@ export default {
z-index: 99;
right: 5px;
}
.searchDiv{
position: absolute;
top: 12px;
left: 7px;
width: 35%;
max-height: 100%;
/deep/ .el-input-group__append{
background-color: #409eff;
color: white;
}
.searchResult{
margin-top: 3px;
background: white;
border-radius: 4px;
max-height: 80%;
.-header{
line-height: 32px;
padding: 3px 20px;
background-color: #519eff;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
.title{
font-size: 14px;
color: white;
font-weight: 600;
}
.closeButton{
float: right;
font-size: 16px;
color: black;
}
.closeButton :hover{
cursor:pointer
}
}
/deep/ .el-card__header {
padding: 10px 20px;
}
.formTitle{
margin-right: 5px;
font-size: 14px;
}
.item{
p{
margin: 0px 3px;
font-size: 14px;
.title{
}
a{
float: right;
color: #519eff
}
}
.contentItem{
display: flex;
font-size: 14px;
width: 100%;
line-height: 23px;
align-items: center;
.key{
width: 30%;
margin: 5px 3px;
text-align: right;
}
.value{
width: 70%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;
}
}
}
/deep/ .el-card__body{
max-height: 363px;
overflow: auto;
}
}
}
}
</style>
\ No newline at end of file
......
......@@ -50,7 +50,7 @@ export default {
layer = new GraphicsLayer({
id:"highlightLayer"
})
view.map.add(layer);
view.map.add(layer,5);
}
var symbol = graphicSymbol.fillSymbol.highlightSymbol;
var graphic = features[0];
......@@ -66,6 +66,61 @@ export default {
}
});
},
//将查询结果展示在地图上
addSearchResultToMap(searchResult,viewId){
var view = maps[viewId],
self = this;
loadModules([
"esri/layers/GraphicsLayer"
]).then(([
GraphicsLayer
]) => {
if(!searchResult || searchResult.length == 0){
return;
}
for(var i = 0;i < searchResult.length;i++){
var layer = view.map.findLayerById("searchResult"+searchResult.layerName);
if(layer){
layer.removeAll();
}else{
layer = new GraphicsLayer({
id:"searchResult"+searchResult.layerName
})
view.map.add(layer);
}
var symbol = graphicSymbol.fillSymbol.highlightSymbol;
var features = searchResult[i].features;
for(var j = 0;j < features.length;j++){
features[j].symbol = symbol;
layer.add(features[j]);
}
}
}).catch(err=>{
console.log(err);
})
},
//缩放至当前对象
extentToGraphic(feature,highlightGraohic,viewId,callBackFunction){
var symbol = graphicSymbol.fillSymbol.highlightSymbol;
var highlightSymbol = graphicSymbol.fillSymbol.defaultSymbol;
if(highlightGraohic){
highlightGraohic.symbol = symbol;
}
feature.symbol = highlightSymbol;
var view = maps[viewId];
view.center = feature.geometry.type == 'point' ? feature.geometry : feature.geometry.extent.center;
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction();
}
},
clearSearchLayer(viewId){
var view = maps[viewId],
layers = view.map.allLayers;
layers.filter(function (item) {
if(item.id.indexOf("searchResult") != -1){
item.removeAll();
}
});
}
}
}
\ No newline at end of file
......
......@@ -29,7 +29,11 @@ export default {
mixins:[draw,identifyUtils,measure],
data(){
return{
url:""
url:"http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
selectResLayerId:"",
features:[],
resultLayers:[],
results:[]
}
},
methods:{
......@@ -51,11 +55,16 @@ export default {
var view = maps[this.viewId];
var self = this;
this.initDraw("point",this.viewId,null,function(geo){
self.identify(self.url,[],geo,function(result){
debugger
});
self.identify(self.url,[8,10],geo,function(res){
var resultes = res.results;
if(resultes && resultes.length > 0){
self.$parent.delIdentifyData(resultes);
self.$parent.dialogVisible = true;
}
},true,'all',3,view.extent);
});
},
zoomOut(){
var view = maps[this.viewId];
this.initDraw("rectangle",this.viewId,null,function(geo){
......
......@@ -349,6 +349,8 @@
<script>
import Qlr from "../../../components/formMenu/qlr";
import Qlxz from "../../../components/formMenu/qlxz";
import {submit} from "../../../api/common"
import geoUtils from "@components/lineTree/tx/js/geoUtils";
import {
getAllList,
getDdicByMC,
......@@ -410,8 +412,54 @@ export default {
formData: {},
dpdm:'', //宗地底盘代码
curZdbsm:'',
geoAttributes:{
OBJECTID:"",
BSM:"",
YSDM:"",
ZDDM:"",
BDCDYH:"",
ZDTZM :"",
ZL:"",
ZDMJ:0,
MJDW:"",
YT:"",
DJ:"",
JG:0,
QLLX:"",
QLXZ:"",
QLSDFS:"",
RJL:0,
JZMD:0,
JZXG:0,
ZDSZD:"",
ZDSZN :"",
ZDSZX :"",
ZDSZB :"",
TFH:"",
DJH:"",
DAH:"",
BZ :"",
ZT:"",
YWZT:"",
BLID:"",
XMMC:"",
XMID:"",
BGRQ:"",
BGID:"",
BGZT:"",
TDZH:"",
QSZT:0,
BBLX:0,
SFDB:0,
QLR :"",
CUTID:"",
BHQKID:"",
DJZQDM :"",
SYQLXID:"",
}
};
},
mixins:[geoUtils],
created() {
this.curZdbsm = this.$route.query.bsm;
},
......@@ -612,6 +660,26 @@ export default {
}
})
.catch((error) => {});
//保存到空间库里面
var self = this;
for(var key in this.geoAttributes){
if(key == "BSM"){
self.geoAttributes[key] = this.$store.state.zdbsm
}else if(key == 'QLSDFS'){
var qlsdfsList = self.$store.state.qlsdfsList,value = self.formData.qlsdfs;
var qlsdfs = qlsdfsList.filter(item => {
return item.bsm == value;
})
self.geoAttributes[key] = qlsdfs[0] ? qlsdfs[0].mc:"";
}else {
var formKay = key.toLowerCase();
self.geoAttributes[key] = self.formData[formKay];
}
}
self.updAttributes(this.$store.state.zdbsm,'zd',this.geoAttributes,function (res) {
console.log("属性保存完成!!");
});
}
......
......@@ -353,6 +353,45 @@
fwjgTitleRowspan:1, //房屋结构的单元格垂直合并数量
loading:false,
source:'',
geoAttributes:{
OBJECTID:null,
YSDM:"",
BDCDYH:"",
ZDDM:"",
ZRZH:"",
XMMC:"",
JZWMC:"",
JGRQ:"",
JZWGD:"",
ZZDMJ:0,
ZYDMJ:0,
YCJZMJ:0,
SCJZMJ:0,
ZCS:0,
DSCS:0,
DXCS:0,
DXSD:0,
GHYT:"",
FWJG:"",
ZTS:0,
JZWJBYT:"",
DAH:"",
BZ:"",
ZT:"",
YWZT:"",
BLID:"",
XMID:"",
BGZT:"",
BGRQ:"",
BGID:"",
BBLX:"",
QSZT:"",
CUTID :"",
BHQKID:"",
DJZQDM:"",
ZDTZM:"",
BSM:"",
}
}
},
methods: {
......@@ -421,6 +460,20 @@
})
this.loading=false;
}
//保存到空间库里面
var self = this;
for(var key in this.geoAttributes){
if(key == "BSM"){
self.geoAttributes[key] = this.bsm
}else{
var formKay = key.toLowerCase();
self.geoAttributes[key] = self.formData[formKay];
}
}
self.updAttributes(this.bsm,'zrz',this.geoAttributes,function (res) {
console.log("属性保存完成!!");
});
}
},
......