### 地图组件 ly-map

<hr>

### 1 坐标系说明

#### 默认坐标系

```
天地图为WGS84坐标系，如果当前使用的是百度坐标（BD09）、火星坐标（GCJ02）
则需要转化后使用，推荐使用coord-transform工具转换
```

#### 转换工具安装

```
// npm
npm install @isvend/coord-transform

// pnpm
pnpm add @isvend/coord-transform
```

#### 坐标转换

```javascript
import {
    transformWGS84ToBD09,
    transformBD09ToGCJ02,
    transformBD09ToWGS84,
    transformGCJ02ToWGS84,
    transformWGS84ToGCJ02,
} from "@isvend/coord-transform";

const lng = 116.404;
const lat = 39.915;

console.log("WGS84 to GCJ02", transformWGS84ToGCJ02(lng, lat));
console.log("GCJ02 to WGS84", transformGCJ02ToWGS84(lng, lat));

console.log("WGS84 to BD09", transformWGS84ToBD09(lng, lat));
console.log("BD09 to WGS84", transformBD09ToWGS84(lng, lat));

console.log("BD09 to GCJ02", transformBD09ToGCJ02(lng, lat));
console.log("GCJ02 to BD09", transformBD09ToGCJ02(lng, lat));
```

<hr>

### 2 初始化

默认填充父布局

```vue

<ly-map ref="map" map-key="天地图key"/>
```

<hr>

### 3 插件说明

##### 属性

| 参数                 |    类型     | 说明                                |
|:-------------------|:---------:|:----------------------------------|
| `mapKey`           | `String`  | 天地图官网申请的key,必填否则地图不能正确出来          |
| `lonlat`           |  `Array`  | 地图初始位置,默认值[111.668097, 40.825417] |
| `zoom`             | `Number`  | 地图初始缩放等级,默认值16                    |
| `showCenterIcon`   | `Boolean` | 是否在地图中间显示图标, 默认值 false不显示         |
| `centerIcon`       | `String`  | 修改默认中间显示图标                        |
| `showLocationIcon` | `Boolean` | 是否在地图右下角显示定位图标, 默认值 false不显示      |

##### 事件

| 事件												| 说明																			|
|:--------------------------------------			|:-------------------------------------------------------						|
| `onLoaded()   `									| 当地图加载完成时																	|
| `onLocation() `									| 点击右下角定位按钮时																|
| `onZoomEnd(lon:number, lat:number, zoom:number) `	| 缩放完成时,并返回中心位置以及当前缩放等级											|
| `onStartDrag(lon:number, lat:number)`				| 当地图开始拖拽时,并返回中心位置													|
| `onEndDrag(lon:number, lat:number) `				| 当地图结束拖拽时,并返回中心位置													|
| `onListen(event:object) `							| 覆盖物事件监听，需要覆盖物属性`click`为`true`可被触发，目前支持点击事件 `event`说明如下	|

##### 覆盖物事件 `Event` 格式说明

| key      |  value   | 说明                                            |
|:---------|:--------:|:----------------------------------------------|
| `type`   | `String` | 事件类型 支持 `click`                               |
| `target` | `Object` | 发生事件的覆盖物option，会原样返回覆盖物的配置格式`Over` 或 `Marker` |

##### 方法

| 方法                                              | 说明                                                                                                              |
|:------------------------------------------------|:----------------------------------------------------------------------------------------------------------------|
| `setCenter(lon:number, lat:number,zoom:Number)` | 将地图的中心点变换到指定的地理坐标，如果同时指定了缩放等级，则同时缩放到指定的等级<br/>参数说明:<br/> `lon`:地图的中心点经度<br/> `lat`:地图的中心点纬度<br/>`zoom`:地图的比例尺级别 |
| `setType(type:Number)  `                        | 设置地图显示类型<br/>参数说明:<br/> `type`:要设置的地图展示类型 0矢量地图 1卫星地图 其它显示矢量地图                                                  |
| `setMarkers(Array<Marker>)   `                  | 将标注添加到地图中，支持多个标注同时添加,标注`Marker`格式见下说明                                                                           |
| `setZoom(zoom:Number)    `                      | 将视图缩放到指定的缩放等级，中心点坐标不变  <br/>参数说明:<br/> `zoom`:地图的比例尺级别                                                          |
| `resize()         `                             | 重置地图展示区域尺寸                                                                                                      |
| `setOption(option:Object)  `                    | 同时设置多个属性，支持中心点、缩放、标注、覆盖物<br/>参数说明:<br/> `Object`格式见下说明                                                          |
| `addOvers(overs:Array<Over>)  `                 | 添加覆盖物，同时设置多个（会在现有的基础上添加）<br/>参数说明:<br/> `Over`格式见下说明                                                            |
| `setOvers(overs:Array<Over>)  `                 | 设置覆盖物，同时设置多个（清除现有同类型的，重新添加）<br/>参数说明:<br/> `Over`格式见下说明                                                         |
| `clearOvers(type:String)  `                     | 清除指定的覆盖物类型，不指定则清除所有<br/>参数说明:<br/> type=`circle` 或 `polyline` 或 `polygon` 或 `rect` 或 `label` 或 `infowindow`     |
| `removeOvers(prop, value)  `                    | 移除指定属性和值的覆盖物，匹配创建覆盖物时的prop和value <br/>参数说明:<br/> `prop`:覆盖物属性 <br/> `value`:覆盖物属性对应的值                                                         |
| `setEnable(option:Object)  `                    | 设置开启或者禁用的地图操作 支持拖拽、双击缩放、双指缩放、惯性拖拽  <br/> `Option`格式见下说明                                                         |


##### 标注 `Marker` 格式说明

| key		      |  value	   | 说明											                 |
|:-----------|:---------:|:------------------------------|
| `icon`	    | `String`	 | 标注显示图标的路径,支持网络图片					         |
| `width`	   | `Number`	 | 标注图标宽度，注意：不设置icon时无效				      |
| `height`	  | `Number`	 | 标注图标高度，注意：不设置icon时无效				      |
| `lon `	    | `Number`	 | 标注显示的位置经度								             |
| `lat `	    | `Number`	 | 标注显示的位置纬度								             |
| `offsetX`	 | `Number`	 | 标注图标相对左上角水平偏移	，注意：不设置icon时无效	 |
| `offsetY`	 | `Number`	 | 标注图标相对左上角垂直偏移	，注意：不设置icon时无效	 |

##### 覆盖物 `Over`格式说明

| key				|       value			| 说明																															|
|:---------------	|:------------------:	|:-------------------------------------------------------------------------														|
| `type`			|      `String`			| 覆盖物类型 支持 `circle` `polyline` `polygon` `rect` `label` `infowindow` `polylineArrow` `cardinalCurve` `cardinalCurveArrow`	|
| `color`			|      `String`			| 边线颜色																														|
| `weight`			|      `Number`			| 边线的宽度，以像素为单位																											|
| `opacity `		|      `Number`			| 边线的透明度（范围0-1 之间）																										|
| `fillColor `		|      `String`			| 填充颜色。当参数为空时，折线覆盖物将没有填充效果																						|
| `fillOpacity`		|      `Number`			| 填充的透明度（范围0-1 之间）。																										|
| `lineStyle`		|      `String`			| 边线的样式（`solid`或`dashed`）注意：当`polylineArrow` `cardinalCurve` `cardinalCurveArrow`时，不生效（天地图缺陷）																							|
| `rad`				|      `Number`			| `type=circle`时有效，圆的半径单位`m`																								|
| `lon `			|      `Number`			| `type=circle`时圆心经纬度坐标；`type=label`文本标注的地理位置；`type=infowindow`弹窗的显示地理位置坐标									|
| `lat `			|      `Number`			| `type=circle`时圆心经纬度坐标；`type=label`文本标注的地理位置；`type=infowindow`弹窗的显示地理位置坐标									|
| `points`			| `Array<[lon,lat]>`	| `type=polygon或polyline`时有效，坐标数组																							|
| `leftTop`			| `Array<[lon,lat]>`	| `type=rect`时有效， 矩形左上角坐标																								|
| `rightBottom`		| `Array<[lon,lat]>`	| `type=rect`时有效， 矩形右下角坐标																								|
| `text`			|      `String`			| `type=label`时有效，显示文本内容；																								|
| `offsetX`			|      `Number`			| `type=label`时有效，显示文本水平偏移；`type=infowindow`时有效，显示弹窗水平偏移														|
| `offsetY`			|      `Number`			| `type=label`时有效，显示文垂直平偏移；`type=infowindow`时有效，显示弹窗垂直偏移														|
| `minWidth`		|      `Number`			| `type=infowindow`时有效，弹出框的最小宽度																							|
| `maxWidth`		|      `Number`			| `type=infowindow`时有效，弹出框的最大宽度																							|
| `maxHeight`		|      `Number`			| `type=infowindow`时有效，设置后，如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器													|
| `autoPan`			|     `Boolean`			| `type=infowindow`时有效，否开启信息窗口打开时地图自动移动（默认关闭）																	|
| `closeButton`		|     `Boolean`			| `type=infowindow`时有效，控制弹出窗口中出现的关闭按钮																				|
| `closeOnClick`	|     `Boolean`			| `type=infowindow`时有效，是否开启点击地图关闭信息窗口（默认关闭）																		|

##### 地图操作禁用配置 `Option` 格式说明

| key               |   value   | 说明                             |
|:------------------|:---------:|:-------------------------------|
| `drag`            | `Boolean` | 地图拖拽 `true`允许 `fale`禁用，默认启用    |
| `doubleClickZoom` | `Boolean` | 地图双击放大`true`允许 `fale`禁用，默认启用   |
| `pinchToZoom`     | `Boolean` | 双指操作缩放  `true`允许 `fale`禁用，默认启用 |
| `inertia `        | `Boolean` | 地图惯性拖拽 `true`允许 `fale`禁用，默认启用  | |

##### 多属性 `Object` 配置说明

```javascript
const option = {
    // 中心点
    center: {lon: 116.391231, lat: 39.907334},
    // 多标注
    markers: [{
        icon: icon,
        width: 24,
        height: 27,
        lon: 116.389231,
        lat: 39.906034,
        offsetX: 12,
        offsetY: 27,
		click: true,  // 开启点击监听
    }],
    // 缩放
    zoom: 16,
    // 地图类型
    type: 1,
    // 覆盖物
    overs: [
        // 添加圆
        {
            type: "circle",
            rad: 100,
            lon: 111.667920,
            lat: 40.828050,
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            fillColor: "#0000FF",
            fillOpacity: .2,
            lineStyle: "solid",
        },
        // 添加折线
        {
            type: "polyline",
            points: [[111.665750, 40.822830], [111.668190, 40.821800], [111.670310, 40.822790]],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加多边形
        {
            type: "polygon",
            points: [[111.668160, 40.824850], [111.666640, 40.823950], [111.669570, 40.823990]],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加矩形
        {
            type: "rect",
            leftTop: [111.665880, 40.826710],
            rightBottom: [111.670120, 40.825860],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加文本
        {
            type: "label",
            lon: 111.668150,
            lat: 40.825330,
            text: "点我打开弹窗",
            offsetX: -60,
            offsetY: 10,
            click: true,
        },
    ],
}
```

```text
注意：目前所有覆盖物都支持click属性，当click=true时，则开启点击监听，默认不开启
```

<hr>

### 4 示例代码

```vue

<template>
	<view class="map-page-wrapper">
		<view class="map-box">
			<ly-map ref="map" :map-key="mapKey" :lonlat="lonlat" :zoom="zoom" :show-center-icon="showCenterIcon"
				:center-icon="centerIcon" :show-location-icon="showLocationIcon" :on-location="location"
				:on-loaded="loaded" :on-start-drag="startDrag" :on-zoom-end="zoomEnd" :on-end-drag="endDrag"
				:on-listen="listen" />
		</view>
		<view class="tool-box">
			<view class="tool" @tap="setType(0)">矢量地图</view>
			<view class="tool" @tap="setType(1)">卫星地图</view>
			<view class="tool" @tap="setMarkers()">设置标注</view>
			<view class="tool" @tap="clearMarkers()">清除标注</view>
			<view class="tool" @tap="setZoom(1)">缩放+</view>
			<view class="tool" @tap="setZoom(-1)">缩放-</view>
			<view class="tool" @tap="setCenter(116.391231,39.907334)">设置位置1</view>
			<view class="tool" @tap="setCenter(111.668097, 40.825417)">设置位置2</view>
			<view class="tool" @tap="setCenterIcon(true)">显示中心图标</view>
			<view class="tool" @tap="setCenterIcon(false)">隐藏中心图标</view>
			<view class="tool" @tap="setLocationIcon(true)">显示定位图标</view>
			<view class="tool" @tap="setLocationIcon(false)">隐藏定位图标</view>
			<view class="tool" @tap="setIcon()">修改中心图标</view>
			<view class="tool" @tap="setOption()">同时设置属性</view>
			<view class="tool" @tap="setOvers()">设置覆盖物</view>
			<view class="tool" @tap="addOvers()">添加覆盖物</view>
			<view class="tool" @tap="clearOvers('rect')">清除矩形覆盖物</view>
			<view class="tool" @tap="clearOvers()">清除所有覆盖物</view>
			<view class="tool" @tap="enable()">启用拖拽/缩放</view>
			<view class="tool" @tap="disable()">禁用拖拽/缩放</view>
			<view class="tool" @tap="openDialog()">打开弹窗</view>
			<view class="tool" @tap="removeOvers()">移除指定属性覆盖物</view>
		</view>
	</view>
</template>
<script>
	import icon1 from '@/static/icon1.png';

	export default {
		data() {
			return {
				// 天地图官网地址 https://oauth.tianditu.gov.cn/
				// key需要自行申请，以下使用测试key
				mapKey: "bcd1064810812bdc35d675d1dba3c23f",
				// 中心位置
				lonlat: [111.668097, 40.825417],
				// 缩放
				zoom: 16,
				// 地图展示类型
				type: 0,
				// 显示中心图标
				showCenterIcon: true,
				// 显示定位图标
				showLocationIcon: true,
				// 不设置使用默认图标
				centerIcon: "",
			};
		},
		onReady() {
			// 绑定组件
			this.map = this.$refs.map;
		},
		methods: {
			location() {
				console.log("点击定位按钮回调");
			},
			loaded() {
				console.log("地图创建完成");
			},
			zoomEnd(lon, lat) {
				console.log("地图缩放完成", lon, lat);
			},
			startDrag(lon, lat) {
				console.log("开始地图拖拽", lon, lat);
			},
			endDrag(lon, lat) {
				console.log("结束地图拖拽", lon, lat);
			},
			listen(e) {
				console.log("覆盖物点击事件", e);
				// 只有点击label可以显示弹窗
				if (e.target.type === "label") {
					this.map.setOvers([{
						type: "infowindow",
						lon: 111.668100,
						lat: 40.825420,
						content: "弹窗",
					}]);
				}
			},
			setZoom(zoom) {
				this.zoom += zoom;
				if (this.zoom <= 10) this.zoom = 10;
				if (this.zoom >= 20) this.zoom = 20;
				this.map.setZoom(this.zoom);
			},
			setType(type) {
				// type 0矢量地图 1卫星地图 其他矢量地图
				this.type = type;
				this.map.setType(this.type);
			},
			setCenter(lon, lat) {
				this.lonlat = [lon, lat];
				this.map.setCenter(lon, lat);
			},
			setMarkers() {
				this.map.setMarkers([{
						lon: 111.666020,
						lat: 40.82740
					},
					{
						lon: 111.667020,
						lat: 40.82740
					},
					{
						lon: 111.665020,
						lat: 40.82740
					},
					{
						lon: 111.669020,
						lat: 40.82740
					},
					{
						lon: 111.670020,
						lat: 40.82740
					},
				]);
			},
			removeOvers() {
				this.map.removeOvers("flag", "my-circle");
			},
			clearMarkers() {
				this.map.setMarkers([]);
			},
			setCenterIcon(show) {
				this.showCenterIcon = show;
			},
			setLocationIcon(show) {
				this.showLocationIcon = show;
			},
			setIcon() {
				// 默认图标和icon切换显示
				this.centerIcon = this.centerIcon ? "" : icon1;
			},
			setOption() {
				// 同时设置多个属性
				this.map.setOption({
					center: {
						lon: 116.391231,
						lat: 39.907334
					},
					markers: [{
							lon: 116.389231,
							lat: 39.906034
						},
						{
							lon: 116.390231,
							lat: 39.906034
						},
						{
							lon: 116.391231,
							lat: 39.906034
						},
						{
							lon: 116.392231,
							lat: 39.906034
						},
						{
							lon: 116.393231,
							lat: 39.906034
						},
					],
					zoom: 16,
					type: 1,
				});
			},
			setOvers() {
				const overs = [{
						type: "circle",
						rad: 100,
						lon: 111.667920,
						lat: 40.828050,
						color: "#0000FF",
						weight: 3,
						opacity: .5,
						fillColor: "#0000FF",
						fillOpacity: .2,
						lineStyle: "solid",
						click: true,
						flag: "my-circle",
					},
					{
						type: "polyline",
						points: [
							[111.665750, 40.822830],
							[111.668190, 40.821800],
							[111.670310, 40.822790]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "polylineArrow",
						points: [
							[111.665750, 40.823030],
							[111.668190, 40.822000],
							[111.670310, 40.822990]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "cardinalCurve",
						points: [
							[111.665750, 40.823430],
							[111.668190, 40.822400],
							[111.670310, 40.823390]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "cardinalCurveArrow",
						points: [
							[111.665750, 40.823730],
							[111.668190, 40.822700],
							[111.670310, 40.823690]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "polygon",
						points: [
							[111.668160, 40.824850],
							[111.666640, 40.823950],
							[111.669570, 40.823990]
						],
						color: "#0000FF",
						weight: 3,
						opacity: .5,
						lineStyle: "solid",
					},
					{
						type: "rect",
						leftTop: [111.665880, 40.826710],
						rightBottom: [111.670120, 40.825860],
						color: "#0000FF",
						weight: 3,
						opacity: .5,
						lineStyle: "solid",
					},
					{
						type: "label",
						lon: 111.668150,
						lat: 40.825330,
						text: "点我打开弹窗",
						offsetX: -60,
						offsetY: 10,
						click: true,
					},
				];
				this.map.setOvers(overs);
			},
			addOvers() {
				const overs = [{
					type: "circle",
					rad: 200,
					lon: 111.667920,
					lat: 40.828050,
					color: "#0000FF",
					weight: 3,
					opacity: .5,
					fillColor: "#0000FF",
					fillOpacity: .2,
					lineStyle: "solid",
				}, ];
				this.map.addOvers(overs);
			},
			clearOvers(type) {
				this.map.clearOvers(type);
			},
			enable() {
				this.map.setEnable({
					drag: true,
					doubleClickZoom: true,
					inertia: true,
					pinchToZoom: true,
				});
			},
			disable() {
				this.map.setEnable({
					drag: false,
					doubleClickZoom: false,
					inertia: false,
					pinchToZoom: false,
				});
			},
			openDialog() {
				const content =
					`
					<div style="display:flex; flex-direction: column;align-items: center; font-size:16px;z-index:999999999;">
						<img src='http://lbs.tianditu.gov.cn/images/logo.png' width='100' height='50'/>
						<div style='margin-top:8px;'>天地图组件</div>
						<div style='margin-top:8px;'>内蒙古灵越科技</div>
					</div>
				`;
				this.map.setOvers([{
					type: "infowindow",
					lon: 111.668100,
					lat: 40.825420,
					content: content,
				}]);
			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.map-page-wrapper {
		width: 100%;
		height: 100%;

		.map-box {
			width: 100%;
			height: 100%;
		}

		.tool-box {
			position: absolute;
			// 天地图默认z-index:400 需要大于400
			z-index: 999;
			top: 0;
			left: 0;
			width: 100%;
			border-radius: 8rpx;
			padding: 16rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;

			.tool {
				font-size: 28rpx;
				border-radius: 8rpx;
				padding: 12rpx 24rpx;
				background: #ffffff;
				box-shadow: 0 0 6rpx rgba(0, 0, 0, .15);
			}
		}
	}
</style>
```
<hr>

### 5 QA

#### 为什么自定义标注图标在APP上会失效？
```
标注图标支持网络图片以及base64格式图标
```