diff --git a/src/assets/images/logo-2.png b/src/assets/images/logo-2.png new file mode 100644 index 0000000..cf2417a --- /dev/null +++ b/src/assets/images/logo-2.png Binary files differ diff --git a/src/assets/images/logo-2.png b/src/assets/images/logo-2.png new file mode 100644 index 0000000..cf2417a --- /dev/null +++ b/src/assets/images/logo-2.png Binary files differ diff --git a/src/components/map/index.vue b/src/components/map/index.vue index 5e8c15f..29bee98 100644 --- a/src/components/map/index.vue +++ b/src/components/map/index.vue @@ -24,10 +24,16 @@ ]) // 区域点数组 const markerArr = ref([ - [111.737806, 40.83676], - [111.737916, 40.83656], + [111.738956, 40.83476], + [111.738956, 40.83676], ]) - +// 折现节点坐标 +// const lineArr = ref([ +// [116.368904, 39.913423], +// [116.382122, 39.901176], +// [116.387271, 39.912501], +// [116.398258, 39.904600], +// ]) // 初始化地图 const initMap = () => { AMapLoader.load({ @@ -39,8 +45,8 @@ // 初始化地图 map.value = new AMap.Map('map', { viewMode: '2D', // 是否为3D地图模式 - zoom: 16, // 初始化地图级别 - center: [111.737906, 40.83686], + zoom: 17, // 初始化地图级别 + center: [111.737906, 40.83576], resizeEnable: true, }) // 用来画区域的 @@ -80,7 +86,7 @@ for (let i = 0; i < markerArr.value.length; i++) { const icon = new AMap.Icon({ size: new AMap.Size(36, 36), // 图标尺寸 - image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // Icon的图像 + image: 'https://img1.baidu.com/it/u=783564618,4142196075&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // Icon的图像 imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 }) @@ -90,12 +96,27 @@ map: map.value, title: '测试坐标', icon, - offset: new AMap.Pixel(0, 0), + offset: new AMap.Pixel(-20, -20), }) map.value.add([marker]) // 自动适应显示想显示的范围区域 // map.value.setFitView() } + // 折现 + const path = [ + new AMap.LngLat(111.737506, 40.83476), + new AMap.LngLat(111.738956, 40.83476), + new AMap.LngLat(111.738956, 40.83676), + ] + const polyline = new AMap.Polyline({ + path, + borderWeight: 1, // 线条宽度,默认为 1 + strokeColor: '#008d68', // 线条颜色 + lineJoin: 'round', // 折线拐点连接处样式 + strokeStyle: 'solid', + }) + polyline.setMap(map.value) + map.value.add(polyline) }) .catch((e) => { console.log(e) diff --git a/src/assets/images/logo-2.png b/src/assets/images/logo-2.png new file mode 100644 index 0000000..cf2417a --- /dev/null +++ b/src/assets/images/logo-2.png Binary files differ diff --git a/src/components/map/index.vue b/src/components/map/index.vue index 5e8c15f..29bee98 100644 --- a/src/components/map/index.vue +++ b/src/components/map/index.vue @@ -24,10 +24,16 @@ ]) // 区域点数组 const markerArr = ref([ - [111.737806, 40.83676], - [111.737916, 40.83656], + [111.738956, 40.83476], + [111.738956, 40.83676], ]) - +// 折现节点坐标 +// const lineArr = ref([ +// [116.368904, 39.913423], +// [116.382122, 39.901176], +// [116.387271, 39.912501], +// [116.398258, 39.904600], +// ]) // 初始化地图 const initMap = () => { AMapLoader.load({ @@ -39,8 +45,8 @@ // 初始化地图 map.value = new AMap.Map('map', { viewMode: '2D', // 是否为3D地图模式 - zoom: 16, // 初始化地图级别 - center: [111.737906, 40.83686], + zoom: 17, // 初始化地图级别 + center: [111.737906, 40.83576], resizeEnable: true, }) // 用来画区域的 @@ -80,7 +86,7 @@ for (let i = 0; i < markerArr.value.length; i++) { const icon = new AMap.Icon({ size: new AMap.Size(36, 36), // 图标尺寸 - image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // Icon的图像 + image: 'https://img1.baidu.com/it/u=783564618,4142196075&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // Icon的图像 imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 }) @@ -90,12 +96,27 @@ map: map.value, title: '测试坐标', icon, - offset: new AMap.Pixel(0, 0), + offset: new AMap.Pixel(-20, -20), }) map.value.add([marker]) // 自动适应显示想显示的范围区域 // map.value.setFitView() } + // 折现 + const path = [ + new AMap.LngLat(111.737506, 40.83476), + new AMap.LngLat(111.738956, 40.83476), + new AMap.LngLat(111.738956, 40.83676), + ] + const polyline = new AMap.Polyline({ + path, + borderWeight: 1, // 线条宽度,默认为 1 + strokeColor: '#008d68', // 线条颜色 + lineJoin: 'round', // 折线拐点连接处样式 + strokeStyle: 'solid', + }) + polyline.setMap(map.value) + map.value.add(polyline) }) .catch((e) => { console.log(e) diff --git a/src/layouts/components/Logo/index.vue b/src/layouts/components/Logo/index.vue index 3c9e6a1..286bbef 100644 --- a/src/layouts/components/Logo/index.vue +++ b/src/layouts/components/Logo/index.vue @@ -1,5 +1,5 @@