Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
20d06d5c 1 parent 67659feb

fix

Inline Side-by-side
Showing 3 changed files with 90 additions and 89 deletions
......@@ -13,3 +13,4 @@ src/test/mocha/test.js
cypress.json
src/test
.idea
map
......
......@@ -12,10 +12,8 @@ declare module '@vue/runtime-core' {
InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanCol: typeof import('vant/es')['Col']
VanDialog: typeof import('vant/es')['Dialog']
VanIcon: typeof import('vant/es')['Icon']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
}
}
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-01 17:42:52
* @LastEditTime: 2023-06-02 10:57:57
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
......@@ -263,46 +263,48 @@ export default {
rotateEnable: false,
layers: [
// new AMap.TileLayer.RoadNet(),
]
],
features: ['bg'], // 设置地图上显示的元素种类
animateEnable: false, // 地图平移过程中是否使用动画
});
// 添加地图点击事件
this.map.on("click", this.showInfoClick);
//
this.setSpotLayer()
},
layerMap() {
// 图层地图
this.imageLayer = new AMap.ImageLayer({
url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
// url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg',
// url: 'https://cdn.ipadbiz.cn/tmp/map_test/xys.jpg',
bounds: new AMap.Bounds(
[116.406897, 39.874346], [116.417451, 39.887843] // 对象西南角经纬度和东北角经纬度值
),
opacity: 0.5, // 图层透明度，默认为 1
zooms: [2, 18],
zIndex: 6 // 图层的层级，默认为 6
});
this.map = new AMap.Map('container', {
viewMode: '3D', // 设置地图模式
turboMode: false,
showIndoorMap: false,
defaultCursor: 'pointer', // 地图默认鼠标样式
showBuildingBlock: false, // 是否展示地图 3D 楼块
zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
showLabel: false, // 是否展示地图文字和 POI 信息
zoom: 18, // 设置地图显示的缩放级别
pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
center: [116.408967, 39.880101], // 设置地图中心点坐标
forceVector: false,
rotateEnable: false,
layers: [
new AMap.TileLayer.RoadNet(),
this.imageLayer
]
});
},
// layerMap() {
// // 图层地图
// this.imageLayer = new AMap.ImageLayer({
// url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
// // url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg',
// // url: 'https://cdn.ipadbiz.cn/tmp/map_test/xys.jpg',
// bounds: new AMap.Bounds(
// [116.406897, 39.874346], [116.417451, 39.887843] // 对象西南角经纬度和东北角经纬度值
// ),
// opacity: 0.5, // 图层透明度，默认为 1
// zooms: [2, 18],
// zIndex: 6 // 图层的层级，默认为 6
// });
// this.map = new AMap.Map('container', {
// viewMode: '3D', // 设置地图模式
// turboMode: false,
// showIndoorMap: false,
// defaultCursor: 'pointer', // 地图默认鼠标样式
// showBuildingBlock: false, // 是否展示地图 3D 楼块
// zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
// showLabel: false, // 是否展示地图文字和 POI 信息
// zoom: 18, // 设置地图显示的缩放级别
// pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
// rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
// center: [116.408967, 39.880101], // 设置地图中心点坐标
// forceVector: false,
// rotateEnable: false,
// layers: [
// new AMap.TileLayer.RoadNet(),
// this.imageLayer
// ]
// });
// },
// loadPublicEquipment() { // 加载公共设备图标
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
// _.each(coord.sheshi, (x, i) => {
......@@ -346,57 +348,57 @@ export default {
// })
// this.map.add(this.facilities);
// },
loadScenicSpot() { // 加载景点图标
var spots = [];
var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
_.each(coord.touristSpots, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.touristSpots[i].position,
zooms: [14, 20],
styles: [{
icon: {
img: coord.touristSpots[i].smallIcon,
size: [16, 16], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 2, // 最大放大比例
minScale: 1 // 最小放大比例
},
label: {
content: coord.touristSpots[i].name,
position: 'BM',
minZoom: coord.touristSpots[i].minZoom
}
}, {
icon: {
img: coord.touristSpots[i].bigIcon,
size: coord.touristSpots[i].size,
anchor: coord.touristSpots[i].anchor,
fitZoom: 17.5,
scaleFactor: 2,
maxScale: 2,
minScale: 0.125
},
label: {
content: coord.touristSpots[i].name,
position: 'BM',
minZoom: coord.touristSpots[i].minZoom
}
}],
zoomStyleMapping
});
if (clickListener) {
AMap.Event.removeListener(clickListener); // 移除地图事件，以绑定时返回的对象作为参数
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = AMap.Event.addListener(marker, 'click', function (e) {
alert(coord.touristSpots[i].name)
});
spots.push(marker);
})
this.map.add(spots);
},
// loadScenicSpot() { // 加载景点图标
// var spots = [];
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
// _.each(coord.touristSpots, (x, i) => {
// var marker = new AMap.ElasticMarker({
// position: coord.touristSpots[i].position,
// zooms: [14, 20],
// styles: [{
// icon: {
// img: coord.touristSpots[i].smallIcon,
// size: [16, 16], // 可见区域的大小
// anchor: 'bottom-center', // 锚点
// fitZoom: 14, // 最合适的级别
// scaleFactor: 2, // 地图放大一级的缩放比例系数
// maxScale: 2, // 最大放大比例
// minScale: 1 // 最小放大比例
// },
// label: {
// content: coord.touristSpots[i].name,
// position: 'BM',
// minZoom: coord.touristSpots[i].minZoom
// }
// }, {
// icon: {
// img: coord.touristSpots[i].bigIcon,
// size: coord.touristSpots[i].size,
// anchor: coord.touristSpots[i].anchor,
// fitZoom: 17.5,
// scaleFactor: 2,
// maxScale: 2,
// minScale: 0.125
// },
// label: {
// content: coord.touristSpots[i].name,
// position: 'BM',
// minZoom: coord.touristSpots[i].minZoom
// }
// }],
// zoomStyleMapping
// });
// if (clickListener) {
// AMap.Event.removeListener(clickListener); // 移除地图事件，以绑定时返回的对象作为参数
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener = AMap.Event.addListener(marker, 'click', function (e) {
// alert(coord.touristSpots[i].name)
// });
// spots.push(marker);
// })
// this.map.add(spots);
// },
// loadPlant() { // 加载植物图标
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
// var trees = new AMap.ElasticMarker({
......@@ -774,7 +776,7 @@ export default {
}
});
layer1.setMap(this.map);
// layer1.setMap(this.map);
// 只显示相应区域，移动会回到选定范围
// this.lockMapBounds()
......