uniapp地图画线
使用高德地图@amap/amap-jsapi-loader,JSAPI版本2.0,Loca版本2.0。里面设有密集点、呼吸点、大地线。
地图划线
<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>