使用天地图实现只展示某个市的功能

最新推荐文章于 2024-09-25 18:15:20 发布

人间废料记

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量167

点赞数 8

分类专栏： vue+element 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wch19960518/article/details/142482659

版权

vue+element 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

可参考天地图部分功能hooks封装useTdtMap.js 和处理geoJson格式数据并能回显至天地图上

下面实现效果类似于百度地图-展示部分区域

功能图

在这里插入图片描述

部分代码

const initLoad = () => {
  mapInit().then((res) => {
    map.value = res;
    
    var layers = map.value.getLayers();
    layers.forEach(function (layer) {
      layer.setOpacity(0);
    });
	
	// 给每个区添加label
    for(let i = 0, j = JNPolygon.features.length; i < j; i ++)  {
      let curPoint = JNPolygon.features[i].properties;
      var latlng = new T.LngLat(curPoint.centroid[0], curPoint.centroid[1]);
      var label = new T.Label({
          text: curPoint.name,
          position: latlng,
          offset: new T.Point(-20, 0)
      });

      map.value.addOverLay(label);
    }
    addMapData();
  });
};


const addMapData = () => {
  const list = props.data || [];
  addJNGeoJSON(JNPolygon); // 画每个区的面(我这块以济南数据为例)
  list.forEach((item) => {
    addMarkers(item); // 根据项目信息添加标注点
  });
};

function addJNGeoJSON(geojson) {
  customGetGeoJsonData(geojson).then((res) => {
    let polygonOptions = {
      color: "rgb(73 221 251)",
      weight: 6,
      opacity: 0.8,
      fillColor: "#000",
    };
    geoJsonMapFormat.polygon?.forEach((polygonCoordinate) => {
      addMapPolygon(polygonCoordinate, polygonOptions);
    });
    // 调整自适应地图视角
    geoJsonToMapAdaptiveAlgorithm().then((res) => {
      let { coordinate, zoom } = res;
      setMapScale(coordinate, zoom);
    });
  });
}

<style scoped>
#mapDiv {
  position: absolute; 
  width: 100%; 
  height: 100%; 
  z-index: 100; 
  background: url('@/assets/images/criteria-bg.png'); // 可将蓝色背景改成图片
}

// 修改label样式
:deep(.tdt-label) {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  color: #fff;
}
</style>