【uniapp地图画线】

地图划线
<template>
	<view class="warp">
		<view class="map">
			<div class="map" id='container' />
		</view>
	</view>
</template>

<script>
	import AMapLoader from '@amap/amap-jsapi-loader';

	export default {
		data() {
			return {
				windowHeight: 0, // 屏幕高度
				windowWidth: 0, // 屏幕宽度
				firsttop: 0, // 抽屉顶部 默认高度
				fixboxtop: 0, // 实际高度
				centerboxtop: 0, //控件中间停留的位置
				phonetop: 200, // 默认滑动分界线 - 后面计算为最低与最高的一半
				topcenteraverage: 600, //顶部到中间部位的平均高度
				bottomcenteraverage: 100, //中间到底部的平均高度
				isend: false, // 触摸结束
				isfirst: true, // 手指第一次触摸
				tapboxtop: 0, // 手指距离顶部距离

				map: '',
				loca: '',
				zoom: 4,

				regionLevel: 0,
				markers: [],
				markersData: [],
				FXmarkers: [],
				FXmarkersData: [],
				provinceCode: '',
				pageSize: 10,
				showMovableArea: false,
				mapType: 'zndwt', //重难点问题  风险预警
				pimProjectIssueList: [],
				pimProjectIssueListpage: 1,
				pimProjectIssueListloadStatus: 'nomore',
				zndwtAreaName: '全国',
				zndCount: 0,
				MapPointVo: {
					countSheng: 0,
					countShi: 0,
					countXian: 0
				}
			}
		},
		created() {},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.movableHeight = this.windowHeight - 90
			this.cHeightNum = this.windowHeight - 80;
			this.initY = -(this.windowHeight * 0.4);
			this.canDragTop = -(this.windowHeight - 90 - 180)
			this.dragY = 0
		},
		mounted() {
			this.initMap()
			this.$nextTick(function() {
				this.windowWidth = uni.getSystemInfoSync().windowWidth;
				this.windowHeight = uni.getSystemInfoSync().windowHeight;
				var defaultHeight = this.windowHeight * (1 - this.minHeight)
				let defcenterHeight = this.windowHeight * (1 - this.centerHeight)

				this.firsttop = defaultHeight
				this.centerboxtop = defcenterHeight
				this.phonetop = (this.windowHeight * this.maxHeight - this.windowHeight * this.minHeight) /
					2 //（最高高度-最低高度）/2 = 控件停留高度的临界值
				this.topcenteraverage = ((this.windowHeight * this.maxHeight - this.windowHeight * this
					.centerHeight) / 2) + (this.windowHeight * this.centerHeight)
				this.bottomcenteraverage = (this.windowHeight * this.centerHeight - this.windowHeight * this
					.minHeight) / 2
				this.fixboxtop = defaultHeight
				this.$emit('currentHeight', (this.windowHeight - this.fixboxtop))
				this.$emit('maxtHeight', (this.windowHeight * this.maxHeight))
			})
		},
		methods: {
			initMap() {
				window._AMapSecurityConfig = {
					securityJsCode: 'ab2ea87c21298f381c1ecc486bdfdb3e', //50996a14f7017a7b9f1cc0bc6a841716
				}
				AMapLoader.load({
					"key": "342e797d4050ece517714a81df95af88", // 申请好的Web端开发者Key，首次调用 load 时必填
					"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					"plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
					"Loca": { // 是否加载 Loca， 缺省不加载
						"version": '2.0.0' // Loca 版本，缺省 1.3.2
					},
				}).then((AMap) => {
					this.map = new AMap.Map('container', {
						viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
						zoom: this.zoom, //初始化地图层级
						center: [115.397428, 25.90923], //初始化地图中心点
						mapStyle: "amap://styles/darkblue"
					});

					// 创建 Loca 实例
					this.loca = new Loca.Container({
						map: this.map
					});

					this.initMapData()
					// this.map.on('zoomend', this.mapZoomend);
				}).catch(e => {
					console.log(e);
				})

			},
			initMapData() {
				//绿色点
				var top9 = {
					type: 'FeatureCollection',
					features: [{
							"type": "Feature",
							"properties": {
								"cityName": "韶关市",
								"ratio": 0,
								"rank": 96
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									103.58052,
									24.760098
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"cityName": "乐山市",
								"ratio": 0,
								"rank": 97
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									103.75082,
									28.58099
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"cityName": "阜阳市",
								"ratio": 0,
								"rank": 98
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									105.82654,
									32.889915
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"cityName": "荆门市",
								"ratio": 0,
								"rank": 99
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									118.209816,
									27.997377
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"cityName": "哈尔滨市",
								"ratio": 0,
								"rank": 100
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									126.61314,
									49.746685
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"cityName": "恩施土家族苗族自治州",
								"ratio": 0,
								"rank": 105
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									119.48512,
									30.298103
								]
							}
						}
					]
				};
				var geo = new Loca.GeoJSONSource({
					data: top9,
					// url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/china_traffic_event.json',
				});
				var scatter = window.ll = new Loca.ScatterLayer({
					loca: this.loca,
					zIndex: 10,
					opacity: 1,
					visible: true,
					zooms: [2, 22],
				});

				scatter.setSource(geo, {
					unit: 'px',
					size: [20, 20],
					texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/blue.png',
					borderWidth: 0,
				});
				this.loca.add(scatter);

				// 呼吸
				var top10 = {
					type: 'FeatureCollection',
					features: [{
							"type": "Feature",
							"properties": {
								"cityName": "韶关市",
								"ratio": 0,
								"rank": 96
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									113.58052,
									24.760098
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"cityName": "哈尔滨市",
								"ratio": 0,
								"rank": 100
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									126.61314,
									45.746685
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"cityName": "恩施土家族苗族自治州",
								"ratio": 0,
								"rank": 105
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									109.48512,
									30.298103
								]
							}
						}
					]
				};
				var breath = new Loca.ScatterLayer({
					zIndex: 121,
				});
				breath.setSource(new Loca.GeoJSONSource({
					data: top10,
				}));
				breath.setStyle({
					unit: 'px',
					size: [50, 50],
					texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
					animate: true,
					duration: 1000,
				});
				this.loca.add(breath)
				this.loca.animate.start()
				
				//大地线
				var lineArr = [
				        ['103.58052', '24.760098'],
				        ['118.209816', '27.997377']
				    ];
				var polyline = new AMap.Polyline({
					path: lineArr,
					 strokeColor: '#60F1FF',   // 线颜色
					 // isOutline:true,			//是否显示描边
					 // borderWeight:3,
					 // outlineColor:'#46ADFF',
					strokeOpacity: 2,         // 线透明度
					strokeWeight: 3,          // 线宽
					strokeStyle: 'dashed',     // 线样式solid dashed
					lineCap:'round',			//默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
					strokeDasharray: [10,9], // 补充线样式
					geodesic: true            // 绘制大地线
				});
				var polyline2 = new AMap.Polyline({
					path: lineArr,
					 strokeColor: '#46ADFF',   // 线颜色
					strokeOpacity: 0.5,         // 线透明度
					strokeWeight: 10,          // 线宽
					strokeStyle: 'solid',     // 线样式solid dashed
					geodesic: true            // 绘制大地线
				});
				// polyline.on('click', this.clickLine)
				// 将折线添加至地图实例
				this.map.add(polyline);  //虚线
				this.map.add(polyline2);   //描边
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.warp {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	.map {
		width: 100%;
		height: 100vh
	}
</style>