精华内容
下载资源
问答
  • vue调用天地图地图服务接口 添加图层
    2022-07-08 11:06:08

    天地图官网:天地图API


    一、介绍:天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口,以HTML 5.0的形式提供各种地图服务和数据,如地图展示、标注、定位等。为开发者提供了快速调用天地图在线地理信息服务的通道,包括快速创建地图、调用地图、地名搜索以及在地图上添加覆盖物等。支持PC端和移动端基于浏览器的地图应用开发,支持主流的HTML4.0和HTML5.0特性的地图开发。

    二、实现步骤:

    1. 创建地图容器元素;
    2. 引入天地图,tk:在官网申请;
    3. 初始化地图对象;
    4. 设置显示地图的中心点和级别;
    5. 创建地图类型控件;
    6. 将控件添加到地图,一个控件实例只能向地图中添加一次;
    7. 创建坐标,通常是调取接口获得经纬度;
    8. 创建覆盖使用的图标;
    9. 创建在该坐标上的一个图像标注实例;
    10. 将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次;

    三、示例:vue +天地图实现地图上添加覆盖物;

    <template>
    	<view class="map-view">
            <!-- 1.创建地图容器元素 -->
    		<view class="map" id="mapView"></view>
        </view>
    </template>
    
    <script>
    	// 2.引入天地图,tk:在官网申请
    	const MAP_URL = 'https://api.tianditu.gov.cn/api?v=4.0&tk=密钥';
    	export default {
    		name: "map-view",
    		props: {
                zoom: {
    				type: Number,
    				default: 11
    			}
    		},
    		data() {
    			return {
    				map: null,
    				markers: []
    			};
    		},
    		mounted() {
    			//#ifdef H5
    			this.initMap();
    			//#endif
    		},
    		methods: {
    			initMap() {
                    // 3.初始化地图对象
    				this.map = new T.Map("mapView", {});
                    // 4.设置显示地图的中心点和级别
    				this.map.centerAndZoom(new T.LngLat( 112.9388, 28.2280 ), this.zoom);
                    // 5.创建地图类型控件
                    const ctrl = new T.Control.MapType([{
    					title: '地图',
       					icon:'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png',                     //地图控件上所要显示的图层图标(默认图标大小80x80)
    					layer: window.TMAP_NORMAL_MAP
    				}{
    					title: '卫星',
    					icon:'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
    					layer: window.TMAP_SATELLITE_MAP
    				}]);
                    // 6.将控件添加到地图,一个控件实例只能向地图中添加一次。
                    this.map.addControl(ctrl);
                    // 7.创建坐标,通常是调取接口获得经纬度
                    const point = new T.LngLat(112.9388, 28.2280);
                    // 8.创建覆盖使用的图标
                    const icon = new T.Icon({
    					iconUrl:'../marker-red.png',
    					iconSize: new T.Point(27, 27),
    					iconAnchor: new T.Point(10, 25)
    				});
                    // 9. 创建在该坐标上的一个图像标注实例
                    const marker = new T.Marker(point, icon);
                    // 10.将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
                    this.map.addOverLay(marker);
    			},
            }
        }   
    <script>        
                

    四、效果展示:

     

    更多相关内容
  • vue,leaflet,geoserver,wms,geoJson

    1.安装leaflet和superMap

    superMap提供了leaflet和天地图结合的方法(superMap 官网:https://leafletjs.com/reference.htmliClient for Leaflet 开发指南)(leaflet 官网:Documentation - Leaflet - a JavaScript library for interactive maps;中文文档:Plugins - Leaflet - 一个交互式地图 JavaScript 库)项目中引入插件

    创建地图,引入天地图图层

        let map = L.map(mapId, {
              crs: L.CRS.EPSG4326,
              center: [29, 119],
              maxZoom: 17,
              minZoom: 7,
              zoom: 10,//当前层级
              zoomControl: false,
              attributionControl: false,
              preferCanvas: true,
              doubleClickZoom: false,
            })
          //添加窗格,把wms图层添加到此窗格中,这里自定义了窗格,wms默认窗格是tilePane,geoJson图层默认窗格是overlayPane,我这里因为要把wms覆盖在geoJson上面,所以就自定义了窗格和层级
           map.createPane("maxLevelPane");
           map.getPane("maxLevelPane").style.zIndex = 660;
           //添加天地图影像图层和标注图层,这里使用了supermap的方法
           var wMap = L.supermap.tiandituTileLayer({
              layerType: "img",
              key: "天地图key",
            })
            var lMap = L.supermap.tiandituTileLayer({
              layerType: "img",
              isLabel: true,
              key: "天地图key",
            })
            //添加影像图层
            map.addLayer(wMap);
            //添加标签图层
            map.addLayer(lMap);

    2.geoJson图层添加

    geoJson格式的数据可以是后台返回,也可以到geoserver中获取(如果geoserver中有的话),

    后台返回:

    let data = {"type":"MultiPolygon","coordinates":[[[[119.766132807747,29.2003390625065],[119.766281787158,29.2003833031418],[119.766350165137,29.2001859643868],[119.766445181959,29.2000318171805],[119.766473397007,29.2000018232861],[119.766143344738,29.2002428663719],[119.766132807747,29.2003390625065]]]]}
    //图层样式
    var regionStyle = {
            color: "#89cfda",
            weight: 5,
            opacity: 1,
            fillColor: "",
            fillOpacity: 0,
          };
          var list = [];
          let that = this;
          var modal = {
            type: "Feature",
            geometry_name: "geom",
            geometry: data,
          };
          list.push(modal);
          //把后台返回数据处理成可以在地图上展示geojson格式
          var geoJson = {
            type: "FeatureCollection",
            features: list,
          };
          var geo_l = L.geoJson(geoJson, {
            style: regionStyle,//设置样式
          }).addTo(map);//添加到地图

    geoserver中获取:

    需要使用的方法:geoserver/工作区/ows

    //图层样式
    var regionStyle = {
              color: "#89cfda",
              weight: 5,
              opacity: 1,
              fillColor: "",
              fillOpacity: 0,
            };
    //请求接口的参数     
     var param = {
              service: "WFS",
              version: "1.0.0",
              request: "GetFeature",
              typeName: "图层名称",
              maxFeatures: 10000,//我这里设置了一个很大的值,默认返回50条数据
              outputFormat: "application/json",
              CQL_FILTER: "筛选条件",
            };
    //调用获取方法就可以拿到geoJson数据,格式不用转换,可以直接使用
    
       var data;//返回数据,我这里就不具体写了
    var geo_l = L.geoJson(data, {
              style: regionStyle,
            }).addTo(map);

    3.wms图层添加

    //添加图层组到地图,把wms图层全部放入图层组中,这样可以调整wms图层的层级
    let layerGroups = new L.LayerGroup();
    layerGroups.addTo(map);
    let wmsLayer = L.tileLayer.wms(`/geoserver/工作区/wms`, {
          'format': 'image/png',
          'VERSION': '1.1.1',
          "layers": '图层名称',
          "exceptions": 'application/vnd.ogc.se_inimage',
          'transparent': true,
          'maxZoom': 21,//最大级别
        })
    wmsLayer.setParams({
              styles: "样式名称"//在geoserver中设置,样式设置时,添加了工作区只能在对应的工作区使用,不添加工作区,可以通用
            });
            wmsLayer.setZIndex(100);//设置层级,数值越大,层级越高
            layerGroups.addLayer(wmsLayer);//添加图层到图层组
            layerGroups.removeLayer(wmsLayer);//把图层从图层组中移除

    4.wms图层点击

    因wms图层是图片,不像geoJson可以提供方法,所以wms的点击事件就需要单独处理,首先获取到当前鼠标点击地图的坐标,再根据坐标在geoserver对应的图层中查找包含该坐标的矢量图层,然后返回相应的数据,可以根据geoserver返回的数据进行下一步处理,具体实现:

    首先:在数据--图层中找到对应的图层,在数据选项中找到

     找到Edit sql view然后

     修改geom属性,我这里的坐标体系是4326的,你们可以根据自身情况设置

    var param = {
              service: "WFS",
              version: "1.0.0",
              request: "GetFeature",
              typeName: "图层名称",
              maxFeatures: 10,//要查询的数据是唯一的,可以设置该属性,也可以不设置,默认是50
              outputFormat: "application/json",
              CQL_FILTER: `CONTAINS(geom,SRID=4326;POINT(${longitude} ${latitude}))`,//筛选条件,根据自己的情况添加合适的筛选条件,longitude,latitude点击地图获取到的经纬度,中间要有空格
            };
    var data ; // 调用接口 geoserver/工作区/ows返回的数据
    //判断data.features.length ,即可得到点击点对应的图层数据
    

     图层展示就写到这里,如果有什么问题,可以一起探讨

    展开全文
  • 最近调用天地图服务,发现之前大家调用都是用XYZ方式,而切片方式调用比较少,这里记录下,以备后续所需。 1、注册天地图并查看天地图的WMTS服务。 首先登陆后,需要注册天地图账号(这里吐槽下,天地图账号只能用...

    最近调用天地图服务,发现之前大家调用都是用XYZ方式,而切片方式调用比较少,这里记录下,以备后续所需。

    1、注册天地图并查看天地图的WMTS服务。

    首先登陆后,需要注册天地图账号(这里吐槽下,天地图账号只能用邮箱注册,这样导致我邮箱不能用之后,天地图账号密码忘了无法找回密码,且账号绑定的手机号也不能解绑)。注册之后可以在控制台创建新应用,获得调用服务所需的key。

    然后在地图API>地图服务那里可以查看到地图服务列表。

    2、Vue+OpenLayers调用天地图WMTS服务获得底图。

    可以参照官网的例子学习相关的参数,https://openlayers.org/en/latest/examples/wmts.html

    在参照官网例子基础上,调整的代码如下。

    <template>
      <div id="map">
      </div>
    </template>
    
    <script>
    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import {defaults as defaultControls} from 'ol/control.js';
    import {getWidth, getTopLeft} from 'ol/extent.js';
    import TileLayer from 'ol/layer/Tile.js';
    import {get as getProjection} from 'ol/proj.js';
    import { fromLonLat } from "ol/proj";
    import WMTS from 'ol/source/WMTS.js';
    import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
    
      export default {  //调用天地图WMTS服务
        name: 'olTDT',
        data() {
          return {
            map: null
          };
        },
        mounted() {
          var projection = getProjection('EPSG:3857');
          var projectionExtent = projection.getExtent();
          var size = getWidth(projectionExtent) / 256;
          var resolutions = new Array(18);
          var matrixIds = new Array(18);
          for (var z = 1; z < 19; ++z) {
    	      // generate resolutions and matrixIds arrays for this WMTS
    	      resolutions[z] = size / Math.pow(2, z);
    	      matrixIds[z] = z;
          }
     
          var webKey = '申请的key';
     
          var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk='; //矢量底图
          var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk='; //矢量注记
     
          var wmtsUrl_3 = 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk='; //影像底图
          var wmtsUrl_4 = 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?tk='; //影像注记
     
          var wmtsUrl_5 = 'http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk='; //地形底图
          var wmtsUrl_6 = 'http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk='; //地形注记
     
          var wmtsUrl_7 = 'http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk='; //境界(省级以上)
          var wmtsUrl_8 = 'http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk='; //矢量英文注记
          var wmtsUrl_9 = 'http://t{0-7}.tianditu.gov.cn/eia_w/wmts?tk='; //影像英文注记
     
          var map1 = new Map({
    	      layers: [
    	        new TileLayer({
    		        opacity: 0.7,
    		        source: new WMTS({
    		          url: wmtsUrl_3 + webKey,
    		          layer: 'img',  //注意每个图层这里不同
    		          matrixSet: 'w',
    		          format: 'tiles',
    		          style: 'default',
    		          projection: projection,
    		          tileGrid: new WMTSTileGrid({
    			          origin: getTopLeft(projectionExtent),
    			          resolutions: resolutions,
    			          matrixIds: matrixIds
    		          }),	  
    		          wrapX: true
    		        })
    	        }),
    	        new TileLayer({
    	        	opacity: 0.7,
    		        source: new WMTS({
    		          url: wmtsUrl_4 + webKey,
    		          layer: 'cia',   //注意每个图层这里不同
    		          matrixSet: 'w',
    		          format: 'tiles',
    		          style: 'default',
    		          projection: projection,
    		          tileGrid: new WMTSTileGrid({
    		        	  origin: getTopLeft(projectionExtent),
    			          resolutions: resolutions,
    			          matrixIds: matrixIds
    		          }),	  
    		          wrapX: true
    		        })
    	        })
    	      ],
    	      target: 'map',
    	      view: new View({
    	        center: fromLonLat([113.38, 23.09]),  //惠州
    	        zoom: 5
    	      })
          });
        }
      };
    </script>
    
    <style>
      #map{
        height:800px;
        width: 1400px;
      }
    
    </style>
    

    注意:上述代码中source里面的“layer、matrixSet、format、style”这几个参数不能写错,否则结果出不来。比如矢量底图的layer是vec,而影像底图的layer是img,地形底图的layer是ter。这些参数是由WMTS的GetCapabilities接口返回的结果来决定的。

    可以参照:http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts&tk=申请的key

    3、最终运行的结果

    参考:https://blog.csdn.net/envon123/article/details/82706185

     

    展开全文
  • Cesium + Vue 加载天地图服务(二)

    千次阅读 2020-07-06 20:25:59
    加载天地图底图服务

    1. 注册天地图

    在这里插入图片描述更多服务访问:http://lbs.tianditu.gov.cn/server/MapService.html

    2. 确定服务类型

    http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密钥

    官网给出的调用地图瓦片的示例如上,注意:layer后面的一定要和服务类型对应起来!

    3. Cesium使用底图

    //矢量底图
     var Cesium = this.Cesium;
     var cesiumContainer = document.getElementById("cesiumContainer");
     var viewer = new Cesium.Viewer("cesiumContainer",{
     imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
         url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb",
         layer: "tdtBasicLayer",
         style: "default",
         format: "tiles",
         tileMatrixSetID: "GoogleMapsCompatible",
         show: true,
         maximumLevel: 18
         })
     });
    

    4. Cesium加载多个图层

    //中文地名注记
    viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ 
        url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=d6a72a78a43a2c17294b72ab26354cd6",
        layer: "tdtAnnoLayer",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: true
        }));
      }   
    }
    

    5. 示例展示

    在这里插入图片描述

    展开全文
  • Vue结合天地图(天地图API)Gis开发

    千次阅读 2021-04-29 17:50:23
    (此代码结合vue、element-...-- 天地图--> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=cf61f9715dd35f3e196599aeac85af07"></script> <!-- 轨迹回放:引入JS
  • arcgis api 加载天地图js

    2019-04-11 09:49:21
    arcgis api for js 加载天地图,封装的js文件,用的时候,直接引用,new一下即可。
  • vue调用天地图报跨域问题

    千次阅读 2019-09-20 16:46:52
    访问天地图加载不出底图,控制台报跨域 解决不了去问gis工程师 最后给出的答案是: arcgis有缓存,每次访问天地图都会把当前访问地址缓存到本地,一旦更换ip或者端口号就会报跨域 解决方案只需要清理缓存! ...
  • Openlayers支持的地图来源包括Google Maps、Yahoo、Map、微软Virtual Earth、天地图等,用户还可以用简单的图片地图作为背景,与其他的图层在Openlayers中进行叠加,在这一方面OpenLayers提供了非常多的选择。...
  • 前面学习了一些 Vue 的基本使用,接下来结合 Openlayers 进行 WebGIS 开发的相关内容学习! 使用 Vue CLI 3 创建项目: vue create vue-openlayers 安装 Openlayers 框架 npm i -S ol 创建组件:Map.vue &...
  • windows部署vue打包项目报错处理系统环境场景描述原理解析解决方案 系统环境 windows10、vue2.6、axios0.21.1、nginx-1.20.1 场景描述 在使用vue开发过程中因为前后端分离,后端服务器在另外的机器上,所以请求后台...
  • 加载上万标注点到地图上性能特别差,天地图提供的组件MarkerClusterer,CloudMarkerCollection无法满足需求。 解决: 使用geoserver发布WMS地图服务+空间搜索获取标注点的基础信息 流程: 1、构造基础数据的...
  • 调用天地图网页api

    2021-09-23 16:13:38
    vue调用天地图网页api lz百度用得好好的,都做完了,突然间说要换成天地图,时间还那么赶,就很无语,稍微记录一下吧,可能以后用得到。 1.引入js 注册账号,申请密钥(网页和web服务要分别申请),然后在vue项目的...
  • 记录天地图使用vue+node实现离线瓦片下载 思路解析 配置package.json直接复制即可 openleary中加载 思路解析 一、准备好webstorm,将以下内容复制进去 // An highlighted block var Bagpipe = require('bagpipe') ...
  • vue项目中使用天地图

    千次阅读 热门讨论 2020-03-25 14:20:27
    1.首先打开天地图注册账号 申请自己所用的key 网址:http://lbs.tianditu.gov.cn/home.html 2.创建自己的vue项目,这里就不说了 3.将 <script type="text/javascript" src=...
  • openLayers添加标点信息
  • 通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js加载天地图的wmts服务(epsg4326类型)。具体介绍见:http://blog.csdn.net/dahongdahong/article/details/49685653 补充: 对于新版本的leaflet不建议使用插件...
  • 通过官网的介绍,天地图默认是加载矢量图的,那么当我我们默认使用影像底图的时候只有影像底图,没有地名注记,开发文档没有明确说明如何添加,经过个人理解,可以通过下面的方法添加注记。 根据地图API定义图层...
  • leaflet地图容器大小改变时,使地图自适应新容器的方法 this.$nextTick(() => { this.$refs["gaode"].map.invalidateSize(true); }) 这里因为改变了地图容器的大小,dom结构随数据而发生了改变,所以把方法写...
  • vue代码如下: initTdtMap(){ this.zoom = 4; var line; var points = []; var lay; var lay2; var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&...
  • 大数据展示全国各省份信息,绘制地图,并在每个省份上叠加图表。 需要做的就是 1、绘制全国地图(不同省份根据数据的不同而颜色不同) 2、每个省份都需要单独叠加一个图表(饼图) 3、地图缩放、图表的大小跟随比例...
  • 高德地图添加瓦片图层

    千次阅读 2022-01-14 15:40:04
    高德地图添加瓦片图层
  • 1.如何在vue中使用ArcGIS API 在vue中想要让Webpack认识ArcGIS API需要安装esri-loader。 第一步:通过npm安装esri-loader 安装命令:npm install esri-loader -S 第二步:在需要使用ArcGIS API的页面进行引入 HTML...
  • 天地图结合leaflet

    2022-05-12 16:23:16
    一、直接使用用天地图 1、引入天地图的 jsBridge // index.html <head> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=xx"></script> </head> 2、...
  • Vue 使用百度地图GL

    千次阅读 2022-03-11 08:50:35
    项目开发笔记(转发请说明出处)public index文件引入百度地图Gl 里面的KEY为自己的百度key,在百度地图开发平台里注册获取 链接 地图个性化网址: 百度地图个性化...在 main.js 里 添加百度地图相关对象添加进vu
  • 因为公司内网不能访问天地图,所以在外网服务器上配置了ARCGIS API FOR JS跨域,根据跨域配置配置完毕之后。 前端给我报了一个403禁止访问,纠结了很久,才发现是用的天地图token是只有浏览器的权限。 解决方法:重新...
  • 天地图显示不全的问题

    千次阅读 2020-09-15 20:16:18
    问题背景:天地图关联的div默认状态是隐藏的时候 解决办法:在div显示的时候,使用show()的时候,添加map.checkResize();方法 $('#patrolDetail').show(100,function(){ map.checkResize(); })
  • vue使用地图

    2021-08-02 10:24:15
    一、达到的效果 展示地图,画出地块,输入框 二、展示地图 1、首先写一个空白区域 <div style="height: 600px;... //天地图 let xyzTileLayer = new AMap.TileLayer({ opacity: 1, zIndex: 4, })
  • vue+supermap超图实现点击地图添加

    千次阅读 2020-12-17 16:30:57
    点击地图加点并添加图标(已规划导航路线选取终点起点为例) 首先是点击获取坐标 getPosition(item) { this.point = item // item 接受两个字符串 'start', 'end' 用来区分起点和终点 const that = this that....
  • 作者:kk 文章目录一、主要使用接口二、步骤1.使用SuperMapImageryProvider加载rest地图服务2....//添加SuperMap iServer发布的地图服务 var filterLayer = new Cesium.SuperMapImageryProvider({ url : 'ht
  • leaflet1.3.1版本引用了leaflet-tilelayer-wmts.js做了修改可加载天地图WMTS影像(EPSG:4326)Demo

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 204
精华内容 81
关键字:

vue调用天地图地图服务接口 添加图层