|
@@ -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; |
|
|