| @@ -1,11 +1,15 @@ | |||||
| <template> | <template> | ||||
| <div class="app-container"> | <div class="app-container"> | ||||
| <!-- <div style="position: relative; z-index: 999999"> --> | |||||
| <div style="display: none"> | <div style="display: none"> | ||||
| <select id="zhen"></select> | <select id="zhen"></select> | ||||
| <select id="cun" autofocus></select> | <select id="cun" autofocus></select> | ||||
| <input id="texiao_fang" type="button" value="特效农房" /> | <input id="texiao_fang" type="button" value="特效农房" /> | ||||
| <input id="texiao_di" type="button" value="特效农地" /> | <input id="texiao_di" type="button" value="特效农地" /> | ||||
| <input id="qingchu" type="button" value="清除" /> | <input id="qingchu" type="button" value="清除" /> | ||||
| <button id="drawPolygon">绘制地图</button> | |||||
| <button id="drawRemove">清除画图</button> | |||||
| <button id="drawReset">还原之前图层</button> | |||||
| </div> | </div> | ||||
| <div class="map_area" id="mapWrap"></div> | <div class="map_area" id="mapWrap"></div> | ||||
| <!--列表 定位--> | <!--列表 定位--> | ||||
| @@ -42,6 +46,8 @@ | |||||
| class="flex_block" | class="flex_block" | ||||
| v-for="(items, index) in hcBottonHouseArr" | v-for="(items, index) in hcBottonHouseArr" | ||||
| :key="index" | :key="index" | ||||
| :class="{ active: selectChooseOrder == index }" | |||||
| @click="housingSerial(items, index)" | |||||
| > | > | ||||
| <div class="name_text">{{ items.name }}</div> | <div class="name_text">{{ items.name }}</div> | ||||
| <div class="square_text">{{ items.mj }}㎡</div> | <div class="square_text">{{ items.mj }}㎡</div> | ||||
| @@ -64,6 +70,8 @@ | |||||
| class="flex_block" | class="flex_block" | ||||
| v-for="(items, index) in hcBottonLandArr" | v-for="(items, index) in hcBottonLandArr" | ||||
| :key="index" | :key="index" | ||||
| :class="{ active: selectChooseOrder == index }" | |||||
| @click="housingSerial(items, index)" | |||||
| > | > | ||||
| <div class="name_text">{{ items.name }}</div> | <div class="name_text">{{ items.name }}</div> | ||||
| <div class="square_text">{{ items.mj }}亩</div> | <div class="square_text">{{ items.mj }}亩</div> | ||||
| @@ -159,7 +167,13 @@ | |||||
| <div class="searchBar_wrap"> | <div class="searchBar_wrap"> | ||||
| <div class="actionBar_wrap" v-if="searchBarOperVisbile"> | <div class="actionBar_wrap" v-if="searchBarOperVisbile"> | ||||
| <div class="m_list"> | <div class="m_list"> | ||||
| <div class="tensile active"><div class="icon"></div></div> | |||||
| <div | |||||
| class="tensile" | |||||
| :class="{ active: draw.drawMapPolygon }" | |||||
| @click="drawMapPolygonFun" | |||||
| > | |||||
| <div class="icon"></div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <div class="m_list"> | <div class="m_list"> | ||||
| <div class="positioning"> | <div class="positioning"> | ||||
| @@ -182,7 +196,7 @@ | |||||
| <div class="icon"></div> | <div class="icon"></div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="m_list"> | |||||
| <div class="m_list" @click="farmlandEditSwitchFun"> | |||||
| <div class="correct"></div> | <div class="correct"></div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -232,7 +246,8 @@ | |||||
| <!--房地全部信息展示--> | <!--房地全部信息展示--> | ||||
| <div class="landHomesteadDetails_wrap"> | <div class="landHomesteadDetails_wrap"> | ||||
| <div class="content_mian"> | |||||
| <!---农房--> | |||||
| <div class="content_mian" v-if="farmhouseStatus == 0"> | |||||
| <!--内容--> | <!--内容--> | ||||
| <div class="serial_flex"> | <div class="serial_flex"> | ||||
| <div class="number">农房编号<span>31</span></div> | <div class="number">农房编号<span>31</span></div> | ||||
| @@ -323,13 +338,92 @@ | |||||
| <div class="editor_icon"></div> | <div class="editor_icon"></div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!---农地--> | |||||
| <div class="content_mian" v-else-if="farmhouseStatus == 1"> | |||||
| <!--内容--> | |||||
| <div class="serial_flex"> | |||||
| <div class="number">农地编号<span>31</span></div> | |||||
| <div class="localhref"></div> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">农地使用人名称</span | |||||
| ><span class="content">孙全礼</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">村名</span><span class="content">南郊村</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">是否有审批手续</span | |||||
| ><span class="content">是</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">土地证号</span | |||||
| ><span class="content">38718490184</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">土地面积</span | |||||
| ><span class="content">大约3亩</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">现状情况</span | |||||
| ><span class="content">已流转</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">是否有流转意向</span | |||||
| ><span class="content"></span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">承包人</span | |||||
| ><span class="content">李福任</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">流转剩余年限</span | |||||
| ><span class="content">10年</span> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <span class="describe">流转合同截止日期</span | |||||
| ><span class="content">2021.7.1-2031. 6.30</span> | |||||
| </div> | |||||
| <!--上传图片--> | |||||
| <div class="uploadPictures_block"> | |||||
| <div class="statusQuo"> | |||||
| <div class="picture"></div> | |||||
| <div class="describe">现<br />状<br />图<br />片</div> | |||||
| </div> | |||||
| <div class="statusQuo"> | |||||
| <div class="picture"></div> | |||||
| <div class="describe">历<br />史<br />图<br />片</div> | |||||
| </div> | |||||
| </div> | |||||
| <!--编辑--> | |||||
| <div class="editor_block"> | |||||
| <div class="editor_icon"></div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <!--房地全部信息编辑--> | <!--房地全部信息编辑--> | ||||
| <div class="landHomesteadEdit_wrap"> | |||||
| <div | |||||
| class="landHomesteadEdit_wrap" | |||||
| v-show="landHomesteadEditVisbile" | |||||
| style="bottom: 0" | |||||
| > | |||||
| <div class="content_mian"> | <div class="content_mian"> | ||||
| <div class="info_title">录入宗地信息</div> | |||||
| <div class="flex_main"> | |||||
| <!--1--> | |||||
| <div class="info_title"> | |||||
| {{ this.farmhouseStatus == 0 ? "录入宗地信息" : "录入农地信息" }} | |||||
| </div> | |||||
| <!-- --> | |||||
| <div class="flex_main" v-if="this.farmhouseStatus == 0"> | |||||
| <div class="flex_block"> | <div class="flex_block"> | ||||
| <div class="number_s50 mr50"> | <div class="number_s50 mr50"> | ||||
| <div class="title_m">农房编号</div> | <div class="title_m">农房编号</div> | ||||
| @@ -562,21 +656,233 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="flex_main" v-else-if="this.farmhouseStatus == 1"> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <div class="number_s50 mr50"> | |||||
| <div class="title_m">农地编号</div> | |||||
| <div class="input_m"> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="农地编号" | |||||
| class="landHomesteadEdit_input" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| <div class="number_s50"> | |||||
| <div class="title_m">农地使用人名称</div> | |||||
| <div class="input_m"> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="农地使用人名称" | |||||
| class="landHomesteadEdit_input" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <div class="number_s60 mr50"> | |||||
| <div class="title_m">村名</div> | |||||
| <div class="input_m"> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="村名" | |||||
| class="landHomesteadEdit_input" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| <div class="number_s40"> | |||||
| <div class="title_m">土地证号</div> | |||||
| <div class="input_m"> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="土地证号" | |||||
| class="landHomesteadEdit_input" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <div class="number_s60 mr50"> | |||||
| <div class="title_m">是否有审批手续</div> | |||||
| <div class="input_m select"> | |||||
| <i class="dropDown_icon"></i> | |||||
| <van-field | |||||
| v-model="message" | |||||
| readonly | |||||
| clickable | |||||
| name="picker" | |||||
| placeholder="是否有审批手续" | |||||
| class="landHomesteadEdit_input" | |||||
| @click="showPicker = true" | |||||
| /> | |||||
| <van-popup v-model="showPicker" position="bottom"> | |||||
| <van-picker | |||||
| show-toolbar | |||||
| :columns="columns" | |||||
| @confirm="onConfirm" | |||||
| @cancel="showPicker = false" | |||||
| /> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| <div class="number_s40"> | |||||
| <div class="title_m">现状情况</div> | |||||
| <div class="input_m select"> | |||||
| <i class="dropDown_icon"></i> | |||||
| <van-field | |||||
| v-model="message" | |||||
| readonly | |||||
| clickable | |||||
| name="picker" | |||||
| placeholder="现状情况" | |||||
| class="landHomesteadEdit_input" | |||||
| @click="showPicker = true" | |||||
| /> | |||||
| <van-popup v-model="showPicker" position="bottom"> | |||||
| <van-picker | |||||
| show-toolbar | |||||
| :columns="columns" | |||||
| @confirm="onConfirm" | |||||
| @cancel="showPicker = false" | |||||
| /> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <div class="number_s35 mr50"> | |||||
| <div class="title_m">农用地类型</div> | |||||
| <div class="input_m select"> | |||||
| <i class="dropDown_icon"></i> | |||||
| <van-field | |||||
| v-model="message" | |||||
| readonly | |||||
| clickable | |||||
| name="picker" | |||||
| placeholder="农用地类型" | |||||
| class="landHomesteadEdit_input" | |||||
| @click="showPicker = true" | |||||
| /> | |||||
| <van-popup v-model="showPicker" position="bottom"> | |||||
| <van-picker | |||||
| show-toolbar | |||||
| :columns="columns" | |||||
| @confirm="onConfirm" | |||||
| @cancel="showPicker = false" | |||||
| /> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| <div class="number_s35 mr50"> | |||||
| <div class="title_m">土地面积</div> | |||||
| <div class="input_m about"> | |||||
| <span class="about_symbol">≈</span> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="土地面积" | |||||
| class="landHomesteadEdit_input" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| <div class="number_s30"> | |||||
| <div class="title_m">是否有流转意向</div> | |||||
| <div class="input_m select"> | |||||
| <i class="dropDown_icon"></i> | |||||
| <van-field | |||||
| v-model="message" | |||||
| readonly | |||||
| clickable | |||||
| name="picker" | |||||
| placeholder="是否有流转意向" | |||||
| class="landHomesteadEdit_input" | |||||
| @click="showPicker = true" | |||||
| /> | |||||
| <van-popup v-model="showPicker" position="bottom"> | |||||
| <van-picker | |||||
| show-toolbar | |||||
| :columns="columns" | |||||
| @confirm="onConfirm" | |||||
| @cancel="showPicker = false" | |||||
| /> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <div class="number_s50 mr50"> | |||||
| <div class="title_m">承包人</div> | |||||
| <div class="input_m"> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="承包人" | |||||
| class="landHomesteadEdit_input" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| <div class="number_s50"> | |||||
| <div class="title_m">流转剩余年限</div> | |||||
| <div class="input_m"> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="流转剩余年限" | |||||
| class="landHomesteadEdit_input" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!--1--> | |||||
| <div class="flex_block"> | |||||
| <div class="number_s100"> | |||||
| <div class="title_m">流转合同截止日期</div> | |||||
| <div class="input_m"> | |||||
| <van-field | |||||
| v-model="message" | |||||
| placeholder="流转合同截止日期" | |||||
| class="landHomesteadEdit_input" | |||||
| readonly | |||||
| @click="landHomesteadEditcalendar = true" | |||||
| /> | |||||
| <van-calendar | |||||
| v-model="landHomesteadEditcalendar" | |||||
| @confirm="landHomesteadEdConfirm" | |||||
| type="range" | |||||
| /> | |||||
| <!-- :min-date="new Date(2018, 1, 1)" :max-date="new Date(2010, 0, 31)" --> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!--2--> | |||||
| <div class="uploadPicturesFlex_block"> | |||||
| <div class="title_m">上传图片</div> | |||||
| <div class="main_m"> | |||||
| <van-uploader v-model="fileList" multiple :max-count="2" /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <div class="footer_main"> | <div class="footer_main"> | ||||
| <div class="cancel">取消</div> | |||||
| <div class="save">保存</div> | |||||
| <div class="cancel" @click="landHomesteadEditCancel">取消</div> | |||||
| <div class="save" @click="landHomesteadEditSave">保存</div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!--农地农房选择--> | <!--农地农房选择--> | ||||
| <div class="farmlandEditSwitch_wrap"> | |||||
| <div class="farmlandEditSwitch_wrap" v-show="farmlandEditSwitchVisbule"> | |||||
| <div class="mains"> | <div class="mains"> | ||||
| <div class="close_btn"></div> | |||||
| <div class="farmhouse"> | |||||
| <div class="close_btn" @click="farmlandEditFun"></div> | |||||
| <div class="farmhouse" @click="addNewPlot('farmhouse')"> | |||||
| <div class="icons"></div> | <div class="icons"></div> | ||||
| <p class="names">农房</p> | <p class="names">农房</p> | ||||
| </div> | </div> | ||||
| <div class="farmland"> | |||||
| <div class="farmland" @click="addNewPlot('land')"> | |||||
| <div class="icons"></div> | <div class="icons"></div> | ||||
| <p class="names">农地</p> | <p class="names">农地</p> | ||||
| </div> | </div> | ||||
| @@ -631,9 +937,26 @@ export default { | |||||
| hcBottonHouseArr: [], | hcBottonHouseArr: [], | ||||
| //待租列表 地 | //待租列表 地 | ||||
| hcBottonLandArr: [], | hcBottonLandArr: [], | ||||
| //搜索栏目-操作栏显隐 | //搜索栏目-操作栏显隐 | ||||
| searchBarOperVisbile: false, | searchBarOperVisbile: false, | ||||
| //地图绘制状态 | |||||
| draw: { | |||||
| drawMapPolygon: false, //绘制地图 | |||||
| }, | |||||
| //地图绘制坐标存储 | |||||
| coordinateList: [], | |||||
| //新建选择农房土地弹窗 显隐 | |||||
| farmlandEditSwitchVisbule: false, // | |||||
| //编辑房屋土地信息--显隐 | |||||
| landHomesteadEditVisbile: false, | |||||
| //查看编辑房屋、土地--类型 0 农房 1 农地 | |||||
| farmhouseStatus: 0, | |||||
| //新增日历显影 | |||||
| landHomesteadEditcalendar: false, | |||||
| //选择顺序 | |||||
| selectChooseOrder: 0, | |||||
| // <van-calendar v-model="landHomesteadEditcalendar" @confirm="" /> | |||||
| //以下删 | //以下删 | ||||
| message: "", | message: "", | ||||
| @@ -646,6 +969,117 @@ export default { | |||||
| this.initAxios(); | this.initAxios(); | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| //绘制多边形地图 | |||||
| drawMapPolygonFun() { | |||||
| let drawMapPolygon = this.draw.drawMapPolygon; | |||||
| if (drawMapPolygon == false) { | |||||
| this.$set(this.draw, "drawMapPolygon", true); | |||||
| $("#drawPolygon").trigger("click"); | |||||
| } else { | |||||
| $("#drawRemove").trigger("click"); | |||||
| this.$set(this.draw, "drawMapPolygon", false); | |||||
| } | |||||
| }, | |||||
| //新建选择农房土地弹窗 | |||||
| farmlandEditSwitchFun() { | |||||
| if (this.coordinateList.length == 0) { | |||||
| this.$toast("请先完成绘制"); | |||||
| return false; | |||||
| } | |||||
| this.farmlandEditSwitchVisbuleFun("show"); | |||||
| this.searchBarOperVisbile = false; | |||||
| }, | |||||
| //关闭选择农房土地 | |||||
| farmlandEditFun() { | |||||
| this.farmlandEditSwitchVisbuleFun("hide"); | |||||
| //初始化地图 | |||||
| this.initDraw(); | |||||
| }, | |||||
| addNewPlot(type) { | |||||
| this.farmlandEditSwitchVisbuleFun("hide"); | |||||
| this.landHomesteadEditVisbileFun("show"); | |||||
| //farmhouse农房 land农地 | |||||
| if (type == "farmhouse") { | |||||
| this.farmhouseStatus = 0; | |||||
| } else if (type == "land") { | |||||
| this.farmhouseStatus = 1; | |||||
| } | |||||
| }, | |||||
| //新增地块 编辑页 显影 | |||||
| landHomesteadEditVisbileFun(type) { | |||||
| if (type == "show") { | |||||
| this.landHomesteadEditVisbile = true; | |||||
| $(".landHomesteadEdit_wrap").css({ bottom: "-100vh" }); | |||||
| $(".landHomesteadEdit_wrap").animate( | |||||
| { | |||||
| bottom: "0", | |||||
| }, | |||||
| 300 | |||||
| ); | |||||
| } else { | |||||
| $(".landHomesteadEdit_wrap").css({ bottom: "0" }); | |||||
| $(".landHomesteadEdit_wrap").animate( | |||||
| { | |||||
| bottom: "-100vh", | |||||
| }, | |||||
| 300 | |||||
| ); | |||||
| setTimeout(() => { | |||||
| this.landHomesteadEditVisbile = false; | |||||
| }, 300); | |||||
| } | |||||
| }, | |||||
| //选择农地 农房显影 | |||||
| farmlandEditSwitchVisbuleFun(type) { | |||||
| if (type == "show") { | |||||
| this.farmlandEditSwitchVisbule = true; | |||||
| $(".farmlandEditSwitch_wrap").css({ opacity: "0" }); | |||||
| $(".farmlandEditSwitch_wrap").animate( | |||||
| { | |||||
| opacity: "1", | |||||
| }, | |||||
| 300 | |||||
| ); | |||||
| } else { | |||||
| $(".farmlandEditSwitch_wrap").css({ opacity: "1" }); | |||||
| $(".farmlandEditSwitch_wrap").animate( | |||||
| { | |||||
| opacity: "0", | |||||
| }, | |||||
| 300 | |||||
| ); | |||||
| setTimeout(() => { | |||||
| this.farmlandEditSwitchVisbule = false; | |||||
| }, 300); | |||||
| } | |||||
| }, | |||||
| //新增地块 编辑页 取消 | |||||
| landHomesteadEditCancel() { | |||||
| this.landHomesteadEditVisbileFun("hide"); | |||||
| this.farmlandEditSwitchVisbuleFun("show"); | |||||
| }, | |||||
| //新增地块 编辑页 保存 | |||||
| landHomesteadEditSave() { | |||||
| this.landHomesteadEditVisbileFun("hide"); | |||||
| this.initDraw(); | |||||
| }, | |||||
| landHomesteadEdConfirm(data) { | |||||
| this.landHomesteadEditcalendar = false; | |||||
| //获取日历的值 | |||||
| }, | |||||
| //初始化绘制 | |||||
| initDraw() { | |||||
| //清除数据 | |||||
| $("#drawRemove").trigger("click"); | |||||
| $("#drawReset").trigger("click"); | |||||
| this.coordinateList = []; | |||||
| this.draw.drawMapPolygon = false; //绘制地图 | |||||
| }, | |||||
| initAxios() { | initAxios() { | ||||
| //获取区 | //获取区 | ||||
| this.mapAreaSelectValue(); | this.mapAreaSelectValue(); | ||||
| @@ -793,6 +1227,8 @@ export default { | |||||
| this.searchBarOperVisbile = true; | this.searchBarOperVisbile = true; | ||||
| } else { | } else { | ||||
| this.searchBarOperVisbile = false; | this.searchBarOperVisbile = false; | ||||
| //初始化绘制 | |||||
| this.initDraw(); | |||||
| } | } | ||||
| }, | }, | ||||
| townVisbileFun() { | townVisbileFun() { | ||||
| @@ -917,6 +1353,17 @@ export default { | |||||
| this.selectChooseOrder = 0; | this.selectChooseOrder = 0; | ||||
| }, | }, | ||||
| housingSerial(item, index) { | |||||
| this.selectChooseOrder = index; | |||||
| if (item.type == "house") { | |||||
| // $("#texiao_fang").val(item.name); | |||||
| // $("#texiao_fang").trigger("click"); | |||||
| } else { | |||||
| // $("#texiao_di").val(item.name); | |||||
| // $("#texiao_di").trigger("click"); | |||||
| } | |||||
| }, | |||||
| //加载地图 | //加载地图 | ||||
| mapBackground() { | mapBackground() { | ||||
| let _this = this; | let _this = this; | ||||
| @@ -1532,72 +1979,119 @@ export default { | |||||
| console.log("++++++++++++" + cun); | console.log("++++++++++++" + cun); | ||||
| //业务图层 wms服务 | //业务图层 wms服务 | ||||
| //for (var i = 0; i < difang.length; i++) { | //for (var i = 0; i < difang.length; i++) { | ||||
| ///if (difang[i] == "nsgk_hc:t_geo_hc_house") { | |||||
| cql_filter = "CM='" + cun + "'"; | |||||
| //} else { | |||||
| // cql_filter = "CM='" + cun + "'"; | |||||
| //} | |||||
| nongZt = new ol.layer.Tile({ | |||||
| source: 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', | |||||
| //url: 'http://localhost:8888/geoserver/new_shp/wms', | |||||
| params: { | |||||
| LAYERS: difang, | |||||
| //'LAYERS': 'new_shp:new_shp_all', | |||||
| TILED: true, | |||||
| cql_filter: cql_filter, | |||||
| SRID: 3857, | |||||
| }, | |||||
| }), | |||||
| }); | |||||
| //} | |||||
| //定位查询位置 | |||||
| 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. | |||||
| ///if (difang[i] == "nsgk_hc:t_geo_hc_house") { | |||||
| cql_filter = "CM='" + cun + "'"; | |||||
| //} else { | |||||
| // cql_filter = "CM='" + cun + "'"; | |||||
| //} | |||||
| nongZt = new ol.layer.Tile({ | |||||
| source: 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', | |||||
| //url: 'http://localhost:8888/geoserver/new_shp/wms', | |||||
| params: { | |||||
| LAYERS: difang, | |||||
| //'LAYERS': 'new_shp:new_shp_all', | |||||
| TILED: true, | |||||
| cql_filter: cql_filter, | |||||
| SRID: 3857, | |||||
| }, | |||||
| }), | |||||
| }); | |||||
| //} | |||||
| //定位查询位置 | |||||
| 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((res) => { | |||||
| var geojsonmap = res.json(); | |||||
| return geojsonmap; | |||||
| }) | |||||
| .then((data) => { | |||||
| //var datamap = data.bbox; | |||||
| // var datamap = data.features[0].bbox; | |||||
| // map.getView().animate({ | |||||
| // // 只设置需要的属性即可 | |||||
| // center: datamap, // 中心点 | |||||
| // zoom: 15, // 缩放级别 | |||||
| // rotation: undefined, // 缩放完成view视图旋转弧度 | |||||
| // duration: 1000, // 缩放持续时间,默认不需要设置 | |||||
| // }); | |||||
| }) | |||||
| .catch((error) => { | |||||
| console.log("【异常】", error); | |||||
| }); | |||||
| map.addLayer(nongZt); | |||||
| .then((data) => { | |||||
| //var datamap = data.bbox; | |||||
| // var datamap = data.features[0].bbox; | |||||
| // map.getView().animate({ | |||||
| // // 只设置需要的属性即可 | |||||
| // center: datamap, // 中心点 | |||||
| // zoom: 15, // 缩放级别 | |||||
| // rotation: undefined, // 缩放完成view视图旋转弧度 | |||||
| // duration: 1000, // 缩放持续时间,默认不需要设置 | |||||
| // }); | |||||
| }) | |||||
| .catch((error) => { | |||||
| console.log("【异常】", error); | |||||
| }); | |||||
| map.addLayer(nongZt); | |||||
| //} | //} | ||||
| }); | }); | ||||
| //村定位查询-------------------------------------end | //村定位查询-------------------------------------end | ||||
| //开始绘制地图 ------------------- start | |||||
| var vector_drawing; | |||||
| var draw; | |||||
| //开始绘制地图 | |||||
| $("#drawPolygon").click(function () { | |||||
| console.log("111"); | |||||
| //map.removeLayer(zjd_land); | |||||
| map.removeLayer(vector_drawing); | |||||
| //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(); | |||||
| console.log("打印" + coordinate); | |||||
| _this.coordinateList.push(coordinate); | |||||
| //that.drawInsert = coordinate; | |||||
| }); | |||||
| map.addInteraction(draw); | |||||
| } | |||||
| addInteraction(); | |||||
| }); | |||||
| //清除画图鼠标点击事件 | |||||
| $("#drawRemove").click(function () { | |||||
| map.removeInteraction(draw); | |||||
| }); | |||||
| //还原之前图层 | |||||
| $("#drawReset").click(function () { | |||||
| map.removeLayer(vector_drawing); | |||||
| //map.addLayer(zjd_land); | |||||
| }); | |||||
| //开始绘制地图 ------------------- end | |||||
| }, | }, | ||||
| /*以下删*/ | /*以下删*/ | ||||
| @@ -1703,7 +2197,7 @@ export default { | |||||
| .title_m { | .title_m { | ||||
| color: #333; | color: #333; | ||||
| line-height: 36px; | line-height: 36px; | ||||
| padding: 20px 40px 32px; | |||||
| padding: 20px 40px 22px; | |||||
| .name { | .name { | ||||
| font-size: 40px; | font-size: 40px; | ||||
| line-height: 42px; | line-height: 42px; | ||||
| @@ -1721,7 +2215,7 @@ export default { | |||||
| .main_m { | .main_m { | ||||
| overflow-y: auto; | overflow-y: auto; | ||||
| padding: 0 40px; | |||||
| padding: 10px 0; | |||||
| // height: 300px; | // height: 300px; | ||||
| flex: 1; | flex: 1; | ||||
| .flex_block { | .flex_block { | ||||
| @@ -1729,6 +2223,10 @@ export default { | |||||
| display: flex; | display: flex; | ||||
| // justify-content: center; /* 相对父元素水平居中 */ | // justify-content: center; /* 相对父元素水平居中 */ | ||||
| align-items: center; /* 子元素相对父元素垂直居中 */ | align-items: center; /* 子元素相对父元素垂直居中 */ | ||||
| padding: 0 40px; | |||||
| &.active { | |||||
| box-shadow: 0px 0px 10px rgba(24, 45, 51, 0.5); | |||||
| } | |||||
| .name_text { | .name_text { | ||||
| font-size: 34px; | font-size: 34px; | ||||
| flex: 1; | flex: 1; | ||||
| @@ -2181,6 +2679,7 @@ export default { | |||||
| left: 0; | left: 0; | ||||
| bottom: 0; | bottom: 0; | ||||
| width: 100%; | width: 100%; | ||||
| z-index: 99; | |||||
| height: calc(100% - 190px); | height: calc(100% - 190px); | ||||
| .content_mian { | .content_mian { | ||||
| @@ -2268,11 +2767,10 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .landHomesteadEdit_wrap { | .landHomesteadEdit_wrap { | ||||
| display: none; | |||||
| // display: flex; | |||||
| display: flex; | |||||
| position: absolute; | position: absolute; | ||||
| left: 0; | left: 0; | ||||
| bottom: 0; | |||||
| bottom: -100vh; | |||||
| width: 100%; | width: 100%; | ||||
| height: calc(100% - 190px); | height: calc(100% - 190px); | ||||
| flex-direction: column; | flex-direction: column; | ||||
| @@ -2435,7 +2933,6 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .farmlandEditSwitch_wrap { | .farmlandEditSwitch_wrap { | ||||
| display: none; | |||||
| width: 100vw; | width: 100vw; | ||||
| height: 100vh; | height: 100vh; | ||||
| background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png") | background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png") | ||||
| @@ -2452,7 +2949,7 @@ export default { | |||||
| position: absolute; | position: absolute; | ||||
| left: 50%; | left: 50%; | ||||
| top: 50%; | top: 50%; | ||||
| margin: -272px 0 0 -240px; | |||||
| margin: -272px 0 0 -272px; | |||||
| z-index: 1002; | z-index: 1002; | ||||
| border-radius: 30px; | border-radius: 30px; | ||||
| padding: 0 30px; | padding: 0 30px; | ||||
| @@ -2543,4 +3040,10 @@ export default { | |||||
| border-radius: 10px; | border-radius: 10px; | ||||
| background-color: #ffffff; | background-color: #ffffff; | ||||
| } | } | ||||
| ::v-deep { | |||||
| .van-overlay { | |||||
| background-color: rgba(0, 0, 0, 0.2); | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||