leprechaun-amap
v1.0.72016
Published
高德地图组件
Downloads
1
Readme
leprechaun-amap
vue2 高德地图组件
- JS_API-V2 参考手册 https://lbs.amap.com/api/jsapi-v2/documentation
地图加载
| 参数 | 描述 | 必填 | 默认 | 可选 | | :-----: | :-----------------------: | :--: | :--------------: | :--------: | | key | 申请好的 Web 端开发者 Key | 是 | | | | plugins | 需要使用的的插件列表 | 是 | ["AMap.ToolBar"] | 见地图插件 |
地图插件
- 所有插件 https://lbs.amap.com/api/jsapi-v2/guide/abc/plugins
已支持插件（有些插件需要 addControl()，官方文档没有明确哪些需要）
| 参数 | 描述 | | :-----------------: | :--------------------------------: | | AMap.HawkEye | 鹰眼，显示缩略图 | | AMap.ToolBar | 工具条，控制地图的缩放、平移等 | | AMap.MapType | 图层切换，用于几个常用图层切换显示 | | AMap.HeatMap | 热力图插件 | | AMap.GeoJSON | geoJSON 插件 | | AMap.PolylineEditor | 折线编辑插件 | | AMap.PolygonEditor | 多边形编辑插件 | | AMap.CircleEditor | 圆形编辑插件 |
使用示例
<AMap
ref="testMap"
:load="{
key: 'xxxxxxxxxxxxxxxxxxxxxx',
plugins: [
'AMap.ToolBar',
'AMap.MapType',
'AMap.HeatMap',
'AMap.GeoJSON',
],
}"
@complete="initMap()"
/>创建地图对象
- 所有参数 https://lbs.amap.com/api/jsapi-v2/documentation#map
| mapObj 参数 | 描述 | 必填 | 默认 | 可选 | | :---------: | :----------------------: | :--: | :------------------------------------------------------------: | :-----------------------------------------------------------------------: | :---------------: | | mapStyle | 底图样式 | 否 | amap://styles/light | https://lbs.amap.com/api/jsapi-v2/guide/map/map-style | | center | 初始中心经纬度 | 否 | [116.419447, 25.049867] | [number,number] | | zoom | 地图显示的缩放级别 | 否 | 10.5 | 2-30 可以设置为浮点数 | | zooms | 地图显示的缩放级别范围 | 否 | 默认为 [10, 18 | 2-30 可以设置为浮点数 | 取值范围 [2 ~ 30] | | viewMode | 地图视图模式 | 否 | 默认为‘2D’ | 可选’3D’ | | pitch | 俯仰角度 | 否 | 默认 0，最大值根据地图当前 zoom 级别不断增大，2D 地图下无效 。 | 可选’3D’ | | features | 设置地图上显示的元素种类 | 否 | ['bg','point','road','building'] | 'bg'（地图背景）、'point'（POI 点）、'road'（道路）、'building'（建筑物） |
使用示例
<AMap
ref="testMap"
:load="{
key: 'xxxxxxxxxxxxxxxxxxxxxx',
plugins: [
'AMap.ToolBar',
'AMap.MapType',
'AMap.HeatMap',
'AMap.GeoJSON',
],
}"
:mapObj="{
mapStyle: 'amap://styles/fresh',
zoom: 10,
zooms: [8, 18],
center: [116.419447, 25.049867],
viewMode: '3D',
pitch: 60,
}"
@complete="initMap()"
/>限定可视范围
| props | 描述 | 必填 | 默认 | 可选 | | :---------: | :----------------: | :--: | :---: | :-----: | | limitBounds | 取 zoom 为可视范围 | 否 | false | Boolean |
热力图层
- 所有参数 https://lbs.amap.com/api/jsapi-v2/documentation#heatmap
| 参数 | 描述 | 必填 | 默认 | 可选 | | :-------: | :--------------: | :--: | :-----------------------------------------------: | :---------: | | radius | 热力点的半径 | 否 | 30 | number | | data | 数据列表 | 是 | [{longitude:number,latitude:number,count:number}] | | | crs | 数据列表的坐标系 | 否 | gcj-02 | bd09、wgs84 | | value_max | 数据最大值 | 否 | 数据列表的最大值 | number |
使用示例
this.$refs.testMap.initHeatMap({
data: res.data.map((item) => {
return { longitude: +item.jd, latitude: +item.wd, count: 1 };
}),
crs: "wgs84",
value_max: 1,
});添加 Marker
- 所有参数 https://lbs.amap.com/api/jsapi-v2/documentation#marker
| 参数 | 描述 | 必填 | 默认 | 可选 | | :--: | :--------------: | :--: | :----: | :----------: | | data | 数据列表 | 是 | | [markerData] | | crs | 数据列表的坐标系 | 否 | gcj-02 | bd09、wgs84 | | icon | marker 的 icon | 是 | | icon |
使用示例
this.$refs.testMap.addMarker({
data: cz_markerData,
crs: "bd09",
icon: {
image: require("../assets/cz.png"),
width: 24,
height: 24,
},
});markerData
| 参数 | 描述 | 必填 | 默认 | 可选 | | :----------: | :----------------------------: | :--: | :--: | :----: | | longitude | 经度 | 是 | | number | | latitude | 纬度 | 是 | | number | | title | marker 标题 | 否 | | string | | introduction | 点击 marker 传递给信息窗的内容 | 否 | | string |
icon
| 参数 | 描述 | 必填 | 默认 | 可选 | | :----: | :-------: | :--: | :--: | :-----------------------------: | | image | icon 图片 | 是 | | 例：require("../assets/cz.png") | | width | 图片宽度 | 是 | | number | | height | 图片高度 | 是 | | number |
信息窗 infoWindow
| props | 描述 | 必填 | 默认 | 可选 | | :--------------: | :------------: | :--: | :--: | :----: | | infoWindowHeight | 信息框最大高度 | 否 | 400 | number | | infoWindowWidth | 信息框最大宽度 | 否 | 800 | number |
添加覆盖物
- 折线 https://lbs.amap.com/api/jsapi-v2/documentation#polyline
| 参数 | 描述 | 必填 | 默认 | 可选 | | :----------: | :----------: | :--: | :----: | :---------: | | data | 数据列表 | 是 | | | | crs | 坐标系 | 否 | gcj-02 | bd09、wgs84 | | borderWeight | 线条宽度 | 否 | 20 | number | | strokeColor | 线条颜色 | 否 | "red" | color | | editor | 是否可以编辑 | 否 | false | Boolean |
使用示例
this.$refs.testMap.addPolyline({
data: [
{ longitude: 117.017362, latitude: 25.075884 },
{ longitude: 116.98303, latitude: 25.090809 },
{ longitude: 116.943033, latitude: 25.104645 },
],
});- 多边形 https://lbs.amap.com/api/jsapi-v2/documentation#polygon
| 参数 | 描述 | 必填 | 默认 | 可选 | | :----------: | :------------: | :--: | :----: | :---------: | | data | 数据列表 | 是 | | | | crs | 坐标系 | 否 | gcj-02 | bd09、wgs84 | | radius | 圆半径 | 否 | 200 | number | | fillColor | 多边形填充颜色 | 否 | "fff" | color | | borderWeight | 线条宽度， | 否 | 20 | number | | strokeColor | 线条颜色 | 否 | "blue" | color | | editor | 是否可以编辑 | 否 | false | Boolean |
使用示例
this.$refs.testMap.addPolyline({
data: [
{ longitude: 117.017362, latitude: 25.075884 },
{ longitude: 116.98303, latitude: 25.090809 },
{ longitude: 116.943033, latitude: 25.104645 },
],
});- 圆形 https://lbs.amap.com/api/jsapi-v2/documentation#Circle
| 参数 | 描述 | 必填 | 默认 | 可选 | | :----------: | :----------: | :--: | :----: | :---------: | | longitude | 中心点经度 | 是 | | number | | latitude | 中心纬度 | 是 | | number | | crs | 坐标系 | 否 | gcj-02 | bd09、wgs84 | | radius | 圆半径 | 否 | 200 | number | | fillColor | 圆形填充颜色 | 否 | "red" | color | | strokeColor | 描边颜色 | 否 | "#fff" | color | | strokeWeight | 描边宽度 | 否 | 2 | number | | editor | 是否可以编辑 | 否 | false | Boolean |
使用示例
this.$refs.testMap.addCircle({
longitude: 117.017362,
latitude: 25.075884,
});GeoJSON
- 参考文档 https://lbs.amap.com/api/jsapi-v2/documentation#geojson
使用示例
this.$refs.testMap.addGeoJson({
geoJSON: GeoJson_shangHang,
});事件
| 事件 | 描述 | 参数 | | :------------: | :--------------------: | :-----------------------------: | | complete | 地图图块加载完成后触发 | 无 | | mapClick | 地图点击事件 | { target, lnglat, pixel, type } | | markerClick | marker 点击事件 | target | | polylineClick | polyline 点击事件 | e | | polygonClick | polygon 点击事件 | e | | circleClick | circle 点击事件 | e | | geoJsonClick | geoJson 点击事件 | e | | polylineChange | 折线编辑事件 | target | | polygonChange | 多边形编辑事件 | target | | circleChange | 圆形编辑事件 | target |
完整使用示例
<!--
* @Author: ChenWei
* @Date: 2022-07-13 14:03:43
* @LastEditors: ChenWei
* @LastEditTime: 2022-07-19 10:39:11
* @FilePath: \amap\test\src\components\MapContainer.vue
* @Description:
* WeChat:ChenWei990128
* Copyright (c) 2022 by 福建龙腾大数据信息技术有限公司, All Rights Reserved.
-->
<template>
<div style="width: 100vw; height: 100vh">
<AMap
ref="testMap"
:load="{
key: 'xxxxxxxxxxxxxxxxxxxxxxx',
plugins: [
'AMap.ToolBar',
'AMap.MapType',
'AMap.HeatMap',
'AMap.GeoJSON',
],
}"
:mapObj="{
mapStyle: 'amap://styles/fresh',
zoom: 10,
zooms: [8, 18],
center: [116.419447, 25.049867],
viewMode: '3D',
pitch: 60,
}"
limitBounds
@complete="initMap()"
/>
</div>
</template>
<script>
// 替换成npm包
import AMap from "./AMap.vue";
// 引用geoJson对象
import GeoJson_shangHang from "../assets/shanghang";
export default {
props: {},
data() {
return {
map: null,
};
},
computed: {},
created() {},
mounted() {},
watch: {},
methods: {
// 参考手册 https://lbs.amap.com/api/jsapi-v2/documentation
async initMap() {
// 热力图层初始化
this.initHeatMap();
// geojson初始化
this.initGeoJson();
// 标记点初始化
this.initMarker();
// 线面覆盖物初始化
this.initCover();
},
/**
* @desc 初始化热力图
*/
initHeatMap() {
fetch("http://10.56.120.84:9089/jsons/469")
.then((res) => {
return res.json();
})
.then((res) => {
this.$refs.testMap.initHeatMap({
data: res.data.map((item) => {
return { longitude: +item.jd, latitude: +item.wd, count: 1 };
}),
crs: "wgs84",
value_max: 1,
});
});
},
/**
* @desc 初始化标记点
*/
initMarker() {
fetch("http://10.56.120.84:9089/jsons/449")
.then((res) => {
return res.json();
})
.then((res) => {
// 村 社区
const cz_markerData = res.data
.filter((item) => item.administrative_level != "镇")
.map((item) => {
return {
longitude: item.longitude,
latitude: item.latitude,
title: item.name,
introduction: item.introduction,
};
});
this.$refs.testMap.addMarker({
data: cz_markerData,
crs: "bd09",
icon: {
image: require("../assets/cz.png"),
width: 24,
height: 24,
},
});
// 乡镇
const xz_markerData = res.data
.filter((item) => item.administrative_level == "镇")
.map((item) => {
return {
longitude: item.longitude,
latitude: item.latitude,
title: item.name,
introduction: item.introduction,
};
});
this.$refs.testMap.addMarker({
data: xz_markerData,
crs: "bd09",
icon: {
image: require("../assets/xz.png"),
width: 36,
height: 36,
},
});
});
},
/**
* @desc 初始化覆盖物
*/
initCover() {
this.$refs.testMap.addPolyline({
data: [
{ longitude: 117.017362, latitude: 25.075884 },
{ longitude: 116.98303, latitude: 25.090809 },
{ longitude: 116.943033, latitude: 25.104645 },
],
});
this.$refs.testMap.addCircle({
longitude: 117.017362,
latitude: 25.075884,
});
},
/**
* @desc 初始化geojson数据
*/
initGeoJson() {
this.$refs.testMap.addGeoJson({
geoJSON: GeoJson_shangHang,
});
},
},
components: { AMap },
};
</script>
<style scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 45vh;
background-color: #f3f4f5;
}
</style>