|
|
@@ -0,0 +1,169 @@
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+import { Router } from 'vue-router';
|
|
|
+
|
|
|
+const AMAP_KEY = "89185d69e5c6c07eae0b0ce8099db302";
|
|
|
+const AMAP_VERSION = "1.4.5"
|
|
|
+const AMAP_LOCA_VERSION = "1.3.2"
|
|
|
+
|
|
|
+// type LoadCallBack = (instance: MapService) => void;
|
|
|
+// interface PointData {
|
|
|
+// marker?: any; // markData
|
|
|
+// mouseover?: () => void // 鼠标移入事件
|
|
|
+// mouseout?: () => void // 鼠标移出事件
|
|
|
+// click?: () => void // 点击事件
|
|
|
+// }
|
|
|
+// interface SimplePointData {
|
|
|
+// marker?: any; // markData
|
|
|
+// }
|
|
|
+
|
|
|
+export class AMapService {
|
|
|
+ /**
|
|
|
+ * 高德地图
|
|
|
+ */
|
|
|
+ amap;
|
|
|
+ AMap;
|
|
|
+ $router;
|
|
|
+ loadedCallback;
|
|
|
+
|
|
|
+ points = new Array();
|
|
|
+ simplePoints = new Array();
|
|
|
+
|
|
|
+ constructor($router,loadedCallback) {
|
|
|
+ this.$router = $router
|
|
|
+ // 初始化加载函数
|
|
|
+ this.loadedCallback = loadedCallback;
|
|
|
+ }
|
|
|
+
|
|
|
+ addSimplePoint(payload) {
|
|
|
+ this.callAmap((AMap, amap) => {
|
|
|
+ const marker = new AMap.Marker({
|
|
|
+ content: payload.content,
|
|
|
+ position: new AMap.LngLat( payload.position[0], payload.position[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ title: payload.name,
|
|
|
+ });
|
|
|
+ const simplePoint = {
|
|
|
+ marker
|
|
|
+ }
|
|
|
+ this.simplePoints.push(simplePoint)
|
|
|
+ this.amap.add(marker)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ addSimplePoints(payloads) {
|
|
|
+ payloads.forEach(payload => this.addSimplePoint(payload));
|
|
|
+ }
|
|
|
+
|
|
|
+ loadMap(el) {
|
|
|
+ AMapLoader.load({
|
|
|
+ "key": AMAP_KEY,// 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ "version": AMAP_VERSION,// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ "plugins": [
|
|
|
+ "AMap.Scale"
|
|
|
+ ],
|
|
|
+ "Loca":{ // 是否加载 Loca， 缺省不加载
|
|
|
+ "version": AMAP_LOCA_VERSION // Loca 版本，缺省 1.3.2
|
|
|
+ },
|
|
|
+ }).then((AMap)=>{
|
|
|
+ // 获取类
|
|
|
+ this.AMap = AMap
|
|
|
+ // 加载地图
|
|
|
+ this.amap = new AMap.Map(el, {
|
|
|
+ zoom: 13,//级别
|
|
|
+ pitch: 30,
|
|
|
+ center: [106.395593,29.805197],//中心点坐标
|
|
|
+ viewMode:'3D', //使用3D视图
|
|
|
+ });
|
|
|
+ // 设置地图样式
|
|
|
+ this.amap.setMapStyle("amap://styles/dark")
|
|
|
+ this.amap.addControl(new AMap.Scale())
|
|
|
+ // 加载后的数据处理
|
|
|
+ this.loadedCallback(this);
|
|
|
+ }).catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ addPoint(payload){
|
|
|
+ const that = this
|
|
|
+ this.callAmap((AMap, amap) => {
|
|
|
+ // 1、创建信息窗口
|
|
|
+ const infoWindow = new AMap.InfoWindow({
|
|
|
+ anchor: 'bottom',
|
|
|
+ content: payload.data.content(payload.data),
|
|
|
+ offset: new AMap.Pixel(8, -40),
|
|
|
+ position: payload.position
|
|
|
+ });
|
|
|
+ // 2、创建点位
|
|
|
+ const marker = new AMap.Marker({
|
|
|
+ content: payload.content,
|
|
|
+ position: new AMap.LngLat( payload.position[0], payload.position[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ title: payload.name,
|
|
|
+ });
|
|
|
+ const point = {
|
|
|
+ marker,
|
|
|
+ mouseover: function () {
|
|
|
+ infoWindow.open(amap);
|
|
|
+ document.querySelector(".amap-info-content")?.classList.remove("amap-info-outer")
|
|
|
+ },
|
|
|
+ mouseout: function () {
|
|
|
+ infoWindow.close();
|
|
|
+ document.querySelector(".amap-info-content")?.classList.remove("amap-info-outer")
|
|
|
+ },
|
|
|
+ click: function () {
|
|
|
+ that.$router.push('/detail/1')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 3、创建点击事件，绑定点位与信息窗口的关系
|
|
|
+ marker.on("mouseover", point.mouseover)
|
|
|
+ marker.on("mouseout", point.mouseout)
|
|
|
+ marker.on("click", point.click)
|
|
|
+ this.points.push(point);
|
|
|
+ // 将点位添加到地图上
|
|
|
+ amap.add(marker);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载多个节点
|
|
|
+ * @param payloads 负载数据数组
|
|
|
+ */
|
|
|
+ addPoints(payloads) {
|
|
|
+ payloads.forEach(payload => this.addPoint(payload));
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ clearPoint() {
|
|
|
+ if(this.points && this.points.length > 0) {
|
|
|
+ this.points.forEach(point => {
|
|
|
+ this.removePoint(point)
|
|
|
+ })
|
|
|
+ this.points = new Array();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 移出点位
|
|
|
+ * @param point
|
|
|
+ */
|
|
|
+ removePoint(point){
|
|
|
+ if (point) {
|
|
|
+ point.marker.off('mouseover', point.mouseover)
|
|
|
+ point.marker.off('mouseout', point.mouseout)
|
|
|
+ point.marker.off('click', point.click)
|
|
|
+ this.amap.remove(point)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 封装获取，处理操作
|
|
|
+ * @param callback
|
|
|
+ */
|
|
|
+ callAmap(callback) {
|
|
|
+ const { AMap, amap } = this
|
|
|
+ if (AMap && amap) {
|
|
|
+ callback(AMap, amap)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
