fix：修改地图放大层级
This commit is contained in:
parent
9953c5004c
commit
22d329922a
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2025-01-07 17:07:28
|
||||
* @LastEditTime: 2025-03-28 13:51:38
|
||||
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -76,6 +76,11 @@ export default {
|
||||
type: String,
|
||||
default: "10",
|
||||
},
|
||||
// 接受传过来的地图最大层级
|
||||
maxZoom: {
|
||||
type: Number,
|
||||
default: 18,
|
||||
},
|
||||
// 是否显示绘制多边形功能
|
||||
showDraw: {
|
||||
type: Boolean,
|
||||
@ -293,7 +298,7 @@ export default {
|
||||
zoom: this.zoom, //图层缩放大小
|
||||
projection: "EPSG:4326",
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
maxZoom: this.maxZoom,
|
||||
}),
|
||||
// 内网
|
||||
// layers: [tianditu_cva_c, tianditu_vec_c, tianditu_img_c],
|
||||
@ -307,6 +312,19 @@ export default {
|
||||
source: new XYZ({
|
||||
url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
||||
// projection: "EPSG:4326",
|
||||
tileLoadFunction: (tile, src) => {
|
||||
const tileCoord = tile.getTileCoord();
|
||||
let zoom = tileCoord[0];
|
||||
if (zoom > 18) {
|
||||
// 当缩放层级大于 18 时，使用 18 层的瓦片
|
||||
zoom = 18;
|
||||
const scale = Math.pow(2, tileCoord[0] - 18);
|
||||
const newX = Math.floor(tileCoord[1] / scale);
|
||||
const newY = Math.floor(tileCoord[2] / scale);
|
||||
src = `https://webst01.is.autonavi.com/appmaptile?style=6&x=${newX}&y=${newY}&z=${zoom}`;
|
||||
}
|
||||
tile.getImage().src = src;
|
||||
},
|
||||
}),
|
||||
visible: false,
|
||||
});
|
||||
@ -323,6 +341,19 @@ export default {
|
||||
source: new XYZ({
|
||||
url: "http://10.60.5.242:25003/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
||||
// projection: "EPSG:4326",
|
||||
tileLoadFunction: (tile, src) => {
|
||||
const tileCoord = tile.getTileCoord();
|
||||
let zoom = tileCoord[0];
|
||||
if (zoom > 18) {
|
||||
// 当缩放层级大于 18 时，使用 18 层的瓦片
|
||||
zoom = 18;
|
||||
const scale = Math.pow(2, tileCoord[0] - 18);
|
||||
const newX = Math.floor(tileCoord[1] / scale);
|
||||
const newY = Math.floor(tileCoord[2] / scale);
|
||||
src = `http://10.60.5.242:25003/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x=${newX}&y=${newY}&z=${zoom}`;
|
||||
}
|
||||
tile.getImage().src = src;
|
||||
},
|
||||
}),
|
||||
visible: true,
|
||||
});
|
||||
@ -332,6 +363,19 @@ export default {
|
||||
source: new XYZ({
|
||||
url: "http://10.60.5.242:25033/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
||||
// projection: "EPSG:4326",
|
||||
tileLoadFunction: (tile, src) => {
|
||||
const tileCoord = tile.getTileCoord();
|
||||
let zoom = tileCoord[0];
|
||||
if (zoom > 18) {
|
||||
// 当缩放层级大于 18 时，使用 18 层的瓦片
|
||||
zoom = 18;
|
||||
const scale = Math.pow(2, tileCoord[0] - 18);
|
||||
const newX = Math.floor(tileCoord[1] / scale);
|
||||
const newY = Math.floor(tileCoord[2] / scale);
|
||||
src = `http://10.60.5.242:25033/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x=${newX}&y=${newY}&z=${zoom}`;
|
||||
}
|
||||
tile.getImage().src = src;
|
||||
},
|
||||
}),
|
||||
visible: true,
|
||||
});
|
||||
@ -347,6 +391,20 @@ export default {
|
||||
source: new XYZ({
|
||||
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",
|
||||
subdomains: ["1", "2", "3", "4"],
|
||||
tileLoadFunction: (tile, src) => {
|
||||
const tileCoord = tile.getTileCoord();
|
||||
let zoom = tileCoord[0];
|
||||
if (zoom > 18) {
|
||||
// 当缩放层级大于 18 时，使用 18 层的瓦片
|
||||
zoom = 18;
|
||||
const scale = Math.pow(2, tileCoord[0] - 18);
|
||||
const newX = Math.floor(tileCoord[1] / scale);
|
||||
const newY = Math.floor(tileCoord[2] / scale);
|
||||
src = `https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${newX}&y=${newY}&z=${zoom}`;
|
||||
}
|
||||
tile.getImage().src = src;
|
||||
},
|
||||
}),
|
||||
visible: true,
|
||||
});
|
||||
|
||||
@ -2,39 +2,57 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2025-03-25 11:10:16
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2025-03-25 16:25:50
|
||||
* @LastEditTime: 2025-03-28 14:14:07
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\index.vue
|
||||
* @Description: 地图展示病害-首页
|
||||
-->
|
||||
<template>
|
||||
<div class="map-diease-content">
|
||||
<div class="diease-form">
|
||||
<el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
:rules="rules"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="道路名称" prop="segmentId">
|
||||
<el-select v-model="queryParams.segmentId" placeholder="请选择路段" filterable clearable>
|
||||
<el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-select
|
||||
v-model="queryParams.segmentId"
|
||||
placeholder="请选择路段"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in segmentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="距离" prop="maxLength">
|
||||
<el-input placeholder="请输入内容" v-model="queryParams.maxLength">
|
||||
<template slot="prepend">大于:</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>筛选</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<fssm-map class="map-diease-map"></fssm-map>
|
||||
<fssm-map class="map-diease-map" :maxZoom="22"></fssm-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSegment } from '@/api/xj/mapDisease'
|
||||
import fssmMap from '@/components/map/fssm-map.vue'
|
||||
import { getSegment } from "@/api/xj/mapDisease";
|
||||
import fssmMap from "@/components/map/fssm-map.vue";
|
||||
export default {
|
||||
components: { fssmMap },
|
||||
name: 'MapDiease',
|
||||
name: "MapDiease",
|
||||
data() {
|
||||
return {
|
||||
// 搜索表单
|
||||
@ -47,26 +65,26 @@ export default {
|
||||
// 表单规则
|
||||
rules: {
|
||||
maxLength: [
|
||||
{ required: false, message: '请选择路段', trigger: 'blur' },
|
||||
{ required: false, message: "请选择路段", trigger: "blur" },
|
||||
{
|
||||
pattern: /^\d+$/,
|
||||
message: "请输入非负整数",
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
// 道路名称下拉数据
|
||||
segmentList: []
|
||||
}
|
||||
segmentList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getSegmentList()
|
||||
this.getSegmentList();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 获取路段下拉数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
* @description: 获取路段下拉数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -76,12 +94,12 @@ export default {
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 筛选事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
* @description: 筛选事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
handleQuery() {
|
||||
this.$refs.queryForm.validate(valid => {
|
||||
this.$refs.queryForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.drawMapPoint();
|
||||
}
|
||||
@ -89,15 +107,13 @@ export default {
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 绘制点位
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawMapPoint() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
* @description: 绘制点位
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawMapPoint() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user