Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6e901f12 1 parent 7ad6c2b1

fix 访问数据结构调整

Inline Side-by-side
Showing 1 changed file with 105 additions and 113 deletions
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-30 17:33:58
* @LastEditTime: 2023-07-04 14:50:06
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -214,6 +214,18 @@ export default {
navList: [],
navKey: '',
markerSum: [], // marker合集
titleLayerSet: {
17: {
x: [109439, 109441],
y: [53519, 53521]
},
18: {
x: [218879, 218882],
y: [107039, 107042]
}
},
defaultZoom: 18,
defaultCenter: [120.587382, 31.313900]
}
},
mounted() {
......@@ -297,9 +309,8 @@ export default {
this.closeInfoWindow();
setTimeout(() => {
// 地图zooms调整
this.map.setZoom(18);
// this.map.setZoomAndCenter(18, [this.xys_lng, this.xys_lat]);
this.map.setZoomAndCenter(18, [120.587382, 31.313900]);
this.map.setZoom(this.defaultZoom);
this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
}, 100);
this.removeNavRoute()
},
......@@ -354,42 +365,42 @@ export default {
removeLayer () {
this.map.remove(this.markerSum);
},
setMapBoundary() { // 地图描边
new AMap.Polygon({
cursor: 'pointer',
bubble: true,
path: [[120.587704, 31.312785], [120.587669, 31.313028], [120.587554, 31.313086], [120.586883, 31.313019], [120.586826, 31.314066], [120.586736, 31.314426], [120.585872, 31.314466], [120.585675, 31.315276], [120.585817, 31.315397], [120.586251, 31.31542], [120.586229, 31.31618], [120.588248, 31.316367], [120.588533, 31.314761], [120.588479, 31.31474], [120.588482, 31.314172], [120.588251, 31.314145], [120.588337, 31.313184], [120.588337, 31.313184], [120.588154, 31.313163], [120.588152, 31.312835]],
map: this.map,
fillOpacity: 0.5,
strokeWeight: 1,
fillColor: '#CFE7AA'
});
},
isPointInRing() { // 是否在景区范围
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
]);
return isPointInRing
},
setLocation() { // 开启定位服务
// this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
if (!this.current_lng || !this.current_lat) {
this.getLocation()
} else {
// 使用纠正偏移后的地址，打一个定位标记
var marker = new AMap.Marker({
position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.map.add(marker);
// 定位到地图中心-西园寺
this.map.setCenter([120.587334, 31.314823]);
// 判断是否在范围内
if (!this.isPointInRing()) {
this.dialog_show = true;
this.dialog_text = '您不在景区范围内';
}
}
},
// setMapBoundary() { // 地图描边
// new AMap.Polygon({
// cursor: 'pointer',
// bubble: true,
// path: [[120.587704, 31.312785], [120.587669, 31.313028], [120.587554, 31.313086], [120.586883, 31.313019], [120.586826, 31.314066], [120.586736, 31.314426], [120.585872, 31.314466], [120.585675, 31.315276], [120.585817, 31.315397], [120.586251, 31.31542], [120.586229, 31.31618], [120.588248, 31.316367], [120.588533, 31.314761], [120.588479, 31.31474], [120.588482, 31.314172], [120.588251, 31.314145], [120.588337, 31.313184], [120.588337, 31.313184], [120.588154, 31.313163], [120.588152, 31.312835]],
// map: this.map,
// fillOpacity: 0.5,
// strokeWeight: 1,
// fillColor: '#CFE7AA'
// });
// },
// isPointInRing() { // 是否在景区范围
// let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
// [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
// ]);
// return isPointInRing
// },
// setLocation() { // 开启定位服务
// // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
// if (!this.current_lng || !this.current_lat) {
// this.getLocation()
// } else {
// // 使用纠正偏移后的地址，打一个定位标记
// var marker = new AMap.Marker({
// position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// });
// this.map.add(marker);
// // 定位到地图中心-西园寺
// this.map.setCenter([120.587334, 31.314823]);
// // 判断是否在范围内
// if (!this.isPointInRing()) {
// this.dialog_show = true;
// this.dialog_text = '您不在景区范围内';
// }
// }
// },
getLocation() { // 获取经纬度
AMap.plugin(['AMap.Geolocation'], () => {
this.geolocation = new AMap.Geolocation(this.location_options);
......@@ -418,10 +429,10 @@ export default {
addSafeRoute() { // 新增路径
// 行动路线
var path = [
[120.587512, 31.313796],
[120.587495, 31.314204],
[120.586841, 31.314543],
[120.586862, 31.314304],
[120.586841, 31.314543]
[120.587495, 31.314204],
[120.587512, 31.313796],
];
// 生成折线地图路径
this.current_route = new AMap.Polyline({
......@@ -458,7 +469,7 @@ export default {
marker1.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>起点</div>", //设置文本标注内容
content: "<div class='info'>终点</div>", //设置文本标注内容
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
......@@ -476,7 +487,7 @@ export default {
marker2.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>终点</div>", //设置文本标注内容
content: "<div class='info'>起点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.route_marker = [marker1, marker2]
......@@ -554,30 +565,28 @@ export default {
// 关闭导航提示
this.show_walk_route = true;
},
computedMapSource(x, y, z) { // 根据图层信息生成图层实际地址
return `images/tiles/${z}/${x}_${y}.png`
},
setTitleLayer() { // 生成瓦片图
const _this = this;
var layer = new AMap.TileLayer.Flexible({
cacheSize: 50,
opacity: 1,
zIndex: 100,
createTile: function (x, y, z, success, fail) {
if (z === 17) {
if (x < 109439 || x > 109441) {
fail()
return;
}
if (y < 53519 || y > 53521) {
fail()
return;
}
}
if (z === 18) {
if (x < 218879 || x > 218882) {
// 控制地图等级显示图片范围-过滤不显示的图层渲染
for (const key in _this.titleLayerSet) {
if (z == key) {
const scope = _this.titleLayerSet[key];
if (x < scope.x[0] || x > scope.x[1]) {
fail()
return;
}
if (y < 107039 || y > 107042) {
fail()
return;
return;
}
if (y < scope.y[0] || y > scope.y[1]) {
fail()
return;
}
}
}
......@@ -590,26 +599,9 @@ export default {
fail()
};
img.src = `images/tiles/${z}/${x}_${y}.png`
// img.src = `images/tiles/${z}/${x}_${y}.png`;
img.src = _this.computedMapSource(x, y, z);
},
// createTile: function (x, y, z, success, fail) {
// console.warn(z);
// if ((x + y) % 3) {
// fail();
// return;
// }
// var img = document.createElement('img');
// img.onload = function () {
// success(img)
// };
// img.crossOrigin = "anonymous";// 必须添加，同时图片要有跨域头
// img.onerror = function () {
// fail()
// };
// img.src = 'https://a.amap.com/jsapi_demos/static/images/amap.png';
// }
});
this.map.addLayer(layer);
......@@ -642,15 +634,15 @@ export default {
},
// 限制地图范围
lockMapBounds() {
// var bounds = this.map.getBounds();
var myBounds = new AMap.Bounds(
[120.583246, 31.31645],
[120.589973, 31.311949]
);
// lockMapBounds() {
// // var bounds = this.map.getBounds();
// var myBounds = new AMap.Bounds(
// [120.583246, 31.31645],
// [120.589973, 31.311949]
// );
this.map.setLimitBounds(myBounds);
},
// this.map.setLimitBounds(myBounds);
// },
showInfoClick(e) {
// console.log(e);
var zoom = this.map.getZoom(); //获取当前地图级别
......@@ -667,30 +659,30 @@ export default {
// 关闭弹出底部导航弹框
this.show_nav_popup = false;
},
setWalkRoute(start = { lng: 120.587799, lat: 31.313276 }, end = { lng: 120.587912, lat: 31.315169 }) {
//步行导航
let walking_CallBack = (result) => {
if (result.type === 'complete') {
console.warn(result);
console.warn('绘制步行路线完成');
} else {
console.error('步行路线数据查询失败' + result);
}
}
AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
this.walk_route = new AMap.Walking({
map: this.map,
}); //构造步行导航类
AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
//根据起、终点坐标规划步行路线
this.walk_route.search(new AMap.LngLat(start.lng, start.lat), new AMap.LngLat(end.lng, end.lat));
});
this.show_walk_route = false;
},
removeWalkRoute() {
this.walk_route.clear();
this.show_walk_route = true;
},
// setWalkRoute(start = { lng: 120.587799, lat: 31.313276 }, end = { lng: 120.587912, lat: 31.315169 }) {
// //步行导航
// let walking_CallBack = (result) => {
// if (result.type === 'complete') {
// console.warn(result);
// console.warn('绘制步行路线完成');
// } else {
// console.error('步行路线数据查询失败' + result);
// }
// }
// AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
// this.walk_route = new AMap.Walking({
// map: this.map,
// }); //构造步行导航类
// AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
// //根据起、终点坐标规划步行路线
// this.walk_route.search(new AMap.LngLat(start.lng, start.lat), new AMap.LngLat(end.lng, end.lat));
// });
// this.show_walk_route = false;
// },
// removeWalkRoute() {
// this.walk_route.clear();
// this.show_walk_route = true;
// },
infoWindowLocation(path) { // 监听前往按钮回调
// TODO: 实际获取精确定位后导航到位置
// // 判断是否在范围内
......