vue 高德地图绘制覆盖物时使用的一些方法
首先使用并引入高德地图
- 第一种使用方法
-
使用 npm 安装
- npm i @amap/amap-jsapi-loader --save
-
使用安全秘钥
- 在 public 下的 index.html 中设置安全秘钥
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <title><%= htmlWebpackPlugin.options.title %></title> <link rel="stylesheet" type="text/css" href="./css/element-theme-chalk2.15.6.css" /> </head> <body> <noscript> <strong >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app"></div> <script> window._AMapSecurityConfig = { securityJsCode: '「您申请的安全密钥」' } </script> </body> </html>
-
在页面引入使用
<div id='container'></div> //必须有宽高 import AMapLoader from '@amap/amap-jsapi-loader' AMapLoader.load({ key: '', // 申请好的Web端开发者Key，首次调用 load 时必填 version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15 plugins: ['AMap.Scale'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }) .then(AMap => { map = new AMap.Map('container') }) .catch(e => { console.log(e) }) -
第二种使用方法
-
下载高德地图js文件及UI文件，放到utils文件下
-
高德地图js文件 – map.js【http://webapi.amap.com/maps?v=1.4.3&key=你的高德地图key&plugin=''将其下载下来】
-
高德地图UI文件 – mapUI.js【https://webapi.amap.com/ui/1.0/main.js】
-
-
在vue文件中使用
<div id='container'></div> //必须有宽高
import '@/utils/map'
import '@/utils/mapUI'
initDDMap () {
this.map = new AMap.Map('container', {
resizeEnable: true,
zoom:[1,20],
mapStyle:'amap://styles/whitesmoke' //地图样式
})
}
绘制marker
let points = this.mapList
var cluster,
markers = []
let lngArr = []
let latArr = []
let that = this
for (var i = 0; i < points.length; i++) {
let { longitude, latitude } = points[i]
if (longitude && latitude) {
lngArr.push(longitude)
latArr.push(latitude)
markers.push(
new AMap.Marker({
position: [longitude.toString(), latitude.toString()],
content: ``,
offset: new AMap.Pixel(-5, -5),
extData: { value: points[i].ratedPower }
})
)
}
}
marker过多时使用聚合
- 根据聚合点的数量设置聚合的颜色
var _renderClusterMarker = function (context) {
let myMarkers = context.markers || []
let num = 0
myMarkers.forEach(item => {
num += item.De.extData.value
})
// 聚合中点个数
var clusterCount = context.count
var div = document.createElement('div')
// 聚合点配色
var defaultColor = [
'178, 255, 0',
'255, 205, 0',
'255, 149, 0',
'255, 82, 0',
'0, 204, 204'
]
var bgColor, width
if (clusterCount == 1) {
bgColor = defaultColor[4]
width = 10
} else if (clusterCount > 1 && clusterCount <= 5) {
bgColor = defaultColor[3]
width = 12
} else if (clusterCount > 5 && clusterCount <= 10) {
bgColor = defaultColor[3]
width = 16
} else if (clusterCount > 10 && clusterCount <= 15) {
bgColor = defaultColor[3]
width = 18
} else if (clusterCount > 15) {
bgColor = defaultColor[3]
width = 20
}
div.style.backgroundColor = 'rgba(' + bgColor + ',.5)'
var size = width+'px'
// var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40)
div.style.width = div.style.height = size
div.style.border = 'solid 1px rgba(' + bgColor + ',1)'
div.style.borderRadius = '50%'
// div.innerHTML = num
div.style.lineHeight = size + 'px'
div.style.color = '#ffffff'
div.style.fontSize = 24+'px'
div.style.textAlign = 'center'
context.marker.setOffset(new AMap.Pixel(-width / 2, -width / 2))
context.marker.setContent(div)
}
this.map.plugin(['AMap.MarkerClusterer'], function () {
cluster = new AMap.MarkerClusterer(
that.map, // 地图实例
markers, // 海量点组成的数组
{
gridSize: 20, // 聚合网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
// maxZoom: 9
}
)
})
使用的方法
计算地图的东西向跨度和南北向跨度
- 使用场景
-
当用户拖动或缩放地图时，您可能想要重新加载某些地图数据，以便只显示在新地图视窗中可见的数据。这时候，您可以使用这段代码来获取新地图视窗的范围。
-
如果您有一个包含大量地理位置数据的数据库，并且您希望将该数据限制为仅显示在当前地图视窗中的数据，那么您可以使用这段代码来获取地图视窗范围，然后使用该范围对数据库进行查询。
-
handleGetLngLatDifference () {
// 获取地图的边界范围，然后分别获取东北角和西南角的经纬度。
const bounds = this.map.getBounds()
const NorthEast = bounds.getNorthEast() // 东北
const SouthWest = bounds.getSouthWest() // 西南
this.lngValue = NorthEast.lng - SouthWest.lng
this.latValue = (NorthEast.lat - SouthWest.lat) / 2
}
计算给定经纬度数组的平均值，并返回一个新的经纬度对象（通过对输入的经纬度坐标进行遍历和计算，最终返回它们的中心点坐标）
使用场景在地图开发中，有时需要将多个地点的经纬度坐标求平均值，得到它们的中心点坐标，以便在地图上进行标记或展示等操作
handleGetCenter (lnglatarr = []) {
var total = lnglatarr.length
var X = 0,
Y = 0,
Z = 0
lnglatarr.forEach(lnglat => {
var lng = (lnglat.longitude * Math.PI) / 180
var lat = (lnglat.latitude * Math.PI) / 180
var x, y, z
x = Math.cos(lat) * Math.cos(lng)
y = Math.cos(lat) * Math.sin(lng)
z = Math.sin(lat)
X += x
Y += y
Z += z
})
X = X / total
Y = Y / total
Z = Z / total
var Lng = Math.atan2(Y, X)
var Hyp = Math.sqrt(X * X + Y * Y)
var Lat = Math.atan2(Z, Hyp)
if (!(Lng && Lat)) return
return new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI)
},
根据经纬度数组计算出一个合适的地图缩放级别，以便同时显示所有的覆盖物。
handleLatLng (list) {
let lngArr = [],
latArr = []
for (let i = 0; i < list.length; i++) {
lngArr.push(list[i].longitude)
latArr.push(list[i].latitude)
}
let maxLng = Math.max.apply(null, lngArr)
let maxLat = Math.max.apply(null, latArr)
let minLng = Math.min.apply(null, lngArr)
let minLat = Math.min.apply(null, latArr)
let container = document.getElementById('amap')
let nowDivWidth, nowDivHeight
if (container) {
nowDivWidth = container.clientWidth * 0.9
nowDivHeight = container.clientHeight * 0.9
}
// 使用AMap.GeometryUtil.distance方法计算最大和最小经纬度点之间的距离，以便确定覆盖物在地图上的实际大小
var distance = AMap.GeometryUtil.distance(
[maxLng, maxLat],
[minLng, minLat]
) //以高德提供的方法来获取两点间的距离
var nowDivLine = Math.sqrt(
nowDivWidth * nowDivWidth + nowDivHeight * nowDivHeight
) //求出地图容器的对角线长度可以确定覆盖物与地图容器之间的比例关系，然后计算出一个合适的缩放级别
var nowScale = distance / nowDivLine //求出覆盖物范围和地图容器的比例
let reduceVal = 1.8
// 根据一些特殊情况（例如360浏览器或IE浏览器）进行一些调整，然后返回一个可以显示出所有覆盖物的地图缩放级别。
if (this.$store.getters.is360) {
reduceVal = 2
}
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
reduceVal = 2
}
var nowNum = 18 - Math.ceil(Math.log(nowScale) / Math.log(2)) - reduceVal //求出可以显示出所有覆盖物的级别
return nowNum
},