可参考 天地图部分功能hooks封装useTdtMap.js 和 处理geoJson格式数据并能回显至天地图上
下面实现效果类似于百度地图-展示部分区域
功能图
部分代码
const initLoad = () => {mapInit().then((res) => {map.value = res;var layers = map.value.getLayers();layers.forEach(function (layer) {layer.setOpacity(0);});// 给每个区添加labelfor(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>