1.安装
npm i @amap/amap-jsapi-loader --save
2.使用
import AMapLoader from "@amap/amap-jsapi-loader";
var map;
export default {
data() {
return {
aMap: null,
};
},
mounted() {
this.init();
},
methods: {
init() {
AMapLoader.load({
key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [],
Loca: {
// 是否加载 Loca, 缺省不加载
version: "2.0.0", // Loca 版本,缺省 1.3.2
},
})
.then((AMap) => {
this.aMap = new AMap.Map("container", {
// resizeEnable: true,
// zoom: 12, //地图显示的缩放级别
zoom: 5.29,
// showLabel: false,
viewMode: '3D',
pitch: 48,
center: [104.780269, 34.955403],
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
});
var loca = new Loca.Container({
map: this.aMap,
});
// 呼吸点
var scatter = new Loca.ScatterLayer({
loca,
zIndex: 10,
opacity: 0.6,
visible: true,
zooms: [5, 10],
});
var pointGeo = new Loca.GeoJSONSource({
url: "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json",
});
scatter.setSource(pointGeo);
scatter.setStyle({
unit: "meter",
size: [100000, 100000],
borderWidth: 0,
texture:
"https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png",
duration: 2000,
animate: true,
});
loca.add(scatter);
// ------------------
// 弧线
var pulseLink = new Loca.PulseLinkLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
depth: true,
});
var geo = new Loca.GeoJSONSource({
url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
});
pulseLink.setSource(geo);
pulseLink.setStyle({
unit: 'meter',
dash: [40000, 0, 40000, 0],
lineWidth: function () {
return [20000, 1000];
},
height: function (index, feat) {
return feat.distance / 3 + 10;
},
// altitude: 1000,
smoothSteps: 30,
speed: function (index, prop) {
return 1000 + Math.random() * 200000;
},
flowLength: 100000,
lineColors: function (index, feat) {
return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];
},
maxHeightScale: 0.3, // 弧顶位置比例
headColor: 'rgba(255, 255, 0, 1)',
trailColor: 'rgba(255, 255,0,0)',
});
loca.add(pulseLink);
loca.animate.start();
})
.catch((e) => {
console.log(e);
});
},
},
};
#container {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
}
注意:
使用多个,key必须一致
禁止多种API加载方式混用
去掉html中的引入:
如果自定义图片定位不准,请修改偏移量,高德地图默认为图片左上角(0,0),偏移量的值和图片的值一样(px)