天地图简单使用

已于 2024-08-05 15:18:49 修改
阅读量1.1k 收藏 10
点赞数 11
分类专栏： 前端部分 文章标签： javascript
于 2024-08-04 11:38:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48763502/article/details/140894319
版权

文章目录

概要

天地图是一种地理信息系统（GIS）软件，在中国领先的地理信息服务提供商。它提供了丰富的地理空间数据和地图服务，包括地图浏览、地理信息查询、地理分析等功能。

天地图的主要特点包括：

  1. 多种地图展示模式：用户可以根据需要选择不同的地图模式，如街道地图、卫星影像地图、地形地图等。
  2. 多种地理查询功能：用户可以根据地点、地址、经纬度等进行地理查询，获取相关地理信息。
  3. 地理信息分析功能：用户可以进行空间分析、统计分析等，对地理数据进行深入研究和分析。
  4. 地图可视化定制：用户可以自定义地图的样式和内容，使得地图更符合个人需求。
  5. 地图API支持：天地图提供了丰富的地图API，方便开发者在自己的应用程序中集成地图功能。

总体来说，天地图是一款功能强大、易于使用的地理信息系统软件，为用户提供了丰富的地理信息和地图服务，广泛应用于不同领域，如城市规划、交通管理、环境保护等。

需求

如图所示，再新增门店需要使用天地图来进行详细地址的选择，同时在地址上标记位置和提供地址搜索
在这里插入图片描述
在这里插入图片描述

引入天地图api

在这里插入图片描述

代码

我这边把天地图封装成一个组件，需要用到的地方就引入。
引入天地图

 <t-map :adCode="cityAreaCode[2]" @clickTMap="clickTMap" @searchTMap="searchTMap" :lonlat="lonLat"
               @getSearchResult="getSearchResult" ref="TMap" :inputValue="inputValue" :address="address"></t-map>

传值

getSearchResult(e) {
      this.searchAddressResult = e
    }

详细地址输入框事件

   inputEvent(e) {
      clearTimeout(this.timeoutId);
      this.timeoutId = setTimeout(() => {
        this.inputValue = e
      }, 500);
    },

点击地图事件

clickTMap(e) {
      this.$set(this.model, 'address', e)
    },

<template>
  <div>
    <!--创建地图容器元素-->
    <div id="mapContainer" :style="'width:' + width +'; height:' + height" style="cursor: default"></div>
    <!-- 建议词面板 -->
    <div id="suggestsDiv" class="suggests"></div>
  </div>
</template>
<script>

let map, infoWin, bound
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    adCode: {
      type: String,
      default: ''
    },
    inputValue: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    lonlat: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      bound: ''
    };
  },
  created() {
    // 创建地图实例
    this.$nextTick(() => {
      this.initMap()
    })
  },
  watch: {
    adCode: {
      handler: function () {
        this.changeCity()
      },
      immediate: true
    },
    inputValue: {
      handler: function () {
        this.search(this.inputValue)
      },
      immediate: false
    },
    address: {
      handler: function () {
        this.addressSearch(this.address)
      }
    },
    lonlat: {
      handler: function () {
        this.searchAddressByLonLat(this.lonlat)
      }
    }
  },
  methods: {
    // 初始化天地图
    initMap(e) {
      const _this = this
      let T = window.T;
      map = new T.Map('mapContainer');
      let lc = new T.LocalCity();  //创建一个获取本地城市位置的实例
      lc.location(function (result) {  //利用ip进行定位
        map.centerAndZoom(new T.LngLat(result.lnglat.lng, result.lnglat.lat), 16);
      })
      _this.addressSearch(this.address)
      if (!e) {
        _this.mapClick()
      }
    },
    // 地图上的点击事件
    mapClick() {
      const _this = this
      //创建对象
      let geocode = new T.Geocoder();
      map.addEventListener("click", function (e) {
        _this.setMarker(e.lnglat.lng, e.lnglat.lat)
        geocode.getLocation(e.lnglat, searchResult);
      });

      function searchResult(result) {
        if (result.getStatus() == 0) {
          _this.$emit('clickTMap', result.getAddress())
        }
      }
    },
    /**
     * 设置覆盖物
     * @param lng 经度
     * @param lat 纬度
     */
    setMarker(lng, lat) {
      // 清除覆盖物
      map.clearOverLays();
      //创建标注对象
      var marker = new T.Marker(new T.LngLat(lng, lat));
      //向地图上添加标注
      map.addOverLay(marker);
    },
    // 切换城市
    changeCity() {
      if (!this.adCode) {
        return
      }
      let T = window.T;
      //创建对象
      let administrative = new T.AdministrativeDivision();
      let config = {
        needSubInfo: false,
        needAll: false,
        needPolygon: true,
        needPre: true,
        searchType: 0,
        searchWord: this.adCode
      };
      administrative.search(config, searchResult);

      function searchResult(result) {
        bound = result.data.bound
        if (result.msg === 'ok' && result.returncode === '100')
          map.centerAndZoom(new T.LngLat(result.data.lnt, result.data.lat), 16);
      }
    },
    //详细地址搜索 (所属地区无法搜索该行政区域时)
    localSearch(val) {
      const __this = this
      var config = {
        pageCapacity: 10,	//每页显示的数量
        onSearchComplete: localSearchResult	//接收数据的回调函数
      }
      //创建搜索对象
      let localsearch = new T.LocalSearch(map, config);
      localsearch.search(val, 4)

      function localSearchResult(result) {
        //清空地图及搜索列表
        // __this.clearAll();
        //解析建议词信息
        suggests(result.getSuggests());

        //解析建议词信息
        function suggests(obj) {
          if (obj) {
            __this.$emit('getSearchResult', obj)
          } else {
            __this.$emit('getSearchResult', null)
          }
        }
      }
    },
    //根据Bounds进行本地搜索
    search(val) {
      const _this = this
      if (bound == null) {
        _this.localSearch(val)
        return
      }
      var config = {
        pageCapacity: 10,	//每页显示的数量
        onSearchComplete: localSearchResult	//接收数据的回调函数
      };
      //创建搜索对象
      let localsearch = new T.LocalSearch(map, config);
      const boundsArr = bound.split(",").map(parseFloat);

      // 创建Bounds对象
      const bounds = new T.LngLatBounds(
        new T.LngLat(boundsArr[0], boundsArr[1]),
        new T.LngLat(boundsArr[2], boundsArr[3])
      );
      localsearch.searchInBounds(val, bounds)

      //创建矩形
      createRect();

      function localSearchResult(result) {
        //清空地图及搜索列表
        _this.clearAll();
        //创建矩形
        createRect();
        //根据返回类型解析搜索结果
        switch (parseInt(result.getResultType())) {
          case 1:
            //解析点数据结果
            pois(result.getPois());
            break;
          case 2:
            //解析统计城市
            statistics(result.getStatistics());
            break;
        }
      }

      //解析点数据结果
      function pois(obj) {
        if (obj) {
          _this.$emit('getSearchResult', obj)
        } else {
          _this.$emit('getSearchResult', null)
        }
      }

      //矩形
      function createRect() {
        var config = {
          color: "blue", //折线颜色
          fillColor: "#fff",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
          weight: "3", //折线的宽度，以像素为单位
          opacity: 0.5,    //折线的透明度，取值范围0 - 1
          fillOpacity: 0.4,
          lineStyle: "solid" //折线的样式，solid或dashed
        };

        //创建矩形对象
        var rect = new T.Rectangle(bounds, config);
        map.addOverLay(rect);
      }
    },
    //清空地图及搜索列表
    clearAll() {
      const _this = this
      map.clearOverLays();
      map.clearLayers()
      // _this.initMap()
    },
    //编辑弹框详细地址搜索（编辑回显标注位置）
    addressSearch(address) {
      const _this = this
      if (address == null || address == '') {
        return
      }
      //创建对象
      let geocoder = new T.Geocoder();
      geocoder.getPoint(address, searchResult)

      function searchResult(result) {
        if (result.getStatus() == 0) {
          map.panTo(result.getLocationPoint(), 16);
          var marker = new T.Marker(result.getLocationPoint());
          map.addOverLay(marker);
          // const point = new T.LngLat(result.location.lon, result.location.lat);
          // _this.searchSuggestWord(point)
        }
      }
    },

    //点击某个建议词的搜索事件
    searchAddressByLonLat(lonlat) {
      const _this = this
      let T = window.T
      let geocoder = new T.Geocoder()
      map.clearOverLays();
      geocoder.getLocation(lonlat, searchResult);

      function searchResult(result) {
        let T = window.T
        if (result.getStatus() == 0) {
          map.panTo(result.getLocationPoint(), 16);
          //创建标注对象
          var marker = new T.Marker(result.getLocationPoint());
          //向地图上添加标注
          map.addOverLay(marker);
          const point = new T.LngLat(result.location.lon, result.location.lat);
          searchSuggestWord(point)
        }

        function searchSuggestWord(point) {
          let geocode = new T.Geocoder()
          geocode.getLocation(point, searchResult);

          function searchResult(result) {
            if (result.getStatus() == 0) {
              _this.$emit('searchTMap', result.formatted_address)
            }
          }
        }
      }
    },
    //搜素点击那个建议词的详细地址(根据经纬度)
    searchSuggestWord(point) {
      const _this = this
      let geocode = new T.Geocoder()
      geocode.getLocation(point, searchResult);

      function searchResult(result) {
        if (result.getStatus() == 0) {
          _this.$emit('searchTMap', result.formatted_address)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>
天地图——常用方法分享
dyt1_1的博客
03-18 6857
（1）获取行政区划信息——points返回为空，只能使用其他方式获取行政区划边界坐标（参考（3）绘制边界线）（2）JavaScript API 4.0 类参考（常用）（3）JavaScript API 4.0代码示例（常用）（5）地图平移——改变中心点坐标，移动到其他位置。（9）逆地理编码——根据经纬度获取地址。（4）在地图上绘制点位（点聚合）（4）web API 代码示例。（8）去掉天地图自带的版权控件。（2）创建地图并标记当前位置。（5）vue使用天地图。
天地图的使用
最新发布
2403_88913721的博客
03-10 380
最近在写项目的时候，用户需求有一个需要引入这样的非常详细的地图，因为走过了很多坑所以来记录一下。
vue-map天地图根据市、区显示不同标注
weixin_66961876的博客
05-17 1324
注释：放在gitList里面加载解决数据加载异步。
天地图入门使用
不靠谱的作曲家
01-31 3328
天地图”是国家测绘地理信息局建设的地理信息综合服务网站。集成了来自国家、省、市（县）各级测绘地理信息部门，以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源，如果做的项目是政府部门、企事业单位尽量选择天地图，因为相比其他几家服务商更加权威。
天地图的简单使用
qq_36762151的博客
06-28 679
由于高德、百度、腾讯地图商用收费问题，导致使用地图都改成 “天地图”，从来没用过，萌币啊，网上例子也少，特此记录下希望对你有帮助。
如何使用天地图
weixin_47375788的博客
08-12 1429
如果你已经申请了许可，那可以不用看上的了，如何使用请看下面。1.首先在index.html中一下代码。第二步：获取服务许可（Key）
在vue中使用天地图dome
05-31
5. **多个标注的显隐**：在地图上添加多个标注，可以使用天地图API创建点图层，并设置标注的显示与隐藏状态。这可能涉及到数据绑定和Vue的条件渲染指令（如v-if或v-show）。 6. **缩放控件**：天地图API提供预设的...
vue项目中使用天地图
01-08
如果你只想显示特定的图层，可以使用其他天地图提供的图层服务，例如卫星图层（`T.CatalogService`）、微型混合图层（`T.WMSLayer`）或地形图层（`T.TMSLayer`），并根据需求进行定制。 以上就是在Vue项目中使用天...
1.（leaflet篇）leaflet接入天地图.zip
07-22
Leaflet是一款轻量级的JavaScript库，专门用于创建交互式的二维地图。...总之，Leaflet与天地图的结合，为开发者提供了强大的地图应用开发平台，无论是简单的地图展示还是复杂的地图交互，都能轻松实现。
天地图使用说明
10-29
基于天地图的使用开发说明 有详细的开发步奏
天地图的实例
01-13
一个基于天地图的小实例，希望可以帮到大家。
天地图地图服务调用
11-30
demo使用supermap for JavaScript调用天地图ogc服务，实现天地图定位等功能。demo可以直接运行使用。
天地图开发实例
12-12
里边是web项目中天地图的实例jsp，包括的功能有在天地图上增加控件，增加tmarker，tlabel，线等，且对事件的绑定做了自己的处理，以供参考。
天地图JavaScript使用说明
09-23
天地图JavaScript使用说明，十分权威，有用的开发指南。可自行下载。
天地图插件：ArcGIS直接能用的天地图插件，可做参考用
04-09
本篇文章将围绕"天地图插件：ArcGIS直接能用的天地图插件，可做参考用"这一主题，详细讲解如何使用这款插件以及其在ArcGIS中的应用。 "天地图"是中国测绘科学研究院开发的国家级地理信息公共服务平台，提供了丰富的...
使用天地图与Leaflet，轻松创建免费地图应用
Coding home - 漂流瓶jz
09-14 2789
天地图又叫做地理信息公共服务平台，是提供给公众免费使用的地理信息平台，提供了多种形式的地图开发资源，使用天地图，可以构建免费的地图应用。Leaflet是一个开源的Javascript地图库，我们使用它来进行地图的展示和交互。
Vue关于天地图的使用 自定义标注、自定义折线工具、自定义多边形工具
littledidi的博客
11-16 3634
this.dblclickMarkTool就是你自己设置的触发方法，这个就不展示了，要注意的是绑定的是currentMarker不是currentLnglat。其实天地图的使用与其他地图（百度等），个人觉得大同小异，个人的方法是在项目里面的public目录下的index.html文件下导入。这里要注意的是在设置监听事件的时候注意看文档上面的事件名是什么，因为会涉及到一些点击操作，我就有这方面的需求，所以就需要用到监听事件。参考了自定义MarkTool工具的方法，其实就很简单了，只需要注意事件方法名即可。
Cesium离线使用天地图瓦片的简易方法
资源摘要信息:"该资源提供了在离线环境下使用天地图瓦片的方法和部分瓦片数据。由于在线瓦片地图经常受到网络状况的影响，这在使用如Cesium这样的地理信息系统时尤为不便。因此，通过下载瓦片地图数据到本地，可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

＆白帝＆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值