|
- <template>
- <div class="home_wrapper">
- <div class="map_main" id="mapWrap"></div>
-
- <div class="top_address" @click="showAddress=true">
- <i class="address_icon"></i>
- <p>羊亭</p>
- <p>/北上夼</p>
- </div>
-
- <van-popup v-model="show" position="bottom" :overlay="false" round>
- <div class="pop_main">
-
- <div class="pop_title">
- <i class="address_icon"></i>
- <p>羊亭镇-北上夼村</p>
- </div>
-
- <div class="pop_content">
- <div class="pop_content_left">
- <img src="../../../static/images/plotPremises/plotPremises_icon_01.png" alt="">
- <div class="pop_content_left_box">
- <div>
- <p>农房 <span>(栋)</span></p>
- <p class="num">352</p>
- </div>
- <span class="border"></span>
- <div>
- <p>可租 <span>(栋)</span></p>
- <p class="num" @click="showList = true,activeName='nf'">71</p>
- </div>
- </div>
- </div>
- <div class="pop_content_left">
- <img src="../../../static/images/plotPremises/plotPremises_icon_02.png" alt="">
- <div class="pop_content_left_box">
- <div>
- <p>农地 <span>(亩)</span></p>
- <p class="num">352</p>
- </div>
- <span class="border"></span>
- <div>
- <p>可租 <span>(亩)</span></p>
- <p class="num" @click="showList = true,activeName='nd'">71</p>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- </van-popup>
-
- <van-popup v-model="showZD" closeable position="bottom" :closed="show=true" :overlay="false" round>
- <div class="pop_main">
-
- <div class="pop_title">
- <i class="address_icon"></i>
- <p>羊亭镇-北上夼村-107</p>
- </div>
-
- <div class="pop_content_zd">
- <img src="../../../static/images/plotPremises/plotPremises_img.png" alt="">
-
- <div class="pop_content_zd_right">
- <van-row type="flex" justify="space-between">
- <van-col>租地位置:</van-col>
- <van-col>北上夼村</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>租地编号:</van-col>
- <van-col class="num">310</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>租地面积:</van-col>
- <van-col class="num">12亩</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>咨询代表:</van-col>
- <van-col>张村委</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>咨询电话:</van-col>
- <van-col class="num">13306310631</van-col>
- </van-row>
- </div>
-
- </div>
-
- </div>
- </van-popup>
-
- <van-popup v-model="showZF" closeable position="bottom" :closed="show=true" :overlay="false" round>
- <div class="pop_main">
-
- <div class="pop_title">
- <i class="address_icon"></i>
- <p>羊亭镇-北上夼村-107</p>
- </div>
-
- <div class="pop_content_zd">
- <img src="../../../static/images/plotPremises/plotPremises_img.png" alt="">
-
- <div class="pop_content_zd_right">
- <van-row type="flex" justify="space-between">
- <van-col>租房位置:</van-col>
- <van-col>北上夼村</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>租房编号:</van-col>
- <van-col class="num">310</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>租房面积:</van-col>
- <van-col class="num">12亩</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>咨询代表:</van-col>
- <van-col>张村委</van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col>咨询电话:</van-col>
- <van-col class="num">13306310631</van-col>
- </van-row>
- </div>
-
- </div>
-
- </div>
- </van-popup>
-
- <van-popup v-model="showList" close-icon="../../../static/images/plotPremises/plotPremises_icon_03.png" closeable position="right" :closed="show=true" :overlay="false" round :style="{ width: '45%' , height: '60%' , background:'#ffffff' }">
- <div class="pop_main_right">
-
- <p class="pop_title" :style="{color:activeName=='nf'?'#1B65F8':'#FF7321'}">{{activeName=='nf'?'待租农房':'待租农地'}}</p>
-
- <div class="pop_content_right">
- <van-row>
- <van-col span="8" offset="4">编号</van-col>
- <van-col span="9" offset="3">面积</van-col>
- </van-row>
- <van-row v-for="(item,index) in 20"
- :key="index"
- @click="listChange(index)"
- :class="{ active: selectChooseOrder == index }"
- >
- <van-col span="8" offset="4" class="num">101</van-col>
- <van-col span="9" offset="3" class="num">3亩</van-col>
- </van-row>
- </div>
-
- <div class="pop_btn_right">
- <p :style="{background:activeName=='nf'?'#1B65F8':'',color:activeName=='nf'?'#ffffff':''}" @click="tabChange('nf')">农房</p>
- <p :style="{background:activeName=='nd'?'#FF7321':'',color:activeName=='nd'?'#ffffff':''}" @click="tabChange('nd')">农地</p>
- </div>
-
-
- </div>
- </van-popup>
-
- <van-popup v-model="showAddress" position="bottom" round>
- <van-picker show-toolbar title="村镇选择" :columns="columns" />
- </van-popup>
-
- </div>
- </template>
-
- <script>
- import $ from "jquery";
- import { getConfigKey } from "@/utils/data";
- import { treeselect } from "@/api/agriculturalTrusteeship";
-
- export default {
- data() {
- return {
- show:true,
- showZD:false,
- showZF:false,
- showList:false,
- showAddress:false,
- activeName:'nf',
- selectChooseOrder:-1,
- columns: [
- {
- text: '浙江',
- children: [
- {
- text: '杭州',
- children: [{ text: '西湖区' }, { text: '余杭区' }],
- },
- {
- text: '温州',
- children: [{ text: '鹿城区' }, { text: '瓯海区' }],
- },
- ],
- },
- {
- text: '福建',
- children: [
- {
- text: '福州',
- children: [{ text: '鼓楼区' }, { text: '台江区' }],
- },
- {
- text: '厦门',
- children: [{ text: '思明区' }, { text: '海沧区' }],
- },
- ],
- },
- ],
- addrOptions: [],
-
- map: "", // 地图
- // countyBorder: "", // 区县边界
- // townBorder: "", // 乡镇边界
- // villageBorder: "", // 村边界
- borderLayer: "", // 区域边界图层
- deptLayer: "", // 坐标点图层
- userRole: "", // 记录用户身份
- cityId: null, // 记录市的deptId
- countyId: null, // 记录区县的deptId
- townId: null, // 记录乡镇的deptId
- currentDeptLevel: null, // 当前所处的部门级别
-
- mapGeoServerUrl: "", // 加载geoserver地址
- countyBorderLayerName: "", // 区县边界图层名称
- townBorderLayerName: "", // 乡镇边界图层名称
- villageBorderLayerName: "", // 村边界图层名称
- };
- },
- created() {
-
- },
- mounted() {
- // 获取geoserver的地址
- this.getGeoServerUrl();
- // 获取区县边界图层名称
- this.getCountyBorderLayerName();
- // 获取乡镇边界的图层名称
- this.getTownBorderLayerName();
- // 获取村边界的图层名称
- this.getVillageBorderLayerName();
- // 获取部门下拉树列表
- treeselect().then(response => {
- this.addrOptions = response.data;
- // 初始化地图
- this.initMap();
- });
- },
- methods: {
- tabChange(name){
- this.activeName = name;
- },
- listChange(id){
- this.selectChooseOrder = id;
- this.show = false;
- this.showZF = false;
- this.showZD = true;
- },
- //获取geoserver的地址
- getGeoServerUrl() {
- getConfigKey("system.geoServer.url").then(response => {
- this.mapGeoServerUrl = response.msg;
- });
- },
- //获取区县边界的图层名称
- getCountyBorderLayerName() {
- getConfigKey("geoserver.layer.countyBorder").then(response => {
- this.countyBorderLayerName = response.msg;
- });
- },
- //获取乡镇边界的图层名称
- getTownBorderLayerName() {
- getConfigKey("geoserver.layer.townBorder").then(response => {
- this.townBorderLayerName = response.msg;
- });
- },
- //获取村边界的图层名称
- getVillageBorderLayerName() {
- getConfigKey("geoserver.layer.villageBorder").then(response => {
- this.villageBorderLayerName = response.msg;
- });
- },
- // 初始化地图
- initMap() {
- const dept = this.addrOptions[0];
- // 定义地图中心坐标
- let mapCenterLocation;
- if (dept.lng && dept.lat) {
- mapCenterLocation = [dept.lng, dept.lat];
- } else {
- mapCenterLocation = [116.391458, 39.902377];
- }
-
- document.getElementById("mapWrap").innerHTML = "";
- // 定义地图投影
- let projection = new ol.proj.Projection({
- code: "EPSG:3857",
- units: "degrees",
- });
- // 定义地图图层
- let aerial = new ol.layer.Tile({
- source: new ol.source.XYZ({
- url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
- "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
- "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
- }),
- isGroup: true,
- name: "卫星影像图",
- });
- let yingxzi = new ol.layer.Tile({
- source: new ol.source.XYZ({
- url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
- }),
- isGroup: true,
- name: "天地图文字标注--卫星影像图",
- });
- //加载地图
- this.map = new ol.Map({
- controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
- layers: [aerial, yingxzi],
- projection: projection,
- target: "mapWrap",
- view: new ol.View({
- center: ol.proj.fromLonLat(mapCenterLocation), // 地图中心坐标
- zoom: 9.5,
- minZoom: 1, //地图缩小限制
- maxZoom: 18, //地图放大限制
- // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
- }),
- interactions: ol.interaction.defaults({
- doubleClickZoom: false, // 双击放大地图
- // mouseWheelZoom: false, // 鼠标滚轮放大地图
- // shiftDragZoom: false, // shift + 鼠标左键拖拽 放大地图
- })
- });
-
- if (dept.deptLevel === '5') {
- // 登录身份为市级领导
- this.userRole = 'cityLeader';
- this.cityId = dept.id;
- this.currentDeptLevel = '5';
- // 添加区县边界
- this.addCountyBorder();
- } else if (dept.deptLevel === '4') {
- // 登录身份为县级领导
- this.userRole = 'countyLeader';
- this.countyId = dept.id;
- this.currentDeptLevel = '4';
- // 添加乡镇边界
- this.addTownBorder(dept.id);
- this.map.getView().setZoom(10.5);
- }
- // else if (dept.deptLevel === '3') {
- // // 登录身份为镇级领导
- // this.userRole = 'townLeader';
- // this.townId = dept.id;
- // this.currentDeptLevel = '3';
- // // 添加村边界
- // this.addVillageBorder(dept.id);
- // this.map.getView().setZoom(12.5);
- // }
- if (dept.children) {
- this.addDeptLayer(dept.children);
- }
-
- this.map.on("click", (evt) => {
- let feature = this.map.forEachFeatureAtPixel(
- evt.pixel,
- (feature) => feature
- );
- if (feature) {
- // 镇级:加载村级坐标点
- if (feature.get('level') === 'deptPoint') {
- const deptId = feature.get('deptId');
- const deptLevel = feature.get('deptLevel');
- const lng = feature.get('lng');
- const lat = feature.get('lat');
- if (deptLevel === '4' || deptLevel === '3') {
- if (deptLevel === '4') {
- this.countyId = deptId;
- this.currentDeptLevel = '4';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = '';
- // 添加乡镇边界
- this.addTownBorder(deptId);
- this.map.getView().animate({
- center: ol.proj.fromLonLat([lng, lat]), // 中心点
- zoom: 10.5, // 缩放级别
- rotation: undefined, // 缩放完成view视图旋转弧度
- duration: 1000, // 缩放持续时间,默认不需要设置
- });
- } else if (deptLevel === '3') {
- this.townId = deptId;
- this.currentDeptLevel = '3';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = '';
- // 添加村边界
- const cqlFilter = "parent_id = '" + deptId + "'";
- this.addVillageBorder(cqlFilter);
- this.map.getView().animate({
- center: ol.proj.fromLonLat([lng, lat]), // 中心点
- zoom: 12.5, // 缩放级别
- rotation: undefined, // 缩放完成view视图旋转弧度
- duration: 1000, // 缩放持续时间,默认不需要设置
- });
- }
- const deptNode = this.findNode(this.addrOptions, deptId);
- if (deptNode && deptNode.children) {
- this.map.removeLayer(this.deptLayer);
- this.deptLayer = '';
- this.addDeptLayer(deptNode.children);
- }
- } else if (deptLevel === '2') {
- this.currentDeptLevel = '2';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = '';
- // 添加村边界
- const cqlFilter = "dept_id = '" + deptId + "'";
- this.addVillageBorder(cqlFilter);
-
- let villagePoint = {
- id: deptId,
- label: feature.get('deptName'),
- lng: lng,
- lat: lat,
- deptLevel: deptLevel,
- };
- let depts = [];
- depts.push(villagePoint);
- this.map.removeLayer(this.deptLayer);
- this.deptLayer = '';
- this.addDeptLayer(depts);
- this.map.getView().animate({
- center: ol.proj.fromLonLat([lng, lat]), // 中心点
- zoom: 17, // 缩放级别
- rotation: undefined, // 缩放完成view视图旋转弧度
- duration: 1000, // 缩放持续时间,默认不需要设置
- });
- }
- }
- }
- });
-
- // 缩小地图,重新加载页面
- this.map.on("moveend", (evt) => {
- const zoom = this.map.getView().getZoom();
- if (this.userRole === 'cityLeader') {
- if (this.currentDeptLevel === '2' && zoom < 13) {
- this.currentDeptLevel = '3';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = "";
- const cqlFilter = "parent_id = '" + this.townId + "'";
- this.addVillageBorder(cqlFilter);
-
- this.map.removeLayer(this.deptLayer);
- this.deptLayer = "";
- const deptNode = this.findNode(this.addrOptions, this.townId);
- if (deptNode && deptNode.children) {
- this.addDeptLayer(deptNode.children);
- }
- } else if (this.currentDeptLevel === '3' && zoom < 11) {
- this.currentDeptLevel = '4';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = "";
- this.addTownBorder(this.countyId);
-
- this.map.removeLayer(this.deptLayer);
- this.deptLayer = "";
- const deptNode = this.findNode(this.addrOptions, this.countyId);
- if (deptNode && deptNode.children) {
- this.addDeptLayer(deptNode.children);
- }
- } else if (this.currentDeptLevel === '4' && zoom < 9.5) {
- this.currentDeptLevel = '5';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = "";
- this.addCountyBorder();
-
- this.map.removeLayer(this.deptLayer);
- this.deptLayer = "";
- const deptNode = this.findNode(this.addrOptions, this.cityId);
- if (deptNode && deptNode.children) {
- this.addDeptLayer(deptNode.children);
- }
- }
- } else if (this.userRole === 'countyLeader') {
- if (this.currentDeptLevel === '2' && zoom < 13) {
- this.currentDeptLevel = '3';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = "";
- const cqlFilter = "parent_id = '" + this.townId + "'";
- this.addVillageBorder(cqlFilter);
-
- this.map.removeLayer(this.deptLayer);
- this.deptLayer = "";
- const deptNode = this.findNode(this.addrOptions, this.townId);
- if (deptNode && deptNode.children) {
- this.addDeptLayer(deptNode.children);
- }
- } else if (this.currentDeptLevel === '3' && zoom < 11) {
- this.currentDeptLevel = '4';
- this.map.removeLayer(this.borderLayer);
- this.borderLayer = "";
- this.addTownBorder(this.countyId);
-
- this.map.removeLayer(this.deptLayer);
- this.deptLayer = "";
- const deptNode = this.findNode(this.addrOptions, this.countyId);
- if (deptNode && deptNode.children) {
- this.addDeptLayer(deptNode.children);
- }
- }
- }
- });
- },
- findNode(tree, deptId) {
- for (const node of tree) {
- if (node.id === deptId) return node;
- if (node.children) {
- const res = this.findNode(node.children, deptId);
- if (res) return res;
- }
- }
- return null;
- },
- // 添加区县边界
- addCountyBorder() {
- this.borderLayer = new ol.layer.Image({
- source: new ol.source.ImageWMS({
- url: this.mapGeoServerUrl + '/wms',
- params: {
- LAYERS: this.countyBorderLayerName,
- SRID: 3857,
- }
- }),
- name: 'countyBorderLayer'
- });
- this.map.getLayers().insertAt(2, this.borderLayer);
- },
- // 添加乡镇边界
- addTownBorder(deptId) {
- this.borderLayer = new ol.layer.Image({
- source: new ol.source.ImageWMS({
- url: this.mapGeoServerUrl + "/wms",
- params: {
- LAYERS: this.townBorderLayerName,
- // TILED: true,
- cql_filter: "parent_id = '" + deptId + "'",
- SRID: 3857,
- },
- }),
- name: 'townBorderLayer'
- });
- this.map.getLayers().insertAt(2, this.borderLayer);
- },
- // 添加村边界
- addVillageBorder(cqlFilter) {
- this.borderLayer = new ol.layer.Image({
- source: new ol.source.ImageWMS({
- url: this.mapGeoServerUrl + '/wms',
- params: {
- LAYERS: this.villageBorderLayerName,
- cql_filter: cqlFilter,
- SRID: 3857,
- },
- }),
- name: 'villageBorderLayer'
- });
- this.map.getLayers().insertAt(2, this.borderLayer);
- },
- // 创建矢量数据源
- addDeptLayer(depts) {
- const createFeatureStyle = function(feature) {
- return new ol.style.Style({
- image: new ol.style.Icon({
- //设置图标偏移
- anchor: [0.5, 1],
- //标注样式的起点位置
- anchorOrigin: "top-right",
- //X方向单位:分数
- anchorXUnits: "fraction",
- //Y方向单位:像素
- anchorYUnits: "pixels",
- //偏移起点位置的方向
- offsetOrigin: "top-right",
- //透明度
- opacity: 0.9,
- // rotation: (Math.PI / 180) * 20,
- //图片路径
- src: require("../../assets/images/plotPremises/mark.png"),
- }),
- text: new ol.style.Text({
- textAlign: "center", //位置
- textBaseline: "bottom", //基准线
- font: "normal 14px 微软雅黑", //文字样式
- text: feature.get("deptName"), //文本内容
- fill: new ol.style.Fill({
- //文本填充样式(即文字颜色)
- color: "#ffffff",
- }),
- }),
- });
- };
- let features = [];
- for (let i = 0; i < depts.length; i++) {
- let feature = new ol.Feature({
- geometry: new ol.geom.Point(
- ol.proj.fromLonLat([depts[i].lng, depts[i].lat])
- ),
- deptId: depts[i].id,
- deptName: depts[i].label,
- // orgCode: depts[i].orgCode,
- lat: depts[i].lat,
- lng: depts[i].lng,
- deptLevel: depts[i].deptLevel,
- level: 'deptPoint',
- });
- // 创建下级部门坐标点
- feature.setStyle(createFeatureStyle(feature));
- features.push(feature);
- }
- const vectorSource = new ol.source.Vector({
- features: features,
- });
- // 创建矢量图层
- this.deptLayer = new ol.layer.Vector({
- source: vectorSource,
- name: 'deptLayer'
- });
- // this.map.addLayer(this.deptLayer);
- this.map.getLayers().insertAt(3, this.deptLayer);
- },
- },
- };
- </script>
-
- <style scoped lang="scss">
- .home_wrapper {
- background: #e9e9e9;
- min-height: 100vh;
- width: 100vw;
- }
- .num{
- font-family: Arial;
- }
- .map_main{
- width: 100%;
- height: 100vh;
- /*background: url("../../../static/images/plotPremises/map_bg.png") no-repeat center;*/
- /*background-size: 100%;*/
- }
- /deep/ .van-popup{
- background: #F1F0F5;
- }
- /deep/ .van-popup--right{
- top: 35%;
- .van-icon__image{
- width: .7em;
- height: .7em;
- display: block;
- }
- }
- .top_address{
- display: flex;
- align-items: center;
- position: absolute;
- top: 5vh;
- left: 3vw;
- padding: 1vh 2vh;
- background: #ffffff;
- border-radius: 5vh;
- p{font-size: 1.5vh}
- }
- .address_icon {
- width: 13PX;
- height: 17PX;
- background: url("../../../static/images/plotPremises/positioning.png") no-repeat;
- background-size: 100% 100%;
- margin-right: 1vw;
- }
- .pop_main{
- padding: 2vh 3vw;
- .pop_title{
- display: flex;
- align-items: center;
- font-size: 2.2vh;
- line-height: 1;
- }
- .pop_content{
- display: flex;
- justify-content: space-between;
- margin-top: 2vh;
- .pop_content_left{
- background: #ffffff;
- width: 48%;
- padding: 1.5vh 3vw;
- border-radius: 15PX;
- .pop_content_left_box{
- display: flex;
- justify-content: space-between;
- margin-top: .5vh;
- .border{
- border-left: 2PX dashed #DFDFDF;
- }
- div{
- p{
- &:first-child{
- font-size: 2vh;
- color: #797979;
- span{
- font-size: 1.5vh;
- }
- }
- &:last-child{
- font-size: 3vh;
- color: #333333;
- }
- }
- &:last-child{
- p:last-child{
- color: #1B65F8;
- }
- }
- }
- }
- }
- }
- .pop_content_zd{
- background: #ffffff;
- border-radius: 15PX;
- display: flex;
- justify-content: space-between;
- margin-top: 2vh;
- overflow: hidden;
- img{width: 40%;}
- .pop_content_zd_right{
- width: 60%;
- padding:1.5vh 2.5vh;
- font-size: 1.8vh;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- }
- }
- .pop_main_right{
-
- .pop_title{
- font-size: 2.2vh;
- color: #1B65F8;
- padding: 1.5vh;
- }
-
- .pop_content_right{
- font-size: 1.8vh;
- height: 48vh;
- overflow-y: scroll;
- .active{
- box-shadow:0px 0px 5px #999999;
- }
- .van-row{
- padding: 1vh 0;
- }
- }
-
- .pop_btn_right{
- display: flex;
- width: 100%;
- position: absolute;
- bottom: 0;
- p{
- padding: 1.5vh 0;
- text-align: center;
- font-size: 2vh;
- flex: 1;
- background: #E1E0E4;
- color: #9F9F9F;
- }
- }
-
- }
- </style>
|