zhangzl
/
nsgk_mobile
2
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

地图优化

wulanhaote
hbao 3 лет назад
Родитель
12ddd0c563
Сommit
f9d469cefb
1 измененных файлов: 656 добавлений и 30 удалений
Разделённый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +656
    -30
      src/views/homesteadSurvey/list.vue

+ 656
- 30
src/views/homesteadSurvey/list.vue Просмотреть файл

@@ -368,6 +368,53 @@
</div>
<div v-if="activeBtn==4">
<div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
<!--图层-->
<div class="rightZoom_wrap">
<div class="amplification" @click="selectionPushMap">图层</div>
</div>
<!--放大缩小-->
<div class="mapZoom_wrap">
<div class="qtMap" @click="">全图</div>
<div class="clMap" @click="">测量</div>
<div class="hcMap" @click="">核查</div>
<div class="htMap" @click="" id="htMapAll">绘图</div>
<div class="dwMap" @click="" id="dwMapAll">定位</div>
</div>

<!--列表拉取详情-->
<div class="homesteadList_wrap" v-show="homesteadListStatus">
<div class="main_m">
<div class="title_m">
<div class="more_icon" @click="homesteadListShrink"></div>
<div class="name">筛选列表</div>
</div>
<div class="noInfo_data">
<div class="checkbox">
<!-- 全选与不全选模块 -->
<div class="thead-checkbox" @click="checkClick">
<input type="checkbox" class="checkall">全选
</div>
<!-- 小复选框选 -->
<div class="item-list-checkbox">
<div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>
<div class="item-checkbox" @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>
<div class="item-checkbox" @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>
</div>
</div>
</div>
</div>
</div>
<!-- &lt;!&ndash;列表 定位&ndash;&gt;-->
<!-- <div class="rightIcon_wrap">-->
<!-- &lt;!&ndash; <div class="positioning_wrap">-->
<!-- <div class="icon"></div>-->
<!-- </div> &ndash;&gt;-->
<!-- <div class="selectionIcon_wrap" @click="selectionPush">-->
<!-- <div class="icon"></div>-->
<!-- <div class="text">列表</div>-->
<!-- </div>-->
<!-- </div>-->
<van-overlay :show="selectionIconShow" @click="homesteadListShrink" />
</div>
<van-popup v-model="show1" style="height:100%;width:100%;">
<div class="bannerBg">
@@ -800,11 +847,13 @@

<script>
import { currentLocation,} from "@/api/homestead/index";
import {listZjdzd} from "@/api/homesteadSurvey/zjdzd";
import {listZjdzd,getQueryLand} from "@/api/homesteadSurvey/zjdzd";
import {listShyqr} from "@/api/homesteadSurvey/shyqr";
import {listSuyqr,updateSuyqr,addSuyqr} from "@/api/homesteadSurvey/suyqr";
import {listZrz,getZrzZjdDmList} from "@/api/homesteadSurvey/zrz";
import {listFsss,getFsssZjdDmList} from "@/api/homesteadSurvey/fsss";
import { listTown, getTown } from "@/api/homesteadSurvey/town";
import { listVillage} from "@/api/homesteadSurvey/village";
import $ from "jquery";
export default {
name: "homesteadList",
@@ -871,6 +920,14 @@
mapFsssData:{},
mapHaDataValue:false,
mapHasDateStatus: 0, //0附属设施 1自然幢 2宅基地
selectionIconShow:false,
homesteadListStatus:false,
//地图绘制状态
draw: {
drawMapPolygon: false, //绘制地图
},
mapTownList: null,
mapVillageList: null,
//地图使用 --end
};
},
@@ -1081,22 +1138,32 @@
onConfirm(){},
onSubmit(){},
mapShow() {
listZjdzd().then((response) => {
//镇边界获取
listTown().then(response => {
if (response.code == 200) {
this.mapTheGeomZjdId = response.rows;
// listZrz().then((response) => {
// if (response.code == 200) {
// this.mapTheGeomZrzId = response.rows;
// }
// listFsss().then((response) => {
// if (response.code == 200) {
// this.mapTheGeomFsssId = response.rows;
// }
setTimeout(() => {
this.GetMapsInit();
}, 500);
// });
// });
this.mapTownList = response.rows;
//村边界获取
listVillage(this.queryParams).then(response => {
this.mapVillageList = response.rows;
listZjdzd().then((response) => {
if (response.code == 200) {
this.mapTheGeomZjdId= response.rows;
listZrz().then((response) => {
if (response.code == 200) {
this.mapTheGeomZrzId = response.rows;
listFsss().then((response) => {
if (response.code == 200) {
this.mapTheGeomFsssId = response.rows;
}
setTimeout(() => {
this.GetMapsInit();
}, 300);
});
}
});
}
});
});
}
});
},
@@ -1144,9 +1211,135 @@
maxZoom: 18.3, //地图放大限制
}),
});
console.log(map);
//判断当前账套是否有数据
var mapTalkAbout = true;
//获取镇界线----start
if(this.mapTownList.length >0){
for (var i = 0; this.mapTownList.length > i; i++) {
if (this.mapTownList[i] != null && this.mapTownList[i].theGeom != null && this.mapTownList[i].theGeom != "") {
mapTalkAbout =false;
this.mapTownList[i].createBy = 'mapTownList';
var theGeomLine= this.mapTownList[i].theGeom.replaceAll("MultiPolygon","LineString");
theGeomLine = theGeomLine.replaceAll("[[[[","[[");
theGeomLine = theGeomLine.replaceAll("]]]]","]]");
hc_land = new ol.layer.Vector({
title: "add Layer",
source: new ol.source.Vector({
projection: projection,
features: new ol.format.GeoJSON().readFeatures("{\n" +
" \"type\": \"Feature\",\n" +
" \"geometry\":" + theGeomLine + ", \"properties\":" + JSON.stringify(this.mapTownList[i]) + "}"),
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
//矢量图层填充颜色，以及透明度
color: "#AE57A4",
}),
stroke: new ol.style.Stroke({
//边界样式
color: "#FF0000",
width: 3,
}),
// text: new ol.style.Text({
// text: this.mapTownList[i].xzqmc,
// font: '30px sans-serif',
// textAlign: "center",
// textBaseline: "middle",
// //font: 'verdana',
// fill: new ol.style.Fill({
// color: "#ff0000"
// }),
// // backgroundFill: new ol.style.Fill({
// // color: "#ff0000"
// // }),
// font: "30px sans-serif",
// stroke: new ol.style.Stroke({
// color: "#ffffff"
// // width: 3
// }),
// offsetX: parseInt(0, 10),
// offsetY: parseInt(0, 10),
// placement: "line", //point 则自动计算面的中心k点然后标注 line 则根据面要素的边进行标注
// overflow: false //超出面的部分不显示
//}),
}),
});
map.addLayer(hc_land);
//console.log(hc_land.values_.source.featuresRtree_.rbush_.data);
var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
// //定位查询位置
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
// console.log(center);
map.getView().animate({
// 只设置需要的属性即可
center: center, // 中心点
zoom: 9.8, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
}
}
}
//获取镇界线----end
//获取村界线----start
if(this.mapVillageList.length >0){
for (var i = 0; this.mapVillageList.length > i; i++) {
if (this.mapVillageList[i] != null && this.mapVillageList[i].theGeom != null && this.mapVillageList[i].theGeom != "") {
mapTalkAbout =false;
this.mapVillageList[i].createBy = 'mapVillageList';
var theGeomLine= this.mapVillageList[i].theGeom.replaceAll("MultiPolygon","LineString");
theGeomLine = theGeomLine.replaceAll("[[[[","[[");
theGeomLine = theGeomLine.replaceAll("]]]]","]]");
hc_land = new ol.layer.Vector({
title: "add Layer",
source: new ol.source.Vector({
projection: projection,
features: new ol.format.GeoJSON().readFeatures("{\n" +
" \"type\": \"Feature\",\n" +
" \"geometry\":" + theGeomLine + ", \"properties\":" + JSON.stringify(this.mapVillageList[i]) + "}"),
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
//矢量图层填充颜色，以及透明度
color: "#AE57A4",
}),
stroke: new ol.style.Stroke({
//边界样式
color: "#ff00ff",
width: 3,
}),
// text: new ol.style.Text({
// text: this.mapVillageList[i].dcmj,
// font: '30px sans-serif',
// textAlign: "center",
// textBaseline: "middle",
// //font: 'verdana',
// fill: new ol.style.Fill({
// color: "#ff00ff"
// }),
// // backgroundFill: new ol.style.Fill({
// // color: "#ff0000"
// // }),
// font: "30px sans-serif",
// stroke: new ol.style.Stroke({
// color: "#ffffff"
// // width: 3
// }),
// offsetX: parseInt(0, 10),
// offsetY: parseInt(0, 10),
// placement: "line", //point 则自动计算面的中心k点然后标注 line 则根据面要素的边进行标注
// overflow: false //超出面的部分不显示
// }),
}),
});
map.addLayer(hc_land);
}
}
}
// //获取村界线----end
//宅基地定位开始 ---------start
if(this.mapTheGeomZjdId.length >0) {
for (var i = 0; this.mapTheGeomZjdId.length > i; i++) {
@@ -1257,7 +1450,6 @@

//附属设施定位开始 ---------start
getFsssZjdDmList(this.mapTheGeomZjdId[i].zjddm).then((response) => {
console.log(response);
if (response.code == 200) {
this.mapTheGeomFsssId = response.data;
if(this.mapTheGeomFsssId.length >0) {
@@ -1312,6 +1504,103 @@
}
//宅基地定位结束 ---------end

//定位当前位置 ------start
$("#dwMapAll").on("click", function () {
var Zb;
var latitude;
var longitude;
var vector_drawing;
//开始定位当前位置
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;// 获取纬度
longitude = position.coords.longitude;// 获取经度
});
if(latitude !=null && longitude !=null && latitude !="" && longitude !=""){
Zb = [longitude,latitude];
}else {
Zb =[115.452752, 31.789033];
}
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle() {
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,
//图片路径
src: require("../../assets/images/housesteadSurvey/mark.png"),
}),
text: new ol.style.Text({
textAlign: "center", //位置
textBaseline: "middle", //基准线
font: "normal 12px 微软雅黑", //文字样式
//text: "标注点", //文本内容
fill: new ol.style.Fill({
//文本填充样式（即文字颜色)
color: "#ff0000",
}),
}),
zIndex: 9999,
});
}
var newcenterFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat(Zb)), //几何信息
name: "标注点",
});
var sourceMapLook = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: sourceMapLook,
});
map.addLayer(vector_drawing);
newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMapLook.addFeature(newcenterFeature);
map.getView().animate({
// 只设置需要的属性即可
center: ol.proj.fromLonLat(Zb), // 中心点
zoom: 17.8, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
});
//定位当前位置 ------end
var drawing;
var draw;
//开始绘制图层- -----start
$("#htMapAll").on("click", function () {
//that.closeMoule = null;
map.removeInteraction(draw);
//var source = new ol.source.Vector({wrapX: false});
drawing = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: drawing.getSource(),
type: "Polygon"
});
draw.on('drawend', function (evt) {
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
that.closeMoule = coordinate;
});
map.addInteraction(draw);
}
addInteraction();
});
//开始绘制图层- -----end

//点击查询详细信息
map.on("singleclick", function (evt) {
let feature = map.forEachFeatureAtPixel(
@@ -1681,34 +1970,114 @@
});
}
},

/*右侧列表 --展开收缩*/
selectionPushMap() {
this.selectionIconShow = true;
this.homesteadListStatus = true;
$(".homesteadList_wrap").animate(
{
right: "0",
},
300
);
},
homesteadListShrink() {
this.selectionIconShow = false;
$(".homesteadList_wrap").animate(
{
right: "-300px",
},
300
);
setTimeout(() => {
this.homesteadListStatus = false;
}, 300);
},
checkClick(res){
// 1、全选与不全选模块
$(".checkall").change(function() {
// console.log($(this).prop("checked"));输出全选按钮的选中状态
$(".item-list-checkbox .checkitem").prop("checked", $(this).prop("checked"));
if($(this).prop("checked")){

}else {

}
});
// 2、小复选框模块
$(".checkitem").change(function() {
if ($(".checkitem:checked").length === $(".checkitem").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
})
},
//绘制多边形地图
drawMapPolygonFun() {
let drawMapPolygon = this.draw.drawMapPolygon;
if (drawMapPolygon == false) {
if (this.coordinateList == "") {
this.$set(this.draw, "drawMapPolygon", true);
$("#drawPolygon").trigger("click");
} else {
this.$dialog
.confirm({
title: "提示",
message: "是否重新绘制画图",
})
.then(() => {
// on confirm
this.coordinateList = "";
this.$set(this.draw, "drawMapPolygon", true);
$("#drawPolygon").trigger("click");
})
.catch(() => {
// on cancel
});
}
} else {
$("#drawRemove").trigger("click");
this.$set(this.draw, "drawMapPolygon", false);
}
},
guidProduct(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
},
}
}
</script>

<style scoped>
<style scoped lang="scss">

>>> .bannerBg{
.bannerBg{
width: 100%;
color:#fff;
padding:10px;
background: linear-gradient(134deg,#7ac943 1%, #22b7f2);

}
>>> .van-hairline--bottom::after {
border-bottom-width: 0;
}
>>> .activeBtn{
.van-hairline--bottom::after {
border-bottom-width: 0;
}
.activeBtn{
flex:1;background:#fff;height:50px;border-radius:25px;margin:10px;color:#7AC943;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
}
>>> .disactiveBtn{
flex:1;background:rgba(255,255,255,.4);height:50px;border-radius:25px;margin:10px;color:#fff;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
}
>>> .van-cell__label{
.disactiveBtn{
flex:1;background:rgba(255,255,255,.4);height:50px;border-radius:25px;margin:10px;color:#fff;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
}
.van-cell__label{
color: #969799;
font-size: 12px;
line-height: 20px;
margin:0
}
>>>.map_area {
.map_area {
width: 50vw;
height: 50vh;
z-index:1;
@@ -1717,7 +2086,264 @@
left: 0;
top: 0;
}
>>> .van-field__label{
.van-field__label{
width:50%;
}
.rightZoom_wrap {
position: absolute;
right: 16px;
top: 35%;
width: 66px;
margin-top: -200px;
background: #fff;
margin-bottom: 16px;
border-radius: 10px;
height: 60px;
.amplification {
height: 50px;
width: 74px;
}
.amplification {
background: url("../../assets/images/housesteadSurvey/tool1.png") center center no-repeat;
font-size: 18px;
padding-top: 35px;
text-align: center;
}
}
.mapZoom_wrap {
position: absolute;
right: 16px;
top: 50%;
width: 66px;
margin-top: -200px;
background: #fff;
margin-bottom: 16px;
border-radius: 10px;
height: 300px;

.qtMap {
height: 50px;
width: 74px;
}

.qtMap {
background: url("../../assets/images/housesteadSurvey/tool2.png") center center no-repeat;
font-size: 18px;
padding-top: 35px;
text-align: center;
}

.clMap {
background: url("../../assets/images/housesteadSurvey/tool3.png") center center no-repeat;
font-size: 18px;
padding-top: 35px;
text-align: center;
}

.hcMap {
background: url("../../assets/images/housesteadSurvey/tool4.png") center center no-repeat;
font-size: 18px;
padding-top: 35px;
text-align: center;
}

.htMap {
background: url("../../assets/images/housesteadSurvey/tool5.png") center center no-repeat;
font-size: 18px;
padding-top: 35px;
text-align: center;
}

.dwMap {
background: url("../../assets/images/housesteadSurvey/tool6.png") center center no-repeat;
font-size: 18px;
padding-top: 35px;
text-align: center;
}
}
.rightIcon_wrap {
position: absolute;
right: 16px;
bottom: 160px;
.selectionIcon_wrap {
width: 74px;
background: #fff;
border-radius: 10px;
padding: 14px 0;

.icon {
width: 38px;
height: 38px;
background: url("../../assets/images/homestead/selection_icon.png")
no-repeat;
background-size: 100% 100%;
margin: 0 auto 4px;
}
.text {
font-size: 24px;
text-align: center;
}
}
.positioning_wrap {
width: 74px;
background: #fff;
margin-bottom: 16px;
border-radius: 10px;
height: 74px;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中*/
.icon {
width: 38px;
height: 38px;
background: url("../../assets/images/homestead/positioning_icon.png")
no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
}
}
.homesteadList_wrap {
// display: none;
display: flex;
position: absolute;
right: -200px;
top: 0px;
bottom: 0px;
width: 300px;
background: #fff;
z-index: 999;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;

flex-direction: column;
.noInfo_data {
font-size: 28px;
text-align: center;
height: 300px;
line-height: 300px;
color: #666;
}
.title_m {
color: #333;
line-height: 36px;
padding: 20px 40px 22px;
.name {
font-size: 36px;
line-height: 42px;
height: 42px;
}
.more_icon {
width: 38px;
height: 38px;
background: url("../../assets/images/homestead/selectionNext_icon.png")
no-repeat;
float: right;
margin-top: 2px;
}
}

.main_m {
overflow-y: auto;
padding: 10px 0;
// height: 300px;
flex: 1;
.flex_block {
height: 70px;
display: flex;
// justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
padding: 0 40px;
&.active {
box-shadow: 0px 0px 10px rgba(24, 45, 51, 0.5);
}
.name_text {
font-size: 28px;
flex: 0.5;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
}
.square_text {
font-size: 28px;
flex: 0.4;
}
.operation_mian {
flex: 0 0 150px;

.describe {
font-size: 20px;
padding: 6px 5px;
float: right;
color: #fff;
border-radius: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
&.yph {
background: #b026ff;
}
&.dlzdph {
background: #ff6f36;
}
&.ylz {
background: #7fff4c;
}
&.dlz {
background: rgb(255, 232, 76);
}
&.ylzdph {
background: #ff7dd0;
}
&.zy {
background: rgb(100, 30, 100);
}
&.xz {
background: rgb(60, 100, 180);
}
&.chdb {
background: #fe0303;
}
}
}
}
}
.footerBtn_wrap {
flex: 0 0 90px;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */

.options {
flex: 1;
font-size: 38px;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
height: 90px;
&:first-child {
border-bottom-left-radius: 15px;
}
&.active {
background: #3cbf5b;
color: #fff;
}
}
}
}

.checkbox {
width: 200px;
margin: 30px auto;
}

.thead-checkbox {
background-color: lightgray;
}

.item-checkbox {
border: 1px solid darkgray;
}

</style>

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить