Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
e8b9df8d by 杨威
Options

工具条编辑

1 parent 249e134b
Expand all
Inline Side-by-side
Showing 30 changed files with 980 additions and 310 deletions
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.eot?t=1501489744354'); /* IE9*/
src: url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.eot?t=1501489744354#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.woff?t=1501489744354') format('woff'), /* chrome, firefox */
url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.ttf?t=1501489744354') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.svg?t=1501489744354#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tuichu:before { content: "\e604"; }
.icon-fanhui:before { content: "\e608"; }
.icon-facebook:before { content: "\e60e"; }
.icon-twitter:before { content: "\e60f"; }
.icon-xiangyou:before { content: "\e609"; }
.icon-right:before { content: "\e60a"; }
.icon-fanhui1:before { content: "\e60b"; }
.icon-fenxiang:before { content: "\e632"; }
.icon-xiangxia:before { content: "\e605"; }
.icon-xiangxia1:before { content: "\e606"; }
.icon-xiangxia2:before { content: "\e607"; }
.icon-suofang:before { content: "\e677"; }
.icon-chexiao:before { content: "\e688"; }
.icon-esc:before { content: "\e629"; }
.icon-chexiao1:before { content: "\e675"; }
.icon-iconfont:before { content: "\e631"; }
.icon-suoding:before { content: "\e633"; }
.icon-bianji:before { content: "\e636"; }
.icon-shoucang2:before { content: "\e638"; }
.icon-xinjian:before { content: "\e639"; }
.icon-shoucang1:before { content: "\e63a"; }
.icon-gongkai:before { content: "\e63b"; }
.icon-gouwuche1:before { content: "\e63c"; }
.icon-zhongwen:before { content: "\e63f"; }
.icon-shangchuan:before { content: "\e640"; }
.icon-yingwen:before { content: "\e641"; }
.icon-gouwuche2:before { content: "\e642"; }
.icon-shanchu:before { content: "\e643"; }
.icon-xiazai:before { content: "\e644"; }
.icon-sousuo:before { content: "\e645"; }
.icon-dashang:before { content: "\e634"; }
.icon-xiangmu:before { content: "\e635"; }
.icon-fuzhidaima1:before { content: "\e646"; }
.icon-wofaqi:before { content: "\e647"; }
.icon-xiangmuchengyuan:before { content: "\e648"; }
.icon-gengduo:before { content: "\e649"; }
.icon-wocanyu:before { content: "\e64a"; }
.icon-lishi:before { content: "\e64b"; }
.icon-piliang:before { content: "\e64c"; }
.icon-shijian:before { content: "\e64d"; }
.icon-gonggao:before { content: "\e652"; }
.icon-weixin:before { content: "\e653"; }
.icon-weibo:before { content: "\e654"; }
.icon-gerenzhanghu:before { content: "\e637"; }
.icon-tianjiachengyuan:before { content: "\e63d"; }
.icon-soutubiao:before { content: "\e63e"; }
.icon-souren:before { content: "\e655"; }
.icon-yuzhanghao:before { content: "\e656"; }
.icon-biaoqing:before { content: "\e657"; }
.icon-qq:before { content: "\e658"; }
.icon-weibo1:before { content: "\e659"; }
.icon-zuoxuan:before { content: "\e65a"; }
.icon-fangda2:before { content: "\e65b"; }
.icon-zuo2:before { content: "\e65c"; }
.icon-suoxiao:before { content: "\e65d"; }
.icon-you2:before { content: "\e65e"; }
.icon-suoxiao2:before { content: "\e65f"; }
.icon-youxuan2:before { content: "\e660"; }
.icon-zuo:before { content: "\e661"; }
.icon-zuoxuan2:before { content: "\e662"; }
.icon-shang:before { content: "\e663"; }
.icon-shang2:before { content: "\e664"; }
.icon-youxuan:before { content: "\e665"; }
.icon-xia2:before { content: "\e666"; }
.icon-fangda:before { content: "\e667"; }
.icon-xia:before { content: "\e668"; }
.icon-you:before { content: "\e669"; }
.icon-zhuanrang:before { content: "\e66a"; }
.icon-dianzan:before { content: "\e66b"; }
.icon-huifu:before { content: "\e66c"; }
.icon-saoyisao:before { content: "\e66d"; }
.icon-shuoming:before { content: "\e600"; }
.icon-jinggao:before { content: "\e601"; }
.icon-jieshi:before { content: "\e602"; }
.icon-youxiang:before { content: "\e603"; }
.icon-guanbi:before { content: "\e60c"; }
.icon-qunzhu:before { content: "\e60d"; }
.icon-fuzhichenggong:before { content: "\e611"; }
.icon-weijiaru:before { content: "\e612"; }
.icon-daishenhe:before { content: "\e613"; }
.icon-shenhetongguo:before { content: "\e614"; }
.icon-shenhejujue:before { content: "\e615"; }
.icon-xinjiantubiaoku:before { content: "\e616"; }
.icon-tubiaoku:before { content: "\e617"; }
.icon-gouwuche:before { content: "\e618"; }
.icon-huidingbu:before { content: "\e619"; }
.icon-dianzan1:before { content: "\e61a"; }
.icon-morentouxiang:before { content: "\e610"; }
.icon-paixu:before { content: "\e61b"; }
.icon-wenjian:before { content: "\e61c"; }
.icon-github:before { content: "\e61d"; }
.icon-yuzhanghao1:before { content: "\e61e"; }
.icon-weibo2:before { content: "\e61f"; }
.icon-you1:before { content: "\e620"; }
.icon-zuo1:before { content: "\e621"; }
.icon-shang1:before { content: "\e622"; }
.icon-iconfont1:before { content: "\e623"; }
.icon-gonggaodayi:before { content: "\e625"; }
.icon-gongnengjieshao:before { content: "\e626"; }
.icon-tubiaohuizhi:before { content: "\e627"; }
.icon-daimayingyong:before { content: "\e628"; }
.icon-zhifubao:before { content: "\e624"; }
.icon-alibaba:before { content: "\e62a"; }
.icon-xiaomi:before { content: "\e62b"; }
.icon-zhongguodianxin:before { content: "\e62c"; }
.icon-tianmao:before { content: "\e62d"; }
.icon-alimama:before { content: "\e62e"; }
.icon-zhubajie:before { content: "\e62f"; }
.icon-tengxunwang:before { content: "\e630"; }
.icon-aliyun:before { content: "\e64e"; }
.icon-taobaowang:before { content: "\e64f"; }
.icon-anzhuo:before { content: "\e650"; }
.icon-ios:before { content: "\e651"; }
.icon-pcduan:before { content: "\e670"; }
.icon-qingchu:before { content: "\e673"; }
.icon-huizhiguize:before { content: "\e66e"; }
.icon-zhizuoliucheng:before { content: "\e66f"; }
.icon-fuzhidaima:before { content: "\e671"; }
.icon-fankui1:before { content: "\e672"; }
.icon-weitijiao:before { content: "\e674"; }
.icon-chexiao2:before { content: "\e676"; }
\ No newline at end of file
This diff could not be displayed because it is too large.
......@@ -6,11 +6,102 @@
"description": "",
"glyphs": [
{
"icon_id": "554437",
"icon_id": "19104781",
"name": "查询",
"font_class": "chaxun",
"unicode": "e78a",
"unicode_decimal": 59274
},
{
"icon_id": "19104783",
"name": "展开",
"font_class": "zhankai1",
"unicode": "e78b",
"unicode_decimal": 59275
},
{
"icon_id": "19104784",
"name": "缓冲分析",
"font_class": "huanchongfenxi",
"unicode": "e78c",
"unicode_decimal": 59276
},
{
"icon_id": "19104785",
"name": "位置",
"font_class": "weizhi",
"unicode": "e78d",
"unicode_decimal": 59277
},
{
"icon_id": "19104786",
"name": "重叠分析",
"font_class": "zhongdiefenxi",
"unicode": "e78e",
"unicode_decimal": 59278
},
{
"icon_id": "19104787",
"name": "专题树",
"font_class": "zhuantishu",
"unicode": "e78f",
"unicode_decimal": 59279
},
{
"icon_id": "19104791",
"name": "收缩",
"font_class": "shousuo",
"unicode": "e790",
"unicode_decimal": 59280
},
{
"icon_id": "19104774",
"name": "不动产单元号",
"font_class": "budongchandanyuanhao",
"unicode": "e788",
"unicode_decimal": 59272
},
{
"icon_id": "19104775",
"name": "宗地代码",
"font_class": "zongdidaima",
"unicode": "e789",
"unicode_decimal": 59273
},
{
"icon_id": "19104764",
"name": "多屏对比",
"font_class": "duopingduibi",
"unicode": "e784",
"unicode_decimal": 59268
},
{
"icon_id": "19104765",
"name": "坐标定位",
"font_class": "zuobiaodingwei",
"unicode": "e785",
"unicode_decimal": 59269
},
{
"icon_id": "19104766",
"name": "空间查询",
"font_class": "kongjianchaxun",
"unicode": "e786",
"unicode_decimal": 59270
},
{
"icon_id": "19104767",
"name": "行政区导航",
"font_class": "hangzhengqudaohang",
"unicode": "e787",
"unicode_decimal": 59271
},
{
"icon_id": "19073499",
"name": "地球",
"font_class": "iconset0403",
"unicode": "e71a",
"unicode_decimal": 59162
"font_class": "diqiu",
"unicode": "e783",
"unicode_decimal": 59267
},
{
"icon_id": "19005628",
......
{
"pointSymbol": {
"bufferSymbol": {
"type": "simple-marker",
"style": "circle",
"color": "black",
"size": "8px",
"outline": {
"color": [ 255, 255, 0 ],
"width": 1
}
}
},
"lineSymbol": {
......@@ -32,6 +41,24 @@
"color": "#006cff",
"width": 2
}
},
"bufferSymbol": {
"type": "simple-fill",
"color": [ 86,81, 81, 0.5 ],
"style": "solid",
"outline": {
"color": [45,44,44,1],
"width": 2
}
},
"bufferGeoSymbol": {
"type": "simple-fill",
"color": [ 86,81, 81, 0.5 ],
"style": "solid",
"outline": {
"color": [45,44,44,1],
"width": 0
}
}
}
}
\ No newline at end of file
......
[{
"label":"专题树",
"id":"1",
"type":"layerGroup",
"children":[
{
"label":"西安市阎良区",
"id":"1-1",
"type":"layerGroup",
"children":[{
"label":"行政区划",
"id":"1-1-1",
"type":"layerGroup",
"children":[
{
"label":"行政区界限",
"id":"1-1-1-1",
"type":"layer",
"layerId":20,
"children":null
},
{
"label":"行政区",
"id":"1-1-1-2",
"type":"layer",
"layerId":19,
"children":null
}
]
},
{
"label":"地籍分区",
"id":"1-1-2",
"type":"layerGroup",
"children":[
{
"label":"地籍区",
"id":"1-1-2-1",
"type":"layer",
"layerId":13,
"children":null
},
{
"label":"地籍子区",
"id":"1-1-2-2",
"type":"layer",
"layerId":14,
"children":null
}
]
},
{
"label":"不动产单元",
"id":"1-1-3",
"type":"layerGroup",
"children":[
{
"label":"线状定着物",
"id":"1-1-3-1",
"type":"layer",
"layerId":7,
"children":null
},
{
"label":"宗海",
"id":"1-1-3-2",
"type":"layer",
"layerId":9,
"children":null
},
{
"label":"宗地",
"id":"1-1-3-3",
"type":"layer",
"layerId":8,
"children":null
},
{
"label":"林权",
"id":"1-1-3-4",
"type":"layer",
"layerId":5,
"children":null
},
{
"label":"构筑物",
"id":"1-1-3-5",
"type":"layer",
"layerId":2,
"children":null
},
{
"label":"面状定着物",
"id":"1-1-3-6",
"type":"layer",
"layerId":6,
"children":null
},
{
"label":"界址线",
"id":"1-1-3-7",
"type":"layer",
"layerId":4,
"children":null
},
{
"label":"点状定着物",
"id":"1-1-3-8",
"type":"layer",
"layerId":1,
"children":null
},
{
"label":"自然幢",
"id":"1-1-3-9",
"type":"layer",
"layerId":10,
"children":null
},
{
"label":"界址点",
"id":"1-1-3-10",
"type":"layer",
"layerId":4,
"children":null
}
]
},
{
"label":"自然地理",
"id":"1-1-4",
"type":"layerGroup",
"children":[
{
"label":"辅助面",
"id":"1-1-4-1",
"type":"layer",
"layerId":15,
"children":null
},
{
"label":"植被",
"id":"1-1-4-2",
"type":"layer",
"layerId":17,
"children":null
},
{
"label":"水系",
"id":"1-1-4-3",
"type":"layer",
"layerId":16,
"children":null
}
]
}
]
}]
}]
\ No newline at end of file
......@@ -151,9 +151,6 @@ ol, ul { list-style:none; }
border-bottom: 1px solid #F1F1F1;
background: #6f94f5;
}
.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close{
color: #fff;
}
.el-dialog__title{
line-height: 24px;
font-size: 18px;
......@@ -227,6 +224,34 @@ ol, ul { list-style:none; }
right: 6px;
top: 4px;
}
// 增删操作按钮样式
.addMinus{
border-radius:50%;
width: 30px !important;
height: 30px !important;
font-size: 22px!important;
padding: 4px 6px;
}
.outAdd,.outAdd:hover:focus{
background-color: #2FA5FF!important;
border: 1px solid #2FA5FF!important;
color: #fff!important;
}
.inAdd,.inAdd:hover:focus{
border: 1px solid #2FA5FF!important;
background-color: #fff!important;
color: #2FA5FF!important;
}
.outMinus,.outMinus:hover:focus{
background-color: #FA6400!important;
border: 1px solid #FA6400!important;
color: #fff!important;
}
.inMinus,.inMinus:hover:focus{
border: 1px solid #FA6400!important;
background-color: #fff!important;
color: #FA6400!important;
}
.import{
background-color: #00CACD!important;
border-color: #00CACD!important;
......
......@@ -137,6 +137,7 @@ export default {
},
methods: {
itemClick(item) {
debugger;
let self = this;
// 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
clearTimeout(self.time);
......@@ -160,9 +161,7 @@ export default {
case '/search':
source = '0,1,2'
break;
case '/manage':
source = '0,1,2'
break;
default:
break;
}
......
......@@ -523,7 +523,7 @@ export default {
//当确定导入图形是 跳转到图形界面
this.queryGeoByBsm(BSM,type,function (features){
if(features && features.length > 0){
if(features[0].geometry){
if(features[0].geometry && features[0].geometry.rings.length > 0){
self.$confirm('该条数据有地块信息，是否继续导入?', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
......
......@@ -165,7 +165,9 @@ export default {
if(layer){
var graphics = layer.graphics;
if(graphics.length > 0 && graphics.items[0].attributes.BSM == bsm){
view.extent = graphics.items[0].geometry.extent;
// view.extent = graphics.items[0].geometry.extent;
view.center = graphics.items[0].geometry.extent.center;
view.zoom = 15;
}
}else {
this.$message.warning("暂无图形信息！！！");
......@@ -323,7 +325,9 @@ export default {
layer.add(graphic);
var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
extent.spatialReference = view.spatialReference;
view.extent = extent;
// view.extent = extent;
view.center = extent.center;
view.zoom = 15;
}).catch(err => {
console.log(err);
......@@ -493,7 +497,9 @@ export default {
var graphic = features[0];
graphic.symbol = symbol;
layer.add(graphic);
view.extent = graphic.geometry.extent;
// view.extent = graphic.geometry.extent;
view.center = graphic.geometry.extent.center;
view.zoom = 15;
}).catch( err => {
thow(err);
})
......
<template>
<div>
<div id="changemap">
<div v-for="(n,i) in layerArr" :key="i">
<div :title="n.text" @click="change(i,n.basemap)">
<img :src="require('../../assets/images/map/'+n.img)" />
<span></span>
<span></span>
<span></span>
<span></span>
<span>{{n.text}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
viewId:{
type:String,
default:""
}
},
data() {
return {
layerArr: [
{
img: "shiliang.png",
text: "矢量图",
basemap: '' //hybrid img
},
{
img: "yingxiang.png",
text: "影像图",
basemap: 'hybrid' //hybrid img
}
]
};
},
methods: {
change(index, basemap) {
debugger
/*var view = maps.threeDView,map = null;
if(view){
map = view.map;
}else {
console.log("mapView不存在");
}
map.basemap = basemap; // streets
index > 0 && this.layerArr.unshift(this.layerArr.splice(index, 1)[0]);*/
}
}
};
</script>
<style scoped>
#changemap {
/* background-color: #0ff; */
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: flex-start;
max-width: 75px;
max-height: 75px;
overflow: auto;
}
#changemap > div {
width: 75px;
height: 75px;
box-sizing: border-box;
padding: 5px;
}
#changemap:hover {
max-width: 300px;
max-height: 300px;
transition: max-height 0.3s linear 0s;
}
#changemap > div > div {
height: 100%;
width: 100%;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
cursor: pointer;
}
#changemap > div > div > img {
height: 100%;
width: 100%;
display: block;
}
#changemap > div > div > span {
transition: all 0.4s linear 0s;
position: absolute;
height: 50%;
width: 50%;
background-color: rgba(0, 0, 0, 0.4);
}
#changemap > div > div > span:nth-of-type(1) {
top: 0px;
left: 0px;
}
#changemap > div > div > span:nth-of-type(2) {
top: 0px;
right: 0px;
}
#changemap > div > div > span:nth-of-type(3) {
bottom: 0px;
left: 0px;
}
#changemap > div > div > span:nth-of-type(4) {
bottom: 0px;
right: 0px;
}
#changemap > div > div > span:nth-of-type(5) {
width: 100%;
height: 30%;
bottom: 0px;
left: 0px;
color: #fafafa;
overflow: hidden;
/* text-align: center; */
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
#changemap > div > div:hover span:nth-of-type(1) {
left: -50%;
top: -50%;
}
#changemap > div > div:hover span:nth-of-type(2) {
top: -50%;
right: -50%;
}
#changemap > div > div:hover span:nth-of-type(3) {
bottom: -50%;
left: -50%;
}
#changemap > div > div:hover span:nth-of-type(4) {
bottom: -50%;
right: -50%;
}
</style>
......@@ -32,7 +32,7 @@ export default{
}else if(typeof parames[i].value == 'number'){
where += parames[i].name + " =" + parames[i].value ;
}else{
where += parames[i].name + " =" + "'" + parames[i].value +"'";
where += parames[i].name + " like " + "'%" + parames[i].value +"%'";
}
}
} else {
......
......@@ -325,17 +325,18 @@
/*border: 1px solid red;*/
}
.log-search{
margin-top: 10px;
padding-left: 15px;
padding-top: 20px;
width: 100%;
border: 1px solid #E6E6E6;
height: 80px;
border: 1px solid #a8adad;
height: 60px;
background-color: white;
box-sizing: border-box;
padding: 20px 15px;
}
.log-detail{
margin-top: 10px;
width: 100%;
border: 1px solid #E6E6E6;
border: 1px solid #a8adad;
height: 900px;
overflow: scroll;
background-color: white;
......@@ -346,7 +347,7 @@
float: left;
height: 900px;
overflow: scroll;
border-right: 1px solid #E6E6E6;
border-right: 1px solid #a8adad;
}
.log-table{
......
......@@ -181,17 +181,18 @@
/*border: 1px solid red;*/
}
.log-search{
margin-top: 10px;
padding-left: 15px;
padding-top: 20px;
width: 100%;
border: 1px solid #E6E6E6;
height: 80px;
border: 1px solid #a8adad;
height: 60px;
background-color: white;
box-sizing: border-box;
padding: 20px 15px;
}
.log-table{
margin-top: 10px;
width: 100%;
border: 1px solid #E6E6E6;
border: 1px solid #a8adad;
}
.el-button {
width: 100px;
......
......@@ -506,6 +506,7 @@ export default {
},
//切换房屋状态
handleChoosedH(bsms,color) {
debugger
//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
this.$refs.lpbContent.choosedList = [];
this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
......
......@@ -5,8 +5,21 @@
</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>
<!--搜索弹出框-->
<el-input placeholder="请输入宗地代码或不动产单元号" clearable @focus = "isShowCondition = true" v-model="inputBsm"> <el-button slot="append" type="primary" icon="el-icon-search" @click="doSearch"></el-button> </el-input>
<!-- 搜索条件选择 -->
<div class="searchCondition" v-if="isShowCondition">
<ul>
<li @click="fieldName = 'ZDDM'">
<i class="iconfont iconzongdidaima"></i>
<span>宗地代码</span>
</li>
<li @click="fieldName = 'BDCDYH'">
<i class="iconfont iconbudongchandanyuanhao"></i>
<span>不动产单元号</span>
</li>
</ul>
</div>
<!--搜索弹出框-->
<div class="searchResult" v-show="dialogVisible">
<div class="-header">
<span class="title">地块信息</span>
......@@ -15,7 +28,7 @@
</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<div slot="header" class="clearfix" v-show="resultLayers.length > 1">
<!-- 图层选择-->
<span class="formTitle">图层选择:</span>
<el-select v-model="selectResLayerId" size="mini" @change="selectLayerChange" placeholder="请选择">
......@@ -35,15 +48,45 @@
<a href="#" @click="toMap(item)">缩放至</a>
</P>
<hr />
<div class="contentItem" v-for="(value,key,index) in item.attributes" :key="index">
<!-- <div class="contentItem" v-for="(value,key,index) in item.attributes" :key="index">
<span class="key">{{key}}：</span>
<span class="value" :title="value">{{value == 'Null' ?"":value}}</span>
</div>
</div> -->
<div class="contentItem">
<span class="key">宗地代码：</span>
<span class="value" :title="item.attributes['宗地代码']">{{item.attributes['宗地代码'] == 'Null'?"":item.attributes['宗地代码']}}</span>
</div>
<div class="contentItem">
<span class="key">不动产单元号：</span>
<span class="value" :title="item.attributes['不动产单元号']">{{item.attributes['不动产单元号'] == 'Null'?"":item.attributes['不动产单元号']}}</span>
</div>
<div class="contentItem">
<span class="key">项目名称：</span>
<span class="value" :title="item.attributes['项目名称']">{{item.attributes['项目名称'] == 'Null'?"":item.attributes['项目名称']}}</span>
</div>
<div class="contentItem">
<span class="key">不动产证号：</span>
<span class="value" :title="item.attributes['不动产证号']">{{item.attributes['不动产证号'] == 'Null'?"":item.attributes['不动产证号']}}</span>
</div>
<div class="contentItem">
<span class="key">权利人：</span>
<span class="value" :title="item.attributes['权利人']">{{item.attributes['权利人'] == 'Null'?"":item.attributes['权利人']}}</span>
</div>
<div class="contentItem">
<span class="key">坐落：</span>
<span class="value" :title="item.attributes['坐落']">{{item.attributes['坐落'] == 'Null'?"":item.attributes['坐落']}}</span>
</div>
</div>
</el-card>
</div>
</div>
<!-- 侧边栏 -->
<div class="rightSide">
<side-tools :viewId="viewId"></side-tools>
</div>
<div class="changeMap">
<ChangeMap :viewId="viewId"></ChangeMap>
</div>
</div>
</template>
<script>
......@@ -54,12 +97,17 @@ 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'
import ChangeMap from "@/components/map/ChangeMap";
import sideTools from "./mapWeight/sideTools.vue"
export default {
inject:['getRightTree','getTreeByBsm'],
components:{
EsriMap,
MapTools
MapTools,
ChangeMap,
sideTools
},
data(){
return{
......@@ -71,7 +119,9 @@ export default {
resultLayers:[],
results:[],
inputBsm:"",
heighGraphic:null
fieldName:"BDCDYH",
heighGraphic:null,
isShowCondition:false
}
},
mixins:[mapLayerManager,findTask],
......@@ -96,7 +146,9 @@ export default {
addLayer(){
var self = this;
var view = maps[this.viewId];
view.ui.remove('zoom');
// view.ui.remove('zoom');
view.ui.remove("attribution");
view.ui.move(["zoom"], "bottom-right");
loadModules([
"esri/layers/MapImageLayer"
]).then(([
......@@ -153,15 +205,31 @@ export default {
},
//属性查询
doSearch(){
this.closeResultDialog();
var self = this;
if(!this.inputBsm){
this.$message.warning(" 请输入标识码!!!");
return;
}else if(this.inputBsm.length != 32){
this.$message.warning("标识码格式输入有误!!!");
return;
}
this.findByPro(this.layerUrl,[8,10],'BSM',this.inputBsm,true,function (res) {
if(!this.fieldName){
this.$message.warning(" 请选择要查询的字段!!!");
return;
}
if(this.fieldName == 'ZDDM'){
if(!this.inputBsm){
this.$message.warning("请输入宗地代码!!!");
return;
}else if(this.inputBsm.length != 19){
this.$message.warning("输入宗地代码有误，请重新输入!!!");
return;
}
} else if(this.fieldName == 'BDCDYH'){
if(!this.inputBsm){
this.$message.warning("请输入不动产单元号!!!");
return;
}else if(this.inputBsm.length != 28){
this.$message.warning("输入不动产单元有误，请重新输入!!!");
return;
}
}
this.isShowCondition = false;
this.findByPro(this.layerUrl,[8,10],this.fieldName,this.inputBsm,true,function (res) {
var resultes = res.results;
if(resultes && resultes.length > 0){
self.delIdentifyData(resultes);
......@@ -193,6 +261,9 @@ export default {
self.features = [];
self.resultLayers = [];
this.heighGraphic = null;
//清除查询图层
this.clearSearchLayer(this.viewId);
for(var i = 0;i < data.length;i++){
var layerId = data[i].layerId;
var layer = self.getLayerById(layerId);
......@@ -232,6 +303,8 @@ export default {
}
}
}
self.selectResLayerId = self.resultLayers.length > 0 ? self.resultLayers[0].id : null;
this.selectLayerChange();
this.addSearchResultToMap(this.results,this.viewId);
},
getLayerById(layerId){
......@@ -259,18 +332,52 @@ export default {
position: absolute;
top: 12px;
z-index: 99;
right: 5px;
right: 21px;
}
.searchDiv{
position: absolute;
top: 12px;
left: 7px;
width: 30%;
width: 25%;
max-height: 100%;
/deep/ .el-input-group__append{
background-color: #409eff;
color: white;
}
.searchCondition{
width: 100%;
line-height: 60px;
background-color: #FFFFFF;;
border-radius: 4px;
margin-top: 6px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12);
ul{
//height: 40px;
display: inline-flex;
width: 100%;
li{
width: 50%;
text-align: center;
}
li :hover{
cursor:pointer
}
}
i{
font-size: 24px;
margin-right: 3px;
}
span{
font-size: 14px;
color: #4A4A4A;
}
.iconzongdidaima{
color: #44AEFF;
}
.iconbudongchandanyuanhao{
color: #F39835;
}
}
.searchResult{
margin-top: 3px;
background: white;
......@@ -319,12 +426,14 @@ export default {
display: flex;
font-size: 14px;
width: 100%;
line-height: 23px;
line-height: 30px;
align-items: center;
font-weight: 400;
.key{
width: 30%;
margin: 5px 3px;
text-align: right;
color: #505050;
}
.value{
width: 70%;
......@@ -332,6 +441,7 @@ export default {
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;
color: #999999;
}
}
......@@ -342,5 +452,18 @@ export default {
}
}
}
.changeMap{
position: absolute;
bottom: 8px;
right: 52px;
}
.rightSide{
position: absolute;
top: 10%;
right: 21px;
}
/deep/ .esri-ui-bottom-right{
bottom: -17px;
}
}
</style>
\ No newline at end of file
......
import layers from '@/assets/json/layers.json'
import layers from '@/assets/json/layers.json'
import graphicSymbol from '@/assets/json/graphicSymbol.json'
import queryUtils from "@libs/map/queryUtils";
import {loadModules} from "esri-loader"
......@@ -56,7 +56,9 @@ export default {
var graphic = features[0];
graphic.symbol = symbol;
layer.add(graphic);
view.extent = graphic.geometry.extent;
// view.extent = graphic.geometry.extent;
view.center = graphic.geometry.extent.center;
view.zoom = 15;
}).catch( err => {
thow(err);
})
......@@ -124,6 +126,37 @@ export default {
item.removeAll();
}
});
}
},
//给默认加载矢量图形中添加或者移除图层
addSublayers(viewId,layers){
var view = maps[viewId],
layer = view.map.findLayerById("testLayer");
for(var i = 0;i < layers.length;i++){
var sublayer = layer.findSublayerById(layers[i].layerId);
if(sublayer){
sublayer.visible = true;
}else{
sublayer = {
id:layers[i].layerId,
visible:true
}
layer.sublayers.push(sublayer);
}
}
},
removeSublayer(viewId,layers){
var view = maps[viewId],
layer = view.map.findLayerById("testLayer");
var items = layer.sublayers.items;
for(var i = 0;i < layers.length;i++){
for (var k = 0;k<items.length;k++) {
if(layers[i].layerId == items[k].id){
items.splice(k, 1);
break;
}
}
}
layer.sublayers = items;
}
}
}
\ No newline at end of file
......
import {loadModules} from 'esri-loader'
import {maps} from '@/libs/map/mapUtils'
import graphicSymbol from '@/assets/json/graphicSymbol.json'
import point from "shapefile/shp/point";
import queryUtils from "@libs/map/queryUtils";
import layers from '@/assets/json/layers.json'
import arcgisParser from 'terraformer-arcgis-parser'
import wktParse from 'terraformer-wkt-parser'
export default {
methods:{
getLayerByName(name) {
for (var i = 0; i < layers.length; i++) {
if (layers[i].layerName == name) {
return layers[i];
}
}
return null;
},
//创建buffer图形
createBuffer(geometry,distance,viewId,callBackFunction){
loadModules([
"esri/geometry/geometryEngine",
"esri/Graphic",
"esri/layers/GraphicsLayer"
]).then(([
geometryEngine,
Graphic,
GraphicsLayer
])=>{
var view = maps[viewId];
var bufferGeometry = geometryEngine.buffer(geometry,distance,'meters',true);
var layer = view.map.findLayerById("identifyLayer");
if(layer){
layer.removeAll();
}else {
layer = new GraphicsLayer({
id:"identifyLayer"
})
view.map.add(layer);
}
var symbol = geometry.type == 'point' ? graphicSymbol.pointSymbol.bufferSymbol : graphicSymbol.fillSymbol.bufferSymbol;
var oldGraphic = new Graphic({
geometry:geometry,
symbol:symbol
})
layer.add(oldGraphic);
var graphic = new Graphic({
geometry:bufferGeometry,
symbol:graphicSymbol.fillSymbol.bufferGeoSymbol
})
layer.add(graphic);
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(bufferGeometry);
}
}).catch(err => {
console.log(err);
})
},
queryAttributes(url,where,callbackFunction){
queryUtils.methods.queryByWhere(url,where,null,false,"",null,function (res) {
var features = res.features;
if(callbackFunction && typeof callbackFunction == 'function'){
callbackFunction(features);
}
})
},
//清除缓冲图层
clearBufferLayer(viewId){
var view = maps[viewId];
var layer = view.map.findLayerById("identifyLayer");
if(layer){
layer.removeAll();
}
},
//查询地籍区/地籍子区根据区域代码
queryDjqByDm(url,type,dm,callBackFunction){
var where = "";
if(type == 'djq'){
where = {"DJQDM":dm}
}else if(type == 'djzq'){
where = {"DJZQDM":dm}
}
queryUtils.methods.queryByWhere(url,where,null,true,"","",function (res) {
var features = res.features;
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(features);
}
});
},
parseWktToArc(wkt){
var primitive = wktParse.parse(wkt);
/*if(primitive.type == "MultiPolygon"){
primitive.type = "Polygon"
}*/
return arcgisParser.convert(primitive)
},
//添加添加元素和覆盖的元素到地图上
addOverLayer(geometry){
var view = maps["testMap"];
loadModules([
"esri/Graphic",
"esri/geometry/Polygon",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngineAsync",
"esri/geometry/Extent"
]).then(([
Graphic,
Polygon,
GraphicsLayer,
geometryEngineAsync,
Extent
])=>{
var graphic = new Graphic({
geometry:geometry
})
var layer = view.map.findLayerById("identifyLayer");
if(layer){
layer.removeAll();
}else {
layer = new GraphicsLayer({
id:"overLayer"
})
view.map.add(layer);
}
var impotSymbol = graphicSymbol.fillSymbol.importSymbol;
graphic.symbol = impotSymbol;
layer.add(graphic);
var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
extent.spatialReference = view.spatialReference;
// view.extent = extent;
view.center = extent.center;
view.zoom = 15;
}).catch(err => {
console.log(err);
})
},
}
}
\ No newline at end of file
<template>
<div>
<div class="sideTools">
<ul>
<li @click="sidePanelShow = false;currentActivate = ''">
<i class="iconfont iconshousuo"></i>
</li>
<li @click="clickSideTools('zhuantishu')" :class="currentActivate == 'zhuantishu'?'active':''">
<i class="iconfont iconzhuantishu"></i>
<span>专题树</span>
</li>
<li @click="clickSideTools('huanchongqu')" :class="currentActivate == 'huanchongqu'?'active':''">
<i class="iconfont iconhuanchongfenxi"></i>
<span>缓冲区分析</span>
</li>
<li @click="clickSideTools('chongdiefenxi')" :class="currentActivate == 'chongdiefenxi'?'active':''">
<i class="iconfont iconzhongdiefenxi"></i>
<span>重叠分析</span>
</li>
</ul>
</div>
<div class="sidePanel" v-show="sidePanelShow">
<div class="content" v-show="currentActivate == 'zhuantishu'">
<el-tree
show-checkbox
:data="layerTreeData"
node-key="id"
highlight-current
@check="checkTreeNode"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span class="setOpacity" v-if="data.type == 'layerGroup'">
<el-slider v-model="data.alpha" ref="data.id" :format-tooltip="formatTooltip" @change="alphaChange(data)"></el-slider>
</span>
</span>
</el-tree>
</div>
</div>
</div>
</template>
<script>
import layerTree from '@/assets/json/layerTreeData.json'
import mapLayerManager from './js/mapLayerManager.js'
export default{
props:{
viewId:{
type:String,
default:""
}
},
mixins:[mapLayerManager],
data(){
return{
currentActivate:"",
layerTreeData:[],
defaultSelectNodes:[19,8,10],
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",
sidePanelShow:false
}
},
mounted(){
this.layerTreeData = layerTree;
},
methods:{
checkTreeNode(treeNode,checkNodeList){
var self = this;
//先判断是选中还是取消选中
var flag = false;
for (var i = 0; i < checkNodeList.checkedNodes.length; i++) {
if (checkNodeList.checkedNodes[i].id == treeNode.id) {
flag = true;
}
}
if(flag){
if(treeNode && treeNode.children){
var ids = [];
this.getChildrens(treeNode,ids);
this.addSublayers(this.viewId,ids);
}else{
this.addSublayers(this.viewId,[treeNode]);
}
}else{
if(treeNode && treeNode.children){
var ids = [];
this.getChildrens(treeNode,ids);
this.removeSublayer(this.viewId,ids);
}else{
this.removeSublayer(this.viewId,[treeNode]);
}
}
},
//获取树节点选中的子节点
getChildrens(data, childrens) {
if (data.children) {
for (var i = 0; i < data.children.length; i++) {
if (data.children[i].children) {
childrens = this.getChildrens(data.children[i], childrens);
} else {
if(data.children[i].type == 'layer'){
childrens.push(data.children[i]);
}
}
}
}
return childrens;
},
clickSideTools(currentName){
this.currentActivate = currentName;
this.sidePanelShow = true;
},
formatTooltip(val){
return val+"%";
},
alphaChange(nodeData){
}
}
}
</script>
<style scoped lang="less">
.sideTools{
width: 35px;
background-color: #FFFFFF;
text-align: center;
padding: 3px 0px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);
border-radius: 2px;
li{
padding: 10px 0px;
border-bottom: 1px dashed #CBCBCB;
width: 25px;
margin-left: 5px;
}
li:last-child{
border: 0;
}
li :hover{
cursor:pointer
}
span{
font-size: 14px;
color: #6D7278;
}
i{
font-size: 1rem;
color: #8C8E91;
}
.active{
span,i{
color: #0091FF;
}
}
}
.sidePanel{
height: 500px;
width: 300px;
position: absolute;
background-color: #FFFFFF;
top: 0px;
right: 37px;
border-radius: 4px;
.content {
height:100%;
overflow:auto;
}
}
.custom-tree-node{
display: inline-flex;
}
.setOpacity{
width: 100px;
}
</style>
......@@ -18,6 +18,7 @@ module.exports = {
.set('@libs', resolve('src/libs'))
.set('@router', resolve('src/router'))
.set('@components', resolve('src/components'))
.set('@assets', resolve('src/assets'))
},
pluginOptions: {
'style-resources-loader': {
......@@ -43,7 +44,7 @@ module.exports = {
// ]
},
devServer: {
host: "127.0.0.1",
host: "0.0.0.0",
port: 8008,
https: false,
hotOnly: false,
......