庞东旭 há 2 anos
ascendente
cometimento
10b0eb9a5e
2 ficheiros alterados com 413 adições e 3 eliminações
  1. BIN
      src/assets/images/plotPremises/mark.png
  2. +413
    -3
      src/views/plotPremisesMobile/index.vue

BIN
src/assets/images/plotPremises/mark.png Ver ficheiro

Antes Depois
Largura: 19  |  Altura: 31  |  Tamanho: 1.7 KiB

+ 413
- 3
src/views/plotPremisesMobile/index.vue Ver ficheiro

@@ -166,6 +166,8 @@


<script> <script>
import $ from "jquery"; import $ from "jquery";
import { getConfigKey } from "@/utils/data";
import { treeselect } from "@/api/agriculturalTrusteeship";


export default { export default {
data() { data() {
@@ -205,10 +207,44 @@ export default {
], ],
}, },
], ],
addrOptions: [],

map: "", // 地图
// countyBorder: "", // 区县边界
// townBorder: "", // 乡镇边界
// villageBorder: "", // 村边界
borderLayer: "", // 区域边界图层
deptLayer: "", // 坐标点图层
userRole: "", // 记录用户身份
cityId: null, // 记录市的deptId
countyId: null, // 记录区县的deptId
townId: null, // 记录乡镇的deptId
deptPointLevel: null, // 地图上显示的坐标点级别

mapGeoServerUrl: "", // 加载geoserver地址
countyBorderLayerName: "", // 区县边界图层名称
townBorderLayerName: "", // 乡镇边界图层名称
villageBorderLayerName: "", // 村边界图层名称
}; };
}, },
created() { created() {


},
mounted() {
// 获取geoserver的地址
this.getGeoServerUrl();
// 获取区县边界图层名称
this.getCountyBorderLayerName();
// 获取乡镇边界的图层名称
this.getTownBorderLayerName();
// 获取村边界的图层名称
this.getVillageBorderLayerName();
// 获取部门下拉树列表
treeselect().then(response => {
this.addrOptions = response.data;
// 初始化地图
this.initMap();
});
}, },
methods: { methods: {
tabChange(name){ tabChange(name){
@@ -219,7 +255,381 @@ export default {
this.show = false; this.show = false;
this.showZF = false; this.showZF = false;
this.showZD = true; 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.deptPointLevel = '4';
// 添加区县边界
this.addCountyBorder();
} else if (dept.deptLevel === '4') {
// 登录身份为县级领导
this.userRole = 'countyLeader';
this.countyId = dept.id;
this.deptPointLevel = '3';
// 添加乡镇边界
this.addTownBorder(dept.id);
this.map.getView().setZoom(10.5);
}
// else if (dept.deptLevel === '3') {
// // 登录身份为镇级领导
// this.userRole = 'townLeader';
// this.townId = dept.id;
// this.deptPointLevel = '2';
// // 添加村边界
// 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.deptPointLevel = '3';
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.deptPointLevel = '2';
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.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: '-1', // -1代表最末级的坐标点
};
this.deptPointLevel = '-1'; // -1代表最末级的坐标点
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: 16, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间,默认不需要设置
});
}
}
}
});

// 缩小地图,重新加载页面
this.map.on("moveend", (evt) => {
const zoom = this.map.getView().getZoom();
if (this.userRole === 'cityLeader') {
if (this.deptPointLevel === '-1' && zoom < 13) {
this.deptPointLevel = '2';
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.deptPointLevel === '2' && zoom < 11) {
this.deptPointLevel = '3';
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.deptPointLevel === '3' && zoom < 9.5) {
this.deptPointLevel = '4';
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.deptPointLevel === '-1' && zoom < 13) {
this.deptPointLevel = '2';
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.deptPointLevel === '2' && zoom < 11) {
this.deptPointLevel = '3';
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> </script>
@@ -236,8 +646,8 @@ export default {
.map_main{ .map_main{
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: url("../../../static/images/plotPremises/map_bg.png") no-repeat center;
background-size: 100%;
/*background: url("../../../static/images/plotPremises/map_bg.png") no-repeat center;*/
/*background-size: 100%;*/
} }
/deep/ .van-popup{ /deep/ .van-popup{
background: #F1F0F5; background: #F1F0F5;


Carregando…
Cancelar
Guardar