因为性能关系,在Openlayers上同时显示过多时会造成卡顿,这里做成了根据图幅号查询图幅,并在地图显示。注意这里使用的是最新的图幅编号。
代码是使用Vue写的,借鉴的时候需要注意一下
selectMapNumber() {
const that = this;
this.$prompt("请输入图幅号", "图幅选取", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputErrorMessage: "格式不正确"
})
.then(({ value }) => {
that.computeMapExtent(value);
})
.catch(err => {
console.log(err);
});
},
computeMapExtent(val) {
var length = val.length;
switch (length) {
case 3:
this.split3(val);
break;
case 10:
this.split10(val);
break;
case 12:
this.split12(val);
break;
default:
alert("图幅格式错误!");
break;
}
},
split3(lesson) {
var code = new Array(2);
code[0] = lesson.slice(0, 1);
code[1] = lesson.slice(1, 3);
this.changeCode2("A");
this.LatR = (this.changeCode0(code[0]) - 1) * 4;
this.LongR = (parseInt(code[1]) - 31) * 6;
this.outPutExtent(
this.LatR,
this.LongR,
this.LatR + this.Lat,
this.LongR + this.Long,
lesson
);
},
split10(lesson) {
var code = new Array(5);
code[0] = lesson.slice(0, 1);
code[1] = lesson.slice(1, 3);
code[2] = lesson.slice(3, 4);
code[3] = lesson.slice(4, 7);
code[4] = lesson.slice(7, 10);
this.changeCode2(code[2]);
this.LatR =
(this.changeCode0(code[0]) - 1) * 4 +
(4 / this.Lat - parseInt(code[3])) * this.Lat;
this.LongR =
(parseInt(code[1]) - 31) * 6 + parseInt(code[4] - 1) * this.Long;
this.outPutExtent(
this.LatR,
this.LongR,
this.LatR + this.Lat,
this.LongR + this.Long,
lesson
);
},
split12(lesson) {
var code = new Array(5);
code[0] = lesson.slice(0, 1);
code[1] = lesson.slice(1, 3);
code[2] = lesson.slice(3, 4);
code[3] = lesson.slice(4, 8);
code[4] = lesson.slice(8, 12);
this.changeCode2(code[2]);
this.LatR =
(this.changeCode0(code[0]) - 1) * 4 +
(4 / this.lat - parseInt(code[3])) * this.Lat;
this.LongR =
(parseInt(code[1]) - 31) * 6 + parseInt(code[4] - 1) * this.Long;
this.outPutExtent(
this.LatR,
this.LongR,
this.LatR + this.Lat,
this.LongR + this.Long,
lesson
);
},
changeCode0(C) {
return C.charCodeAt() - 64;
},
changeCode2(C) {
var num = C.charCodeAt() - 64;
this.Long = this.Lat = 0;
if (num == 1) {
//1:100万
this.Long = 6;
this.Lat = 4;
} else if (num == 2) {
//1:50万
this.Long = 3;
this.Lat = 2;
} else if (num == 3) {
//1:25万
this.Long = 1.5;
this.Lat = 1;
} else if (num == 4) {
//1:10万
this.Long = 0.5;
this.Lat = 1 / 3;
} else if (num == 5) {
//1:5万
this.Long = 1 / 4;
this.Lat = 1 / 6;
} else if (num == 6) {
//1:2.5万
this.Long = 1 / 8;
this.Lat = 1 / 12;
} else if (num == 7) {
//1:1万
this.Long = 1 / 16;
this.Lat = 1 / 24;
} else if (num == 8) {
//1:5000
this.Long = 1 / 32;
this.Lat = 1 / 48;
} else if (num == 8) {
//1:2000
this.Long = 1 / 96;
this.Lat = 1 / 144;
} else if (num == 8) {
//1:1000
this.Long = 1 / 192;
this.Lat = 1 / 288;
} else if (num == 8) {
//1:500
this.Long = 1 / 384;
this.Lat = 1 / 576;
}
},
outPutExtent(lat0, lon0, lat1, lon1, number) {
var geom = ol.geom.Polygon.fromExtent([lon0, lat0, lon1, lat1]);
var feature = new ol.Feature({
geometry: geom,
labelPoint: new ol.geom.Point([(lat0 + lat1) / 2, (lon0 + lon1) / 2]),
name: number
});
feature.setStyle(this.createLabelStyle(feature));
var vectorLayer = getLayerByName(this.$map2d, "measureLayer");
var vectorSource = vectorLayer.getSource();
vectorSource.clear();
vectorSource.addFeature(feature);
this.$map2d.getView().fit(geom);
},
//生成样式
createLabelStyle(feature) {
return new ol.style.Style({
text: new ol.style.Text({
textAlign: "center",
textBaseLine: "middle",
font: "bold 20px 微软雅黑",
text: feature.get("name"),
fill: new ol.style.Fill({
color: "red"
}),
stoke: new ol.style.Stroke({
color: "red",
width: 2
})
}),
fill: new ol.style.Fill({
color: "rgba(255, 255, 255, 0.2)" //填充颜色
}),
stroke: new ol.style.Stroke({
color: "red", //边框颜色
width: 2 // 边框宽度
})
});
},
最后的结果如下图所示: