hookehuyr

fix

<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-24 15:06:47
* @LastEditTime: 2023-07-24 16:11:12
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 地图主体页面
-->
......@@ -252,16 +252,16 @@ export default {
navList: [],
navKey: '',
markerSum: [], // marker合集
titleLayerSet: {
17: {
x: [109439, 109441],
y: [53519, 53521]
},
18: {
x: [218879, 218882],
y: [107039, 107042]
}
},
// titleLayerSet: {
// 17: {
// x: [109439, 109441],
// y: [53519, 53521]
// },
// 18: {
// x: [218879, 218882],
// y: [107039, 107042]
// }
// },
defaultZoom: 18,
defaultCenter: [120.587382, 31.313900],
mapTiles: [],
......@@ -269,7 +269,6 @@ export default {
},
async mounted() {
const code = this.$route.query.id;
// const code = '362800';
const { data } = await mapAPI({i: code});
data.list = data.list.concat(map_yard);
data.list = data.list.concat(map_members);
......@@ -284,14 +283,6 @@ export default {
this.getLocation()
// 设置贴片地图
this.setTitleLayer();
// 每隔5分钟刷新地图
// setInterval(() => {
// this.map.resize();
// }, 1000 * 60 * 1);
// setInterval(() => {
// this.map.resize();
// console.warn(0);
// }, 1000 * 10);
},
watch: {
show_popup(val) {
......@@ -523,18 +514,16 @@ export default {
this.dialog_show = true;
this.dialog_text = '您不在景区范围内';
} else {
// this.current_lng = '120.587643'
// this.current_lat = '31.314853'
// 使用纠正偏移后的地址,打一个定位标记
var marker = new AMap.Marker({
icon: new AMap.Icon({
var marker = new AMap.LabelMarker({
icon: {
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
anchor: 'bottom-center',
size: [36, 36],
},
position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
offset: new AMap.Pixel(-20, -20)
});
this.map.add(marker);
// 定位到地图中心-西园寺
......@@ -802,6 +791,29 @@ export default {
}
},
setTitleLayer() { // 生成瓦片图
// 获取瓦片图渲染范围
function getFirstProperty(obj) {
for (var prop in obj) {
return prop;
}
}
function getLastProperty(obj) {
var props = [];
for (var prop in obj) {
props.push(prop);
}
return props[props.length - 1];
}
let obj_scope = {};
for (const key in this.mapTiles) {
const element = this.mapTiles[key];
let first = getFirstProperty(element).split('-');
let last = getLastProperty(element).split('-');
obj_scope[key] = {
x: [first[0], last[0]],
y: [first[1], last[1]]
}
}
const _this = this;
var layer = new AMap.TileLayer.Flexible({
cacheSize: 50,
......@@ -809,9 +821,9 @@ export default {
zIndex: 100,
createTile: function (x, y, z, success, fail) {
// 控制地图等级显示图片范围-过滤不显示的图层渲染
for (const id in _this.titleLayerSet) {
for (const id in obj_scope) {
if (z == id) {
const scope = _this.titleLayerSet[id];
const scope = obj_scope[id];
if (x < scope.x[0] || x > scope.x[1]) {
fail()
return;
......