epmet-oper-gov/src/utils/dai-map.js

import nextTick from "dai-js/tools/nextTick";
import { requestGet } from "@/js/dai/request";

export const mapType =
  typeof window.TMap !== "undefined"
    ? "qq"
    : typeof window.T !== "undefined"
    ? "td"
    : "tdzw";

const urlSdtdt = (() => {
  if (window.SITE_CONFIG["nodeEnv"] == "dev_sdtdt") {
    return {
      search: "https://service.sdmap.gov.cn/search",
      geo: "https://service.sdmap.gov.cn/geodecode",
    };
  } else {
    return {
      search: "http://172.20.46.177/map_search_proxy/search",
      geo: "http://172.20.46.177/epmet-map-proxy/GeoDecodeService.ashx",
    };
  }
})();

export const QQMap = window.TMap;
export const TDMap = window.T;

export function searchNearby(map, keyword) {
  if (mapType == "qq") {
    return new Promise((reslove) => {
      const search = new QQMap.service.Search(map, { pageSize: 10 });
      search
        .searchNearby({
          keyword,
          radius: 1000,
          autoExtend: true,
          center: map.getCenter(),
        })
        .then((result) => {
          let { data } = result;
          if (Array.isArray(data) && data.length > 0) {
            const {
              location: { lat, lng },
              address,
            } = data[0];
            reslove({
              msg: "success",
              data: {
                lng,
                lat,
                address,
                resultList: data.map((item) => {
                  item.lonlat = lng + " " + lat;
                  item.name = item.name || "";
                  return item;
                }),
              },
            });
          } else {
            reslove({
              msg: "failed",
              error: "未检索到相关位置坐标",
            });
          }
        })
        .catch((error) => {
          reslove({
            msg: "failed",
            error,
          });
        });
    });
  } else if (mapType == "td") {
    return new Promise(async (reslove) => {
      const search = new TDMap.LocalSearch(map, { pageCapacity: 10 });
      search.setQueryType(1);
      search.searchNearby(keyword, map.getCenter(), 1000000000);

      await nextTick(1000);

      const result = search.getResults();
      const data = result ? result.getPois() : null;

      console.log("检索结果", data);

      if (Array.isArray(data) && data.length > 0) {
        const { lonlat, address, name } = data[0];
        const lng = lonlat.split(" ")[0];
        const lat = lonlat.split(" ")[1];
        reslove({
          msg: "success",
          data: {
            lng,
            lat,
            address: address + name,
            resultList: data,
          },
        });
      } else {
        reslove({
          msg: "failed",
          error: "未检索到相关位置坐标",
        });
      }
    });
  } else if (mapType == "tdzw") {
    return new Promise(async (reslove) => {
      const center = map.getCenter();
      const url = urlSdtdt.search;
      const { status, result } = await requestGet(url, {
        area: `CIRCLE(${center.lon} ${center.lat} 1000000)`,
        words: keyword,
        city: "烟台",
        uid: "navinfo",
        st: "LocalSearch",
        tk: "e758167d5b90c351b70a979c0820840c",
      });

      if (
        status == "ok" &&
        result &&
        Array.isArray(result.features) &&
        result.features.length > 0
      ) {
        const { lng, lat, address, name } = result.features[0];
        reslove({
          msg: "success",
          data: {
            lng,
            lat,
            address: address + name,
            resultList: result.features.map((item) => {
              item.lonlat = lng + " " + lat;
              item.name = item.name || "";
              return item;
            }),
          },
        });
      } else {
        reslove({
          msg: "failed",
          error: "未检索到相关位置坐标",
        });
      }
    });
  }
}

// 封装了地图相关函数，兼容天地图、腾讯地图常用api
export default function init(ele, position, params) {
  this.mapType = mapType;
  this.map = null;
  this.marker = null;
  this.markers = null;
  this.getCenter = function () {
    return {
      lat: 0,
      lng: 0,
    };
  };
  this.setCenter = function (lat, lng) {};
  this.setMarker = function (lat, lng, title) {};
  this.getAddress = async function (lat, lng) {};
  this.on = function (eventType, fn) {};

  let { latitude, longitude } = position;
  if (!latitude || latitude == "" || latitude == "0") {
    latitude = 39.9088810666821;
    longitude = 116.39743841556731;
  }

  if (mapType != "qq") {
    if (typeof ele == "string") {
      ele = document.getElementById("app");
    }
    let width = ele.offsetWidth;
    let height = ele.offsetHeight;
    if (height == 0) {
      ele.style.height = width * 0.5 + "px";
    }
  }

  if (mapType == "qq") {
    let center = new QQMap.LatLng(latitude, longitude);
    this.map = new QQMap.Map(ele, {
      center,
      ...params,
    });

    this.markers = new QQMap.MultiMarker({
      map: this.map,
      geometries: [],
    });

    this.getCenter = function () {
      const center = this.map.getCenter();
      const lat = center.getLat();
      const lng = center.getLng();
      return { lat, lng };
    };

    this.setCenter = function (lat, lng) {
      this.map.setCenter(new QQMap.LatLng(lat, lng));
    };

    this.setMarker = function (lat, lng, title = "位置") {
      this.markers.setGeometries([]);
      this.markers.add([
        {
          id: "4",
          styleId: "marker",
          position: new QQMap.LatLng(lat, lng),
          properties: {
            title,
          },
        },
      ]);
    };

    this.geocoder = new QQMap.service.Geocoder(); // 新建一个正逆地址解析类
    this.getAddress = async function (lat, lng) {
      return new Promise((reslove) => {
        this.geocoder
          .getAddress({ location: new QQMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
          .then((result) => {
            reslove({
              msg: "success",
              data: {
                address: result.result.address,
              },
            });
          })
          .catch((error) => {
            reslove({
              msg: "failed",
              error,
            });
          });
      });
    };

    this.on = function (eventType, fn) {
      if (eventType == "dragend") {
        this.map.on("moveend", (e) => {
          console.log("dragend", e);
          if (e && e.originalEvent) {
            fn(e);
          }
        });
      } else {
        this.map.on(eventType, fn);
      }
    };
  } else if (mapType == "td") {
    let center = new TDMap.LngLat(longitude, latitude);
    this.map = new TDMap.Map(ele, {
      center,
      ...params,
    });

    this.getCenter = function () {
      const center = this.map.getCenter();
      const lat = center.getLat();
      const lng = center.getLng();
      return { lat, lng };
    };

    this.setCenter = function (lat, lng) {
      this.map.panTo(new TDMap.LngLat(lng, lat));
    };

    this.setMarker = function (lat, lng, title = "位置") {
      let lnglat = new TDMap.LngLat(lng, lat);
      if (!this.marker) {
        this.marker = new TDMap.Marker(lnglat, {
          title,
        });
        this.map.addOverLay(this.marker);
      } else {
        this.marker.setLngLat(lnglat);
      }
    };

    this.geocoder = new TDMap.Geocoder(); // 新建一个正逆地址解析类
    this.getAddress = async function (lat, lng) {
      return new Promise((reslove) => {
        this.geocoder.getLocation(new TDMap.LngLat(lng, lat), (result) => {
          if (result) {
            console.log("this.geocoder.getLocation", result);
            let status = result.getStatus();
            reslove({
              msg: "success",
              data: {
                address: result.getAddress(),
              },
            });
          } else {
            reslove({
              msg: "failed",
              error: "解析失败",
            });
          }
        });
      });
    };

    this.on = function (eventType, fn) {
      if (eventType == "dragend") {
        this.map.on("dragend", (e) => {
          console.log("dragend", e);
          fn(e);
        });
      } else {
        this.map.on(eventType, fn);
      }
    };
  } else if (mapType == "tdzw") {
    this.map = new OpenLayers.Map(ele, {
      allOverlays: true,
      numZoomLevels: 19,
      displayProjection: "EPSG:4490",
      controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.ArgParser(),
        new OpenLayers.Control.Attribution(),
      ],
    });
    this.map.addLayer(new SDTDTLayer());

    this.getCenter = function () {
      const center = this.map.getCenter();
      const lat = center.lat;
      const lng = center.lon;
      return { lat, lng };
    };

    this.setCenter = function (lat, lng) {
      lat = parseFloat(lat);
      lng = parseFloat(lng);
      this.map.setCenter(new OpenLayers.LonLat(lng, lat), 16);
    };
    this.setCenter(latitude, longitude);

    this.setMarker = function (lat, lng, title = "位置") {
      lat = parseFloat(lat);
      lng = parseFloat(lng);
      const style = {
        externalGraphic: require("@/assets/img/common/map-poi.png"),
        graphicWidth: 32,
        graphicHeight: 32,
      };
      if (!this.marker) {
        //创建矢量图层
        this.markerLayer = new OpenLayers.Layer.Vector("graphicLayer", {
          style: OpenLayers.Util.extend(
            {},
            OpenLayers.Feature.Vector.style["default"]
          ),
        });
        this.map.addLayer(this.markerLayer);
        this.marker = new OpenLayers.Feature.Vector(
          new OpenLayers.Geometry.Point(lng, lat),
          null,
          style
        );
        this.markerLayer.addFeatures([this.marker]);
      } else {
        console.log("this marker", this.marker);
        this.marker.geometry.x = 0;
        this.marker.geometry.y = 0;
        this.marker.geometry.destroy();
        this.markerLayer.removeFeatures([this.marker]);
        this.marker = new OpenLayers.Feature.Vector(
          new OpenLayers.Geometry.Point(lng, lat),
          null,
          style
        );
        // this.markerLayer.addFeatures([this.marker]);
        this.markerLayer.redraw();
        console.log("redraw", this.marker);
      }
    };

    this.getAddress = async function (lat, lng) {
      return new Promise(async (reslove) => {
        const url = urlSdtdt.geo;
        const { status, result } = await requestGet(url, {
          point: lng + "," + lat,
          type: "11",
          st: "Rgc2",
          output: "json",
          // tk: "e758167d5b90c351b70a979c0820840c",
        });
        if (status == "ok" && result.address) {
          reslove({
            msg: "success",
            data: {
              address: result.address,
            },
          });
        } else {
          reslove({
            msg: "failed",
            error: "解析失败",
          });
        }
      });
    };

    this.on = function (eventType, fn) {
      if (eventType == "dragend") {
        this.map.events.register("moveend", null, (e) => {
          console.log("dragend", e);
          fn(e);
        });
      } else {
        this.map.events.register(eventType, null, moveendHandler);
      }
    };
  }

  this.searchNearby = async function (keyword) {
    const ret = await searchNearby(this.map, keyword);

    return ret;
  };

  return this;
}