VUE+天地图行政区划描边

最新推荐文章于 2024-11-01 11:52:00 发布

原创最新推荐文章于 2024-11-01 11:52:00 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该文章展示了如何在Vue.js应用中引用天地图API，通过加载JSON文件来设定地图边界。首先，在HTML中引入天地图API并设置秘钥，然后在Vue组件中创建地图实例，定位到特定坐标，并设置地图类型。接着，从JSON文件中读取地理数据，解析坐标并创建多边形覆盖物添加到地图上，以显示区域边界。

一、在public下的index引用天地图

        <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的秘钥" type="text/javascript"></script>

二、json文件放到项目里

json文件获取地址：DataV.GeoAtlas地理小工具系列

<template>
    <!--天地图用的DIV-->
    <div id="tdtMapDivID" class="divTdtMap" ref="mapBox"></div>
</template>
<script>
import tsconfig from '../assets/json/110118.json'
var tdtMap;
export default {
    mounted() {
        tdtMap = new T.Map('tdtMapDivID')
        tdtMap.centerAndZoom(new T.LngLat(116.94294, 40.50127), 10)
        tdtMap.setMapType(TMAP_NORMAL_MAP)
        this.initBorder();
    },
    methods: {
        /**初始化边界 */
        initBorder() {
          var bdary = tsconfig.features[0].geometry.coordinates[0][0]
          var pointArrays = new Array();
          for (var i = 0; i < bdary.length; i++) {
            var xyArr = bdary[i][0]
            var ptAr = bdary[i][1]
            pointArrays.push(new T.LngLat(xyArr, ptAr));
           }
          var border = new T.Polygon(pointArrays , { color: '#2299EE', weight: 5, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0.5 });
          //向地图上添加线
          tdtMap.addOverLay(border);
        }
    }
}
</script>
<style>
.divTdtMap {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100vh;
  z-index: 0;
}
</style>