openlayers使用高德行政区划数据

Dear.Wendy

已于 2024-08-30 08:57:03 修改

阅读量120

点赞数 2

文章标签：前端服务器 javascript vue.js

于 2024-08-30 08:56:04 首次发布

本文链接：https://blog.csdn.net/XiaO_FenG_C/article/details/141702110

版权

安装

npm i @amap/amap-jsapi-loader --save

使用

import * as style from "ol/style";
import * as format from "ol/format";
import * as source from "ol/source";
import * as layer from "ol/layer";
//获取数据及绘制  
let vectorLayer = ref<layer.Vector | null>(null);
  function getDistrictInfoWithPromise(
    keyword: string,//地区名称
    level: string,//级别
  ): Promise<any> {
    return new Promise((resolve, reject) => {
      removeCurrentVectorLayer();
      window._AMapSecurityConfig = {
        securityJsCode: "密钥",
      };
      AMapLoader.load({
        key: "你的key",
        version: "2.0",
        plugins: ["AMap.DistrictSearch"],
      })
        .then((AMap) => {
          const opts = {
            subdistrict: 0,
            extensions: "all",
            level: "district",
          };
          const districtSearch = new AMap.DistrictSearch(opts);
          districtSearch.setLevel(level);
          districtSearch.search(keyword, (status, result) => {
            if (status === "complete" && result.districtList.length > 0) {
              const districtData = result.districtList[0].boundaries;
              const features = districtData.map((boundary) => {
                const coords = boundary.map((coord) => [coord.lng, coord.lat]);
                return new format.GeoJSON().readFeature(
                  {
                    type: "Feature",
                    geometry: {
                      type: "Polygon",
                      coordinates: [coords],
                    },
                  },
                  {
                    dataProjection: "EPSG:4326",
                    featureProjection: "EPSG:3857",
                  },
                );
              });

              const vectorSource = new source.Vector({
                features: features,
              });

              vectorLayer.value = new layer.Vector({
                source: vectorSource,
                style: new style.Style({
                  fill: new style.Fill({
                    color: "rgba(255, 255, 255, 0.2)",
                  }),
                  stroke: new style.Stroke({
                    color: "#ffcc33",
                    width: 2,
                  }),
                }),
              });
              mapInstance.value?.addLayer(vectorLayer.value);
            } else {
            }
          });
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
//移除
  function removeCurrentVectorLayer() {
    if (vectorLayer.value && mapInstance.value) {
      mapInstance.value.removeLayer(vectorLayer.value);
      vectorLayer.value = null;
    }
  }