fix:：调整地图api，设置线段打点层级修改
This commit is contained in:
parent
2e7e66f13a
commit
1d9f6d2b72
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-24 15:03:28
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-31 15:36:37
|
||||
* @LastEditTime: 2024-11-06 13:25:37
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@ -29,7 +29,7 @@ export function mapPointList(query) {
|
||||
// 获取地图绘制线段数据接口
|
||||
export function mapPciList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/roadPci",
|
||||
url: "/bigscreen/mapPci",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 1.9 KiB |
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 10:46:24
|
||||
* @LastEditTime: 2024-11-06 16:42:42
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -168,23 +168,23 @@ export default {
|
||||
methods: {
|
||||
/* 初始化openlayer地图 */
|
||||
initMap() {
|
||||
const tianditu_vec_c = new TileLayer({
|
||||
className: "baseLayerClass",
|
||||
title: "矢量底图",
|
||||
id: "vec_c",
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
}),
|
||||
visible: true,
|
||||
});
|
||||
// const tianditu_vec_c = new TileLayer({
|
||||
// className: "baseLayerClass",
|
||||
// title: "矢量底图",
|
||||
// id: "vec_c",
|
||||
// source: new XYZ({
|
||||
// url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
// projection: "EPSG:4326",
|
||||
// }),
|
||||
// visible: true,
|
||||
// });
|
||||
const tianditu_cva_c = new TileLayer({
|
||||
className: "baseLayerClass",
|
||||
title: "矢量地图",
|
||||
id: "cva_c",
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
url: "https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
||||
// projection: "EPSG:4326",
|
||||
}),
|
||||
visible: true,
|
||||
});
|
||||
@ -192,8 +192,8 @@ export default {
|
||||
title: "影像地图",
|
||||
id: "img_c",
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=img_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
||||
// projection: "EPSG:4326",
|
||||
}),
|
||||
visible: false,
|
||||
});
|
||||
@ -211,7 +211,7 @@ export default {
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
}),
|
||||
layers: [tianditu_vec_c, tianditu_img_c, tianditu_cva_c],
|
||||
layers: [ tianditu_img_c, tianditu_cva_c],
|
||||
});
|
||||
// 图层点击事件
|
||||
map.on("singleclick", (e) => {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-06 10:32:20
|
||||
* @LastEditTime: 2024-11-07 09:09:50
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -96,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右上角切换坐标类型多选框 -->
|
||||
<div class="road-checkBox" v-if="!showImgBk">
|
||||
<div class="road-checkBox" v-if="!showImgBk && this.mapZoom >= 13">
|
||||
<fssm-scroll class="road-scroll">
|
||||
<el-checkbox-group v-model="iconType" @change="handleChecked">
|
||||
<el-checkbox
|
||||
@ -115,12 +115,14 @@
|
||||
<div class="map-care">
|
||||
<div
|
||||
class="map-care-div"
|
||||
:class="`map-care-div-${item.tip}`"
|
||||
:class="`map-care-div-${item.status}`"
|
||||
v-for="(item, index) in mapCareList"
|
||||
:key="`map-care-${index}`"
|
||||
:style="{ left: item.left, top: item.top }"
|
||||
>
|
||||
<span @click="changeMap(false, item)">{{ item.name }}</span>
|
||||
<span @click="item.lat ? changeMap(false, item) : ''">{{
|
||||
item.name
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -129,7 +131,8 @@
|
||||
v-if="!showImgBk"
|
||||
ref="roadMap"
|
||||
:showChange="true"
|
||||
:controlStyle="{ top: '30%', right: '26%' }"
|
||||
:controlStyle="{ top: '23%', left: '27%' }"
|
||||
:centerPoint="mapCenterPoint"
|
||||
@map-moveend="mapMoveend"
|
||||
@map-zoom="getZoom"
|
||||
@feature-select="featureSelect"
|
||||
@ -331,6 +334,8 @@ export default {
|
||||
{ name: "道路资产", component: "RoadScreen" },
|
||||
{ name: "交安事件", component: "TrafficScreen" },
|
||||
],
|
||||
// 地图中心点
|
||||
mapCenterPoint: {},
|
||||
// 中心点集合(全部)
|
||||
centerPiont: [],
|
||||
// 中心点集合（当前）
|
||||
@ -389,6 +394,7 @@ export default {
|
||||
this.dataTime = `${hours}:${minutes}:${seconds}`;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/* 获取数据栏右上角选项数据 */
|
||||
getSelect() {
|
||||
selectTypeList().then(({ code, data }) => {
|
||||
@ -397,121 +403,26 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取图片背景下坐标数据 */
|
||||
getMapCare() {
|
||||
comppanyImg().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
// this.mapCareList = data.filter((item) => item.lat && item.lon);
|
||||
// console.log(this.mapCareList)
|
||||
this.mapCareList = data;
|
||||
}
|
||||
});
|
||||
this.mapCareList = [
|
||||
{
|
||||
name: "沈抚",
|
||||
left: "63%",
|
||||
top: "12%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "葫芦岛",
|
||||
left: "24%",
|
||||
top: "38%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "阜新",
|
||||
left: "40%",
|
||||
top: "10%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "盘锦",
|
||||
left: "44%",
|
||||
top: "27%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "铁岭",
|
||||
left: "70%",
|
||||
top: "3%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "抚顺",
|
||||
left: "56%",
|
||||
top: "17%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "本溪",
|
||||
left: "67%",
|
||||
top: "26%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "辽阳",
|
||||
left: "60%",
|
||||
top: "30%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "营口",
|
||||
left: "48%",
|
||||
top: "42%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "鞍山",
|
||||
left: "57%",
|
||||
top: "38%",
|
||||
tip: "1",
|
||||
},
|
||||
{
|
||||
name: "沈阳",
|
||||
left: "51%",
|
||||
top: "11%",
|
||||
tip: "2",
|
||||
},
|
||||
{
|
||||
name: "锦州",
|
||||
left: "35%",
|
||||
top: "25%",
|
||||
tip: "3",
|
||||
},
|
||||
{
|
||||
name: "朝阳",
|
||||
left: "20%",
|
||||
top: "20%",
|
||||
tip: "4",
|
||||
},
|
||||
{
|
||||
name: "大连",
|
||||
left: "43%",
|
||||
top: "53%",
|
||||
tip: "5",
|
||||
},
|
||||
{
|
||||
name: "丹东",
|
||||
left: "71%",
|
||||
top: "39%",
|
||||
tip: "6",
|
||||
},
|
||||
{
|
||||
name: "金普",
|
||||
left: "47%",
|
||||
top: "57%",
|
||||
tip: "6",
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
/* 点击病害筛查 */
|
||||
clickImg() {
|
||||
this.imgVisible = true;
|
||||
},
|
||||
|
||||
/* 关闭图片查看弹窗 */
|
||||
imgCancel() {
|
||||
this.imgVisible = false;
|
||||
},
|
||||
|
||||
/* 切换icon类型多选框事件 */
|
||||
handleChecked(value) {
|
||||
this.centerPiont = this.drawPointList.filter(
|
||||
@ -524,9 +435,11 @@ export default {
|
||||
this.drawPoint();
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击图片点位切换地图事件 */
|
||||
changeMap(boolen, value) {
|
||||
changeMap(boolen, item) {
|
||||
this.showImgBk = boolen;
|
||||
this.mapCenterPoint = { lat: item.lat * 1, lon: item.lon * 1 };
|
||||
if (!boolen) {
|
||||
// 默认点击的图标是巡查车
|
||||
this.changeIconType("defect");
|
||||
@ -535,8 +448,10 @@ export default {
|
||||
this.mapZoom = "";
|
||||
this.clusters = null;
|
||||
this.markLayerLines = null;
|
||||
this.mapCenterPoint = {};
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
// 如果当前已经有打点坐标
|
||||
@ -566,6 +481,7 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制地图点位 */
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
@ -596,8 +512,8 @@ export default {
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: 60,
|
||||
minDistance: 60,
|
||||
distance: this.mapZoom > 15 ? 0 : 130,
|
||||
minDistance: this.mapZoom > 15 ? 0 : 130,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
@ -665,21 +581,21 @@ export default {
|
||||
map.addLayer(this.clusters);
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
if (!this.markLayerLines) {
|
||||
mapPciList({ type: this.mapClick }).then(({ code, data }) => {
|
||||
mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.lineString = data.map((item) => {
|
||||
return item.coordinates.split(";").map((it) => {
|
||||
return item?.coordinates?.split(";").map((it) => {
|
||||
return it.split(",").map(Number);
|
||||
});
|
||||
});
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制地图线段 */
|
||||
drawLine() {
|
||||
const features = [];
|
||||
@ -724,17 +640,18 @@ export default {
|
||||
map.addLayer(this.markLayerLines);
|
||||
});
|
||||
},
|
||||
|
||||
/* 图标类别切换点击事件 */
|
||||
changeIconType(value) {
|
||||
if (this.mapClick !== value) {
|
||||
this.mapClick = value;
|
||||
if (this.$refs.roadMap) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
map.removeLayer(this.clusters);
|
||||
this.clusters = null;
|
||||
this.markLayerLines = null;
|
||||
}
|
||||
});
|
||||
// 获取对应右上角icon类型
|
||||
this.getIconType(value);
|
||||
// 请求地图打点/绘制线段接口
|
||||
@ -745,6 +662,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取icon多选数据 */
|
||||
getIconType(value) {
|
||||
this.mapLogeList = {};
|
||||
@ -760,36 +678,38 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 传回来的地图图层 */
|
||||
getZoom(zoom) {
|
||||
if (zoom === "10") {
|
||||
// 绘制点位
|
||||
this.mapZoom = zoom;
|
||||
if (zoom * 1 >= 13) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
this.getCenterPiont();
|
||||
this.mapZoom = zoom;
|
||||
} else if (zoom === "9") {
|
||||
// 绘制线段
|
||||
});
|
||||
} else if (zoom * 1 < 13) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.clusters = null;
|
||||
});
|
||||
this.markLayerLines = null;
|
||||
this.getLinePoint();
|
||||
this.mapZoom = zoom;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 地图缩放完成事件 */
|
||||
mapMoveend(zoom) {
|
||||
if (this.clusters && zoom > 13) {
|
||||
if (this.clusters && zoom * 1 > 15) {
|
||||
this.clusters.getSource().setDistance(0);
|
||||
} else if (this.clusters && zoom <= 13) {
|
||||
this.clusters.getSource().setDistance(60);
|
||||
} else if (this.clusters && zoom * 1 <= 15) {
|
||||
this.clusters.getSource().setDistance(130);
|
||||
}
|
||||
},
|
||||
|
||||
/* 地图选中feature事件 */
|
||||
featureSelect(e) {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
@ -820,6 +740,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* 数据栏切换事件 */
|
||||
changeElement(item) {
|
||||
if (this.elementDiv !== item) {
|
||||
@ -968,6 +889,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* 跳转系统首页 */
|
||||
goIndex() {
|
||||
this.$router.push("/index");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user