Vue项目嵌入天地图专题二：在天地图上添加自定义图片，点击图片居中可以弹框并显示对应数据

最新推荐文章于 2024-05-10 14:45:41 发布
最新推荐文章于 2024-05-10 14:45:41 发布
阅读量5.5k 收藏 27
点赞数 6
分类专栏： 地图 vue 文章标签： vue.js 前端 html5 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ss_dsd/article/details/112309880
版权

专题一讲了如何将天地图加载进Vue项目，专题二将来讲在天地图上添加自定义图片，点击可以弹框并显示对应数据。

把数据库里的小区根据自带的经纬度在地图上显示出来，每个小区有不同的状态，根据经纬度和小区的状态显示不同的图片，点击图片可以弹窗，在窗口里显示小区的详情。

先看下效果图，然后从加载地图、落点、带弹窗一步一步讲

①将天地图加载出来，代码如下：

将天地图加载出来比较简单，加载地图初始化参数，绑定地图注记。注：令牌编码需要注册申请 

<template>
  <div class="contant"  id="map" style="z-index:1">
  </div>
</template>

<script>
    export default {
        name: "testJwds.vue",
        data() {
          return {
            map:{},
          }
        },
      methods:{
        init(){
          GeoGlobe.customToken = "令牌编码";
          //地图初始化参数
          let map = new GeoGlobe.Map({
            container: 'map', //绑定容器
            showLogo:false,
            mapCRS: '4490', //定义坐标系
            zoom: 13, //当前缩放级别
            center: [118.778,32.043], //定位中心点
            pitchWithRotate: false,//禁止45度倾斜
            dragRotate: false,
            maxZoom: 17, //最大缩放级别
            minZoom: 11, //最小缩放级别
            areaId:'',//区ID
            streetId:'',//街道ID
          });
          map.on(
            "load",
            function () {
              var dt_layer = new GeoGlobe.NJLayer("esri_vec_dt_controlcabin");
              map.loadSprite(dt_layer.sprite);
              map.style.setGlyphs(dt_layer.glyphs);
              map.addLayer(dt_layer);
              // 加载南京大屏版矢量注记
              var zj_layer = new GeoGlobe.NJLayer("esri_vec_zj_controlcabin");
              map.loadSprite(zj_layer.sprite);
              map.style.setGlyphs(zj_layer.glyphs);
              map.addLayer(zj_layer);
            }.bind(this)
          )
          this.map = map;

        },
      },
      mounted(){
          this.init()
      }
    }
</script>

<style scoped>

</style> 

 效果图如下：

②在地图上根据经纬度，和状态进行落点，不同状态展示不同图片

代码如下：

<template>
  <div class="contant"  id="map" style="z-index:1">
  </div>
</template>

<script>
    export default {
        name: "testJwds.vue",
        data() {
          return {
            map:{},
            geoJsons:{
              "data": {
                "features": [
                  {
                    "geometry": {"coordinates": ["118.794580", "32.037248"], "type": "Point"}, "properties": {
                      "icon": "demoImg4",
                      "xmmc": "测试1",
                      "zzlds": "2",
                      "zznd": "2021",
                    }, "type": "Feature"
                  },
                  {
                    "geometry": {"coordinates": ["118.745607","32.060402"], "type": "Point"}, "properties": {
                      "icon": "demoImg2",
                      "xmmc": "测试2",
                    }, "type": "Feature"
                  }
                ], "type": "FeatureCollection"
              }, "type": "geojson"
            },

          }
        },
      methods:{
        init(){
          GeoGlobe.customToken = "令牌编码";
          //地图初始化参数
          let map = new GeoGlobe.Map({
            container: 'map', //绑定容器
            showLogo:false,
            mapCRS: '4490', //定义坐标系
            zoom: 11, //当前缩放级别
            center: [118.778,32.043], //定位中心点
            pitchWithRotate: false,//禁止45度倾斜
            dragRotate: false,
            maxZoom: 17, //最大缩放级别
            minZoom: 11, //最小缩放级别
            areaId:'',//区ID
            streetId:'',//街道ID
          });
          map.on(
            "load",
            function () {
              var dt_layer = new GeoGlobe.NJLayer("esri_vec_dt_controlcabin");
              map.loadSprite(dt_layer.sprite);
              map.style.setGlyphs(dt_layer.glyphs);
              map.addLayer(dt_layer);
              // 加载南京大屏版矢量注记
              var zj_layer = new GeoGlobe.NJLayer("esri_vec_zj_controlcabin");
              map.loadSprite(zj_layer.sprite);
              map.style.setGlyphs(zj_layer.glyphs);
              map.addLayer(zj_layer);

             //落点
              this.addImgs()
            }.bind(this)
          )
          this.map = map;

        },
        addImgs(){
          let map = this.map
          var url1 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10.png'; //申明图片路径
          map.loadImage(url1, function(error, image) {
            console.log(image)
            //添加图片 命名为demoImg，即这张图片的id为demoImg
            map.addImage("demoImg1", image);
          });

          var url2 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10拷贝.png';
          map.loadImage(url2, function(error, image) {
            map.addImage("demoImg2", image);
          });
          var url3 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10拷贝2.png';
          map.loadImage(url3, function(error, image) {
            map.addImage("demoImg3", image);
          });

          var url4 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10拷贝3.png';
          map.loadImage(url4, function(error, image) {
            map.addImage("demoImg4", image);
          });
          //通过点方法组装点geojson串

          var pointGeoJSON = this.geoJsons

          //添加点数据源
          map.addSource('point-source', pointGeoJSON);

          //添加点图层
          map.addLayer({
            "id": "point-layer", //图层ID
            "type": "symbol", //图层类型
            "source": 'point-source', //数据源
            "layout": {
              "icon-image": ['get','icon'], //获取properties icon 图片
              "icon-size": 0.5, //图片大小
            }
          });
        },
      },
      mounted(){
          this.init()
      }
    }
</script>

<style scoped>

</style>

相比第一步，在第二步中多个一个geoJsons对象和一个addImgs方法。

geoJsons对象在实际开发中是从后台查出来的我在这为了方便演示将他直接在页面上列了出来，我把这个对象单拉出来看下

features是一个数组，多个点数据都在这个数组里面；数组里有一个geometry对象，其中coordinates是落点所需要的经纬度，properties对象则是要展示的数据。

在properties中有一个icon属性，这里面的值就是图片的ID，在features数组中有两条状态不同的数据，不同的状态需要显示不同的图片，后台判断状态并将不同图片的ID赋值给icon(上文标绿部分，demoImg4，demoImg2)；在addImgs方法中会用map.loadImage 将图片加载，用map.addImage将图片添加到天地图的map中(包含两个参数，参数一对应properties.icon中的图片ID)，用map.addSource添加点数据源，用map.addLayer添加图层，注意在添加图层中有一个"icon-image": ['get','icon']  这个属性负责读取properties中icon的ID值并显示

geoJsons:{
  "data": {
    "features": [
      {
        "geometry":
          {
            "coordinates": ["118.794580", "32.037248"], //经纬度
            "type": "Point"
          },
        "properties": {   //展示的数据
          "icon": "demoImg4",//展示图片的ID①
          "xmmc": "测试1",
          "zzlds": "2",
          "zznd": "2021",
        },
        "type": "Feature"
      },
      {
        "geometry":
          {
            "coordinates": ["118.745607","32.060402"],
            "type": "Point"
          },
        "properties": {
          "icon": "demoImg2",//展示图片的ID②
          "xmmc": "测试2",
        },
        "type": "Feature"
      }
    ], "type": "FeatureCollection"
  }, "type": "geojson"
}

效果图如下：

③在有落点的基础上点击落点，落点居中并展示弹窗

首先上代码：

<template>
  <div class="contant"  id="map" style="z-index:1">
  </div>
</template>

<script>
    export default {
        name: "testJwds.vue",
        data() {
          return {
            map:{},
            geoJsons:{
              "data": {
                "features": [
                  {
                    "geometry":
                      {
                        "coordinates": ["118.794580", "32.037248"],
                        "type": "Point"
                      },
                    "properties": {
                      "icon": "demoImg4",
                      "xmmc": "测试1",
                      "zzlds": "2",
                      "zznd": "2021",
                    }, "type": "Feature"
                  },
                  {
                    "geometry":
                      {
                        "coordinates": ["118.745607","32.060402"],
                        "type": "Point"
                      },
                    "properties": {
                      "icon": "demoImg2",
                      "xmmc": "测试2",
                    }, "type": "Feature"
                  }
                ], "type": "FeatureCollection"
              }, "type": "geojson"
            },

          }
        },
      methods:{
        init(){
          GeoGlobe.customToken = "令牌编码";
          //地图初始化参数
          let map = new GeoGlobe.Map({
            container: 'map', //绑定容器
            showLogo:false,
            mapCRS: '4490', //定义坐标系
            zoom: 11, //当前缩放级别
            center: [118.778,32.043], //定位中心点
            pitchWithRotate: false,//禁止45度倾斜
            dragRotate: false,
            maxZoom: 17, //最大缩放级别
            minZoom: 11, //最小缩放级别
            areaId:'',//区ID
            streetId:'',//街道ID
          });
          map.on(
            "load",
            function () {
              var dt_layer = new GeoGlobe.NJLayer("esri_vec_dt_controlcabin");
              map.loadSprite(dt_layer.sprite);
              map.style.setGlyphs(dt_layer.glyphs);
              map.addLayer(dt_layer);
              // 加载南京大屏版矢量注记
              var zj_layer = new GeoGlobe.NJLayer("esri_vec_zj_controlcabin");
              map.loadSprite(zj_layer.sprite);
              map.style.setGlyphs(zj_layer.glyphs);
              map.addLayer(zj_layer);
              this.addImgs()
            }.bind(this)
          )
          this.map = map;

        },
        addImgs(){
          let map = this.map
          var url1 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10.png'; //申明图片路径
          map.loadImage(url1, function(error, image) {
            console.log(image)
            //添加图片 命名为demoImg，即这张图片的id为demoImg
            map.addImage("demoImg1", image);
          });

          var url2 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10拷贝.png';
          map.loadImage(url2, function(error, image) {
            map.addImage("demoImg2", image);
          });
          var url3 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10拷贝2.png';
          map.loadImage(url3, function(error, image) {
            map.addImage("demoImg3", image);
          });

          var url4 = '/msgcdp/static/GeoGlobeAPI_53/img/图层10拷贝3.png';
          map.loadImage(url4, function(error, image) {
            map.addImage("demoImg4", image);
          });
          //通过点方法组装点geojson串

          var pointGeoJSON = this.geoJsons

          //添加点数据源
          map.addSource('point-source', pointGeoJSON);

          //添加点图层
          map.addLayer({
            "id": "point-layer", //图层ID
            "type": "symbol", //图层类型
            "source": 'point-source', //数据源
            "layout": {
              "icon-image": ['get','icon'], //获取properties icon 图片
              "icon-size": 0.5, //图片大小
            }
          });
          this.popups()
        },
        popups(){
          let map = this.map
          //弹出信息框
          var popup = new GeoGlobe.Popup({
            closeButton: true,  //显示关闭按钮
            closeOnClick: true  //点击地图其他地方也可以关闭弹窗
          });

          //点击弹出框
          map.on('click', function (e) {
            var bbox = [//设置容差，使点变成一个范围，方便操作获取到对应的信息
              [e.point.x - 10, e.point.y - 10],
              [e.point.x + 10, e.point.y + 10]
            ];

            var features = map.queryRenderedFeatures(bbox, {
              layers:["point-layer"]
            });

            if(features.length>0){
              var coordinates = features[0].geometry.coordinates.slice();
              this.jd = coordinates[0]
              this.wd = coordinates[1]
              //设置中心点
              map.setCenter(new GeoGlobe.LngLat(this.jd, this.wd),11);
              popup.setLngLat(coordinates)
                .setHTML('<div class="wrap" >' +
                  '    <label class="st" >' +
                  '        <span class="st_title" onclick="sss(this)" >项目信息</span>' +
                  '        <input type="radio" name="tab" checked>' +
                  '        <div>' +
                  '<p align="left" ><span class="st_title_spot" ></span><strong>项目名称</strong>' + '<span class="st_title_spot2" >'+features[0].properties.xmmc+'</span>' + '</p>' +
                  '</div>' +
                  '    </label>' +
                  '    <label class="st" >' +
                  '        <span class="st_title" onclick="sss(this)" >项目流程信息</span>' +
                  '        <input type="radio" name="tab">' +
                  '        <div>' +
                  '</div>' +
                  '    </label>' +
                  '</div>')
                .addTo(map);
            }

          })

        },
      },
      mounted(){
          this.init()
      }
    }
</script>

<style scoped>

</style> 

 在第三步中，比第二步又多了一个方法popups，在popups中通过new GeoGlobe.Popup会创建弹窗，弹窗中有两个属性

closeButton: true, //弹框中显示关闭按钮 
closeOnClick: true //点击地图其他地方也可以关闭弹窗

点击出弹窗的主要方法是 map.on('click', function (e) {}）,点击落点图标会进入这个方法，在这个方法中通过var features = map.queryRenderedFeatures(bbox, { layers:["point-layer"] });  其中point-layer是图层ID，获取当前

点击的图层ID的数据也就是 上文geoJsons中的properties中的数据；

map.setCenter(new GeoGlobe.LngLat(this.jd, this.wd),11); 是根据经纬度将所点击的落点图标设为地图中心点，并设置显示级别。

popup.setLngLat(coordinates) .setHTML()是就是所显示的弹窗中的内容。这个最好先在页面上画出来再移到setHtml()中，不然在setHtml调样式比较麻烦。

以上就专题二落点展示图片并弹窗的所有代码，效果图如下：  专题三将展示如何在地图上落多个面，点击并弹窗。

ss_dsd
关注
专栏目录
Vue2 - 最新实现接入使用天地图及卫星视图切换功能，在国家天地图上自由切换地图显示类型（卫星视图/地形视图/卫星混合/地形混合/普通视图）vue天地图切换视图显示改成卫星风格，切换地图图层完整代码
王佳斌
09-09 2990
vue2，nuxt2，天地图，视图，卫星，地图类型切换，vue天地图，改成卫星视角，在线地图切换，来回切换卫星图，天地图如何实现来回切换卫星图，地形图，卫星视图，vue中使用天地图自定义样式切换地图图层，切换报错，加载出错，卫星图太卡，地图图层更换，vue安装集成天地图详细示例源码，切换地图的样式，在天地图中如何将地图的类型随意更换，提供多种视图模式用户自由点击更换，VUE引入天地图卫星版，详细教程示例源码代码，天地图切换卫星用什么api，卫星视角API方法，vue2卫星天地图，能改地图的显示方式，图层类型
vue2使用天地图
最新发布
请叫我欧皇！的博客
08-20 1610
需求：用vue2使用天地图展示对应点位数据以及开发中出现的问题等，其实天地图的写法和百度地图差不多注意！！！天地图的接口不稳定，时常报错418，官网也是一样的情况，推荐还是使用百度或者高德吧。以下是拷贝的网上的地图坐标系，仅作参考（1）天地图：CGCS2000，2000国家大地坐标系；我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。
vue2+天地图
weixin_43870864的博客
05-10 1010
vue2+天地图的使用
vue项目中使用天地图
DAKADI
08-23 3425
天地图使用示例一、申请key二、代码部分1.静态引入2.创建容器3.创建基础地图4.创建卫星图图层5.创建点位遮盖物6.点位弹窗展示 一、申请key 链接: http://lbs.tianditu.gov.cn/. 登陆网址，注册账号后点击控制台。 创建新应用，并填写好信息，就可以在应用管理表格里看到生成的key。我是pc端项目，应用类型选择了浏览器。 二、代码部分 1.静态引入 在index.html内引入，对应的key修改成自己申请的。 <script type="text/javascr
自定义地图示例：天地图（二）
mapdigit
07-06 3283
有了天地图地图图片的URL生成规则，就可以开始实行对自定义地图类型天地图的支持。 引路蜂地图包中类MapType，接口ICustomMapType主要用来支持自定义地图。在类MapType中定义了 GENERIC_MAPTYPE_1 ，GENERIC_MAPTYPE_2 … GENERIC_MAPTYPE_7 用于支持自定义地图，其中类型 GENERIC_MAPTYPE_7 由两层组成（GENE...
Vue中使用天地图
热门推荐
码农键盘上的梦
02-14 1万+
天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口，以HTML 5.0的形式提供各种地图服务和数据，如。
天地图添加marker自定义图标和文字备注
weixin_44999830的博客
03-21 2088
天地图 图标 marker 文字 标注
Vue 天地图
qq_59944654的博客
08-24 393
vue引入天地图
高德地图-自定义点击弹框（气泡）
06-17
5. **显示和关闭弹框**：在处理点击事件的回调函数中，调用`createPopup`显示弹框，并添加一个关闭按钮或者点击地图其他位置时自动关闭弹框的功能。 ```javascript AMap.event.addListener(map, 'click', function...
openlayers 地图上加图标_Openlayers 定位，添加自定义图标，点击图标弹框
weixin_36437537的博客
12-29 2485
之前已经把地图展示出来，现在可以在地图上做相关操作。首先定义一个位置图层,这样可以动态操作importFeaturefrom'ol/Feature'import{VectorasVectorLayer}from'ol/layer'importGeoJSONfrom'ol/format/GeoJSON'importVectorSourcefrom'ol/source/Ve...
Vue项目中应用天地图
saltlike的博客
12-13 5265
引入天地图 js 首先到天地图官网获取服务许可key；国家地理信息公共服务平台 天地图 然后在Vue项目的index.html 文件中，全局引入天地图js库 <body> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key" type="text/javascript"></script> </body> 应用天地图 <template> &.
vue+天地图
gw616的博客
07-21 1360
引入到public index.html <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=********"type="text/javascript"></script> 页面显示地图 <div id="mapDiv"></div> mounted() { this.loadmap(); }, methods: { loadmap() { var map =
实践：vue集成使用openlayers天地图，将静态图片作为底图
qq_45554167的博客
10-28 4814
最近项目上要使用openlayers做业务需求，过了这么久终于有时间闲下来写文章了。使用的ol版本：^6.5.0。使用的版本不同调用openlayers的Api会有变化，请注意。
vue中使用天地图
lemon今天学习了吗？的博客
07-08 5554
天地图官网：天地图API一、介绍：天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口，以HTML 5.0的形式提供各种地图服务和数据，如地图展示、标注、定位等。为开发者提供了快速调用天地图在线地理信息服务的通道，包括快速创建地图、调用地图、地名搜索以及在地图上添加覆盖物等。支持PC端和移动端基于浏览器的地图应用开发，支持主流的HTML4.0和HTML5.0特性的地图开发。二、实现步骤：三、示例：vue +天地图实现地图上添加覆盖物； 四、效果展示：...
Vue自定义render封装：简化项目弹框管理
本文聚焦于如何通过Vue自定义render统一管理项目组中的弹框功能，以解决传统方式中存在的问题，如代码冗余、配置复杂、样式不一致以及参数传递不便等。 首先，文章讨论了为什么需要对弹框进行封装。在项目中，弹框...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值