1.先建个js文件
import AMapLoader from "@amap/amap-jsapi-loader";
const initMap = async (config) => {
return new Promise((resolve, reject) => {
AMapLoader.load({
key: "0650fbe85c708dc3388fe803d0e5d861",
// key: config.key,
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [],
Loca: {
// 是否加载 Loca， 缺省不加载
version: "2.0.0", // Loca 版本，缺省 1.3.2
},
}).then((AMap) => {
resolve(AMap)
}).catch(err => {
reject(err)
})
})
}
export default initMap
2. vue组件
<template>
<div class="box" :style="{ height: height, width: width }">
<div :id="id" class="container" ref="container"></div>
<div id="container"></div>
</div>
</template>
<script>
import initMap from "../utils/initMap";
export default {
data() {
return {
aMap: null,
};
},
/* 必传
id
center
*/
props: {
id: {
type: String,
default: "map",
},
// 宽
width: {
type: String,
default: "100%",
},
// 高
height: {
type: String,
default: "100%",
},
//地图显示的缩放级别
zoom: {
type: Number,
default: 5,
},
viewMode: {
type: String,
default: "3D",
},
// 地图的倾角，0-83
pitch: {
type: Number,
default: 50,
},
center: {
type: Array,
default: () => [],
},
mapStyle: {
type: String,
default: "amap://styles/darkblue",
// default: "amap://styles/838f9dfc5b9a058a39a6c28fd258b3a8"
},
// 拖拽
dragEnable: {
type: Boolean,
default: false,
},
// 缩放
zoomEnable: {
type: Boolean,
default: false,
},
// 双击变大
doubleClickZoom: {
type: Boolean,
default: false,
},
// ctrl
keyboardEnable: {
type: Boolean,
default: false,
},
circularList: {
type: Array,
default: () => [],
},
lineList: {
type: Array,
default: () => [],
},
// 散点图
scatterMap: {
type: Boolean,
default: false,
},
markerList: {
type: Array,
default: () => [],
},
circularWidth: {
type: String,
default: "10px",
},
circularHeight: {
type: String,
default: "10px",
},
circularBackground: {
type: String,
},
circularLineHeight: {
type: String,
default: "10px",
},
circularBorderRadius: {
type: String,
},
circularTextAlign: {
type: String,
default: "center",
},
circularColor: {
type: String,
},
circularOpacity: {
type: Number,
default: 1,
},
circularBorderColor: {
type: String,
default: "#000",
},
circularBorderWidth: {
type: String,
default: "1px",
},
circularBorderStyle: {
type: String,
default: "solid",
},
// 热力图
heatMap: {
type: Boolean,
default: false,
},
heatDate: {
type: Object,
default: () => {},
},
// 飞线图
flyingLineMap: {
type: Boolean,
default: false,
},
flyingLineObj: {
type: Object,
default: () => {},
},
flyingLineColors: {
type: Array,
default: () => ["#e74e4e", "#931133", "#801e42"],
},
maxHeightScale: {
type: Number,
default: 0.3,
},
headColor: {
type: String,
default: "rgba(255, 255, 0, 1)",
},
trailColor: {
type: String,
default: "rgba(255, 255,0,0)",
},
},
mounted() {
setTimeout(() => {
this.init();
}, 1000)
},
methods: {
async init() {
initMap()
.then((AMap) => {
this.aMap = new AMap.Map(this.id, {
zoom: this.zoom,
viewMode: this.viewMode,
pitch: this.pitch,
center: this.center,
mapStyle: this.mapStyle,
dragEnable: this.dragEnable,
zoomEnable: this.zoomEnable,
doubleClickZoom: this.doubleClickZoom,
keyboardEnable: this.keyboardEnable,
});
// 地图绑定放大事件
this.aMap.on("zoomchange", () => {
console.log("map.getZoom()", this.aMap.getZoom());
});
// 创建 Loca 实例
var loca = new Loca.Container({
map: this.aMap,
});
// 散点图
if (this.scatterMap) {
var markerList = [];
this.markerList.forEach((element) => {
markerList.push(
new AMap.Marker({
content: `<div class="marker-route marker-marker-bus-from"
style="
dispaly: inle-block;
width: ${this.circularWidth};
height: ${this.circularHeight};
background: ${this.circularBackground};
line-height: ${this.circularLineHeight};
border-radius: ${this.circularBorderRadius};
border-color: ${this.circularBorderColor};
border-width: ${this.circularBorderWidth};
border-style: ${this.circularBorderStyle};
text-align: ${this.circularTextAlign};
color: ${this.circularColor};
opacity: ${this.circularOpacity};
">
${element.content}
</div>`, // 自定义点标记覆盖物内容
position: element.position, // 基点位置
// offset: new AMap.Pixel(-17, -42), // 相对于基点的偏移位置
})
);
});
this.aMap.add(markerList);
}
// 热力图
if (this.heatMap) {
var geo = new Loca.GeoJSONSource({
data: this.heatDate,
});
var heatmap = new Loca.HeatMapLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
});
heatmap.setSource(geo, {
radius: 200000,
unit: "meter",
height: 500000,
//radius: 35,
//unit: 'px',
//height: 100,
gradient: {
0.1: "#2A85B8",
0.2: "#16B0A9",
0.3: "#29CF6F",
0.4: "#5CE182",
0.5: "#7DF675",
0.6: "#FFF100",
0.7: "#FAA53F",
1: "#D04343",
},
value: function (index, feature) {
return feature.properties.avg;
var value = feature.properties.mom.slice(0, -1);
return value + 10 * Math.random();
},
// min: -100,
// max: 100,
heightBezier: [0, 0.53, 0.37, 0.98],
});
loca.add(heatmap);
}
// 飞线图
if (this.flyingLineMap) {
// 弧线
var pulseLink = new Loca.PulseLinkLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
depth: true,
});
var geo = new Loca.GeoJSONSource({
data: this.flyingLineObj,
});
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: (index, feat) => {
return this.flyingLineColors;
},
maxHeightScale: this.maxHeightScale, // 弧顶位置比例
headColor: this.headColor,
trailColor: this.trailColor,
});
loca.add(pulseLink);
loca.animate.start();
}
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>
<style scoped>
.box {
width: 100%;
height: 1000px;
border-radius: 12px;
background: #fff;
}
.container {
width: 100%;
height: 100%;
}
::v-deep .amap-logo {
display: none;
opacity: 0 !important;
}
::v-deep .amap-copyright {
opacity: 0;
}
</style>
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
