精华内容
下载资源
问答
  • 源代码提供高德地图风场效果,下载解压后,本地启动静态服务,即可看风场特效;本demo地图地图是基于高德地图,同时支持百度地图、天地图等作为底图
  • 使用高德地图Web服务-路径规划,用ArcGIS api for JS将数据显示天地图底图上 用于两地之间的交通建议 Hbuild工程,jQuery,ArcGIS JS,天地图
  • 使用此插件可以在arcmap10.2中加载在线地图,先运行setup文件,在运行addin(双击即可)然后以管理员身份运行arcmap即可,若出现许可错误,重新获取许可即可
  • ArcGIS不能加载在线的高德、天地图、OSM和谷歌地图,安装该插件,将会在ArcMap中创建一个名为ChinaMap的工具条,加载该工具条以后,就可以在ArcMap中打开在线的高德地图天地图地图、OSM地图和谷歌地图啦。
  • 项目需要展示海外地点标注(且卫星图与标准矢量地图切换),但是高德地图显示海外地点数据,查了高德的海外LBS服务,是收费的,而且还处于试运行状态,遇到问题还得提工单,比较麻烦。 后来查了查资料,发现天地图...

    项目需要展示海外地点标注(且卫星图与标准矢量地图切换),但是高德地图不显示海外地点数据,查了高德的海外LBS服务,是收费的,而且还处于试运行状态,遇到问题还得提工单,比较麻烦。

    后来查了查资料,发现天地图可以满足需求,而且天地图提供给WMTS服务,高德有个TileLayer类可以直接调用WTMS服务。所以便采用使用高德进行点标注等功能,调用天地图的图层方案,完成项目。

    实现

    // 天地图的访问key
    const key = "yourkey";
    // 初始化layer
    this.staelliteLayers = [
      new AMap.TileLayer({
        // 天地图矢量地图
        getTileUrl: `http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
        zIndex: 1,
      }),
      new AMap.TileLayer({
        // 天地图矢量图标记
        getTileUrl: `http://t0.tianditu.gov.cn/DataServer?T=cia_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
        zIndex: 2,
      }),
    map.setLayers(this.staelliteLayers);
    

    注:按照天地图官网提供的服务地址,不知道怎么回事会报错,请求失败,最后还是在一边博客上看到了上面的地址写法,才成功。有时候碰到这种问题就很奇怪,无从下手,目前还是没有搞明白官方提供的请求地址应该怎么用,有小伙伴知道在评论里给俺涨涨姿势
    getTileUrl地址按上面的写法是完全可以的,大家需要注意T = cia_w这个参数,需要什么类型的图层,这个就传什么类型的图层参数,如下图竖框里标出来的,从里面选。
    在这里插入图片描述

    坐标系不一致导致描点偏移问题

    (1)天地图:CGCS2000,2000国家大地坐标系;我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。当前测量精度范围内,可以忽略这点差异。可以说两者相容至cm级水平,但若一点的坐标精度达不到cm水平,则不认为CGCS2000和WGS84的坐标是相容的。

    (2)百度地图:bd09II坐标。首先了解一下火星坐标,它是在国际标准坐标WGS-84上进行的一次加密,由于国内的电子地图都要至少使用火星坐标进行一次加密,百度直接就任性一些,直接自己又研究了一套加密算法,来了个二次加密,这就是我们所熟知的百度坐标(BD-09)。

    (3)高德地图:gcj02坐标,也称为火星坐标。火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地图、导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的。

    因为高德与天地图使用的坐标系是不一样的,所以在添加点标记之前,要把数据里的高德坐标系下的经纬度转换为天地图坐标系下的。

    this.projectsData.forEach((item) => {
      // 高德火星地图坐标系转为天地图坐标系
       let WGS = transformGCJ2WGS(item.latitude, item.longitude);
       item.position = [WGS.lon, WGS.lat];
       this.markers.push({
         position: item.position,
         name: item.name,
         label: this.getCurLabel(item.name),
         events: {
           click: () => {
             // this.openInfoWindow(e.target.Ce.position, item);
             this.openInfoWindow(item.position, item);
           },
         },
       });
     });
    

    具体的转换算法为:

    // utils/util.js
    var PI = 3.14159265358979324;
    /**
     * 高德火星地图坐标系转为天地图坐标系
     * @param {*} gcjLat 火星坐标经度
     * @param {*} gcjLon 火星坐标维度
     * @returns 
     */
    export function transformGCJ2WGS(gcjLat, gcjLon) {
        let d = delta(gcjLat, gcjLon)
        return {
          'lat': gcjLat - d.lat,
          'lon': gcjLon - d.lon
        }
      }
    
      function delta(lat, lon) {
        let a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
        let ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
        let dLat = transformLat(lon - 105.0, lat - 35.0)
        let dLon = transformLon(lon - 105.0, lat - 35.0)
        let radLat = lat / 180.0 * PI
        let magic = Math.sin(radLat)
        magic = 1 - ee * magic * magic
        let sqrtMagic = Math.sqrt(magic)
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI)
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI)
        return {
          'lat': dLat,
          'lon': dLon
        }
      }
      function transformLat(x, y) {
        let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0
        ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0
        return ret
      }
      function transformLon(x, y) {
        let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0
        ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0
        return ret
      }
    
    

    其它类型转换参考:常用的几种在线地图(天地图、百度地图、高德地图)坐标系之间的转换算法

    展开全文
  • 百度echart图表插件结合高德地图中所需要的amap文件。
  • 这对于0基础但是急需快速弄出个地图显示出来及其不友好!! 而且很多博客都是一样的,不知道那些直接去复制别人的博客过来的人是怎么想的,这么做有什么意义吗。 表示很无语,但是废话不多说,进入正题! 天地图部分...

    是得好好记录一下这个曲折的过程

    在这里插入图片描述

    看了n篇博客,没一个是代码复制过来能显示地图的。这对于0基础但是急需快速弄出个地图显示出来及其不友好!!

    而且很多博客都是一样的,不知道那些直接去复制别人的博客过来的人是怎么想的,这么做有什么意义吗。

    表示很无语,但是废话不多说,进入正题!

    天地图部分

    1、首先默认你会用vue了,然后去openlayers官网简单做个了解,知道基础用法。

    2、加载天地图得有一个key,先去天地图官网搞一个,具体步骤看我的另一篇文章,说到这个也是没有几篇博客写得很清楚的,就很。。。无助。

    3、在vue中安装openlayers

    npm i --save ol
    

    这里说的vue是基于脚手架构建的。 新建个页面,也就是vue文件,配置好路由。接着就是可以直接放入我的代码运行显示了。

    <template>
      <div class="wrapper">
        <div>天地图</div>
        <div class="map" id="olMap"></div>
      </div>
    </template>
    <script>
    import "ol/ol.css";
    import { Tile as TileLayer } from "ol/layer";
    import XYZ from "ol/source/XYZ";
    import { defaults as defaultControls } from "ol/control";
    import Map from "ol/Map.js";
    import View from "ol/View.js";
    
    export default {
      data() {
        return {
          map: null,
          parser: null,
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          const map = new Map({
            target: "olMap",
            view: new View({
              center: [0, 0], //中心点经纬度
              zoom: 4, //图层缩放大小
              projection: "EPSG:4326",
            }),
            controls: defaultControls({
              zoom: true,
              attribution: false,
              rotate: false,
            }),
          });
          this.map = map;
          // 添加地图
          let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
          url = `${url}&T=vec_c&tk=替代你的key`;
          const source = new XYZ({
            url: url,
            projection: "EPSG:4326",
          });
          const tdtLayer = new TileLayer({
            source: source,
          });
          this.map.addLayer(tdtLayer);
          // 添加注记
          url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
          url = `${url}&T=cva_c&tk=替代你的key`;
          const sourceCVA = new XYZ({
            url: url,
            projection: "EPSG:4326",
          });
          const tdtcvaLayer = new TileLayer({
            source: sourceCVA,
          });
          this.map.addLayer(tdtcvaLayer);
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
      width: 100%;
      height: 100vh;
    }
    </style>
    
    

    天地图就可以显示出来了。

    效果图

    在这里插入图片描述

    高德地图部分

    相对于天地图,高德地图就容易多了,直接上代码

    <template>
      <div class="wrapper">
        <div>高德地图</div>
        <div id="map"></div>
      </div>
    </template>
    
    <script>
    import {Map,View,Feature} from 'ol'
    
    import * as olProj from 'ol/proj'
    import {Point} from 'ol/geom'
    import { Style, Fill, Stroke, Circle as sCircle } from "ol/style";
    // 添加图层
    import Tilelayer from 'ol/layer/Tile'
    import {Vector as VectorLayer} from 'ol/layer'
    import {XYZ,Vector as VectorSource} from 'ol/source'
    //引入样式文件
    import "ol/ol.css"
    
    export default {
      
      data() {
        return {
          map:null
        }
      },
      mounted() {
       this.init();
       this.setMarker();
      },
      methods: {
        init(){
           this.map=new Map({
             target:'map',
             layers:[new Tilelayer({
               source: new XYZ({
                   url:'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
               })
             })
             ],
            view:new View({
                // 将西安作为地图中心 
                // olProj.fromLonLat方法将经纬度转换成对应的坐标
              center:olProj.fromLonLat([108.945951, 34.465262]),
              zoom:2
            }),
           })
        },
        setMarker(){
            let _style = new Style({
                image:new sCircle({
                    radius:10,
                    stroke:new Stroke({
                        color:"#fff",
                    }),
                    fill: new Fill({
                        color:'#3399CC',
                    }),
                }),
            });
            let _feature = new Feature({
                geometry:new Point(olProj.fromLonLat([108.945951, 34.465262])),
            });
            _feature.setStyle(_style);
            let _marker = new VectorLayer({
                source: new VectorSource({
                    feature:[_feature],
                }),
            });
            this.map.addLayer(_marker);
        },
      },
    }
    </script>
    <style scoped>
      #map{
          /* 屏幕宽高 */
        width: 100vw;
        height: 100vh;
      }
    </style>
    
    

    总而言之,全过程都是自己琢磨,太难受了,希望对于像我这样的小白能够有所帮助,如果真显示不出来有bug可以私聊相互学习学习QQ:2669743568

    在这里插入图片描述

    展开全文
  • 高德地图自定义图层

    2014-12-25 13:31:32
    高德地图自定义图层,能够实现用户点击后,提示文字
  • 国内 谷歌瓦片服务器 于2021年1月20号暂停服务 ...2.高德地图和谷歌中国地图——GCJ-02 天地图——CGCS2000 3.1坐标系研究 天地图上不同省份使用的坐标系可能不同,目前来看我经手过的浙江、四...

    国内 谷歌瓦片服务器 于2021年1月20号暂停服务

    地图坐标系介绍:

    用天地图替换谷歌        因为谷歌用的是wgs84坐标系(同高德-因为高德底层用的是谷歌的gps),之前获取谷歌 需要把wgs84转为gcj02坐标系,去捞取瓦片

    天地图属于国家控制的 卫星地图 坐标系类似wgs84 可以直接用wgs84

    1.百度地图——BD-09
    2.高德地图和谷歌中国地图——GCJ-02
    天地图——CGCS2000
    3.1坐标系研究
    天地图上不同省份使用的坐标系可能不同,目前来看我经手过的浙江、四川均为标准的国标2000坐标系。但是有些地方为当地坐标系,还需测绘局提供保密插件进行处理。

    国标2000坐标系与WGS84坐标系偏差不大,因为CGCS2000坐标系与WGS84坐标系的原点、尺度、定向及定向演变的定义都是相同的,参考椭球的参数略有不同而已。相同的坐标点,在CGCS2000与WGS84下,经度是相同的,只在纬度上存有0.11mm上下的区别,可以忽略掉。

    3.2 本地坐标系矢量数据叠加到天地图上
    a.将本地数转换为WGS84或者国标2000坐标系数据。

    b.叠加到天地图上。

    实际应用:

    1.导入高德api

    function mapInit() {
            var url = 'https://webapi.amap.com/maps?v=1.4.13&key=dbe************0d&callback=onLoad';
            var jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.src = url;
            document.head.appendChild(jsapi);
        }

    2.最重要的概念,map对象/地图容器    具体的容器配置参数:https://developer.amap.com/api/javascript-api/reference/map

    map = new AMap.Map('map-containtner', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            expandZoomRange:true,
            zoom:16,    //初始化地图层级 
            zooms:[4,20],
            center: mapCenter,//中心点坐标
            // layers:[roadNet],
        });
    

    3.常用的配置:

    map.setFeatures(['bg', 'point', 'building'])//设置地图上显示的元素种类,支持bg(地图背景)、point(兴趣点)、road(道路)、building(建筑物)
    map.clearInfoWindow()//清除地图上的信息窗体

    以控制 road显示为例:   看下面第二张图,路线图就没了

     

    4.创建天地图 对象

    // googleLayer = new AMap.TileLayer({
        //     getTileUrl:
        //         "http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile"
        // });
        tianditu_layer_wms = new AMap.TileLayer.WMTS({
            url: 'http://t0.tianditu.gov.cn/img_w/wmts',
            blend: true,
            tileSize: 256,
            params: {
                Layer: 'img',
                Version: '1.0.0',
                Format: 'tiles',
                TileMatrixSet: 'w',
                tk:天地图官网申请的key,
                STYLE:"default",
            }
        });

    5.setmap(map)    show()  hide()  控制显示渲染即可,再绑定一个事件,ok

    展开全文
  • 高德地图天地图、超图地形图 <script type="text/javascript" src="https://res1.pppeixun.com/cesium144/Cesium.js"></script> html, body, #map3d { width: 100%; height: 100%; margin: 0px; } ...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>高德地图、天地图、超图地形图</title>
        <script type="text/javascript" src="https://res1.pppeixun.com/cesium144/Cesium.js"></script>
        <link rel="stylesheet" href="https://res1.pppeixun.com/cesium144/Widgets/widgets.css" type="text/css" />
        <style type="text/css">
        html,
        body,
        #map3d {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
    
        </style>
    </head>
    
    <body>
        <div id="map3d">
        </div>
        <script type="text/javascript">
        var viewer = new Cesium.Viewer('map3d', {
            baseLayerPicker: false,
            geocoder: false,
            homeButton: false,
            timeline: false,
            navigationHelpButton: false,
            animation: false,
            sceneModePicker: false,
            selectionIndicator: false 
        });
    
    viewer.imageryLayers.removeAll();
    
      
    var tianditu01 = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
        url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}',
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        minimumLevel: 1, 
        maximumLevel: 20,
        credit: 'http://www.bjxbsj.cn',
    }), {
        show: true
    });
    //viewer.imageryLayers.add(tianditu01);
    
    var gaode = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
        url: 'http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        minimumLevel: 1, 
        maximumLevel: 20,
        credit: 'http://www.bjxbsj.cn',
    }), {
        show: true
    });
    
    viewer.imageryLayers.add(gaode);
    
    var terrainLayer = new Cesium.CesiumTerrainProvider({
    url: "https://www.supermapol.com/iserver/services/3D-stk_terrain/rest/realspace/datas/info/data/path/"
    });
    //viewer.terrainProvider = terrainLayer;
    
      
    //viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
    
    //viewer.cesium3DTilesInspector.viewModel.picking = false;
       
       
       </script>
    </body>
    
    </html>

    展开全文
  • 高德地图加载谷歌地图瓦片

    千次阅读 热门讨论 2019-08-17 17:11:01
    外业实验采集数据,需要用到无人机,遂利用高德地图SDK和DJI Mobile SDK开发了一款无人机航线规划软件。然而当地比较偏僻,高德卫星地图缩放等级约为16,无法满足作业需求。调查了其他地图,如腾讯地图、百度地图、...
  • 项目里原本用到高德地图的卫星图,但是放大到最小时,有些区域会显示“该区域没有卫星图”,这肯定不行,客户那里也说不过去,最后发现天地图的卫星图是可以的,但是整个项目已经写完了,用到地图的地方也多,换地图...
  • 这篇文章主要介绍了关于高德地图WEB版基础控件的展示,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近学习了一下高德地图web版的使用,总结了一下高德基础控件的应用,高德地图是开源可编辑的,...
  • 核心提示:高德地图新推出的足迹地图功能可是相当受欢迎,让你可以在移动端浏览自己曾驻足过的城市高德地图新推出的足迹地图功能可是相当受欢迎,让你可以在移动端浏览自己曾驻足过的城市,看这一路走来经过的风景,...
  • [ 地图之家总目录(订阅之前建议先查看该博客)](https://blog.csdn.net/QQ98281642/articl 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: 下面献上完整代码,代码重要位置...
  • 在网上一搜发现了高德地图开放平台,发现原来高德可以很简单的就应用到自己的项目里面,当即我就申请了一个key来学一学,仔细研究了一下,感觉还挺难的,网上找了找案例什么的,经过这几,小编把高德的一些基础...
  • 高德地图作为一个非常高人气的地图软件,最新推出了一个足迹地图的功能,相当的受欢迎,让用户可以在移动端浏览自己曾驻足过的城市,看这一路走来经过的风景,当你点亮的城市布满整个地图,那成就感绝对满满,下面就...
  • angular使用高德地图

    2021-08-27 11:54:04
    开发环境 Angular CLI: 8.3.29 Node: 10.17.0 OS: win32 x64 Angular: 8.2.14 ...安装高德地图的开发依赖 开发文档链接 根据文档,里面有多种安装依赖的方式,我这边采用npm 安装 npm i @amap/amap-jsapi-loader
  • 近日,高德正式发布高德地图车机版(AMAP AUTO)4.0。自2016年初高德地图车机版(AMAP AUTO)首次亮相后,此次正式推出的4.0版本,已经是该智能车载导航产品的第三次大升级。在车云看来,高德地图车机版4.0的升级...
  • 这个问题困惑了好几,...问题:as采用高德地图api,显示地图为白屏 解决方法:可能是so库的添加有问题,as并不是简单的复制到libs目录下就ok的,在app/build.grade下加上如下代码就ok了 android{ sourceSets {
  • 暑假第二十一,今天天气有点小热,长时间对...嘿嘿,废话不多说了看看今天都学的什么,今天主要学习的是实现高德地图的图层覆盖方法和相机照相的功能的实现过程1.首先看一下布局mapview.xmlxmlns:autonavi="http:/...
  • /**地图显示的缩放级别, 若center与level未赋值, 地图初始化默认显示用户所在城市范围 3D地图下, zoom值, 可以设置为浮点数。(在V1.3.0版本level参数调整为zoom, 3D地图修改自V1.4.0开始生效)**/ zoom?: number; /*...
  • 高德地图新推出的足迹地图功能可是相当受欢迎,让你可以在移动端浏览自己曾驻足过的城市,看这一路走来经过的风景,当你点亮的城市布满整个地图,那成就感绝对满满,下面就跟小编了解下具体规则吧。点亮条件:1、在...
  • (一)加载天地图(加载天地图影像地图,WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口,天地图是典型的WMTS服务的原型) //初始化viewer控件 var viewer = new Cesium.Viewer('cesiumContainer',...
  • 好了,言归正传,作为一名刚接触WebGIS开发的小白,在构建应用的时候首先想到的是拿到一幅符合系统需求的底图,然后在上面叠加自己的矢量图层,这样只需要维护好我们自己的专题数据就好了,今天就以高德地图为例,讲...
  • 在现在的APP中地图真的很常见,我们在去使用是一般都会选择一些三方的API,像百度、高德等等。。。在集成的过程中,难免会遇到一些问题,大部分问题我们仔细的阅读开发文档都能解决的;但是!!!问题出现后就没心情...
  • 高德地图marker屏蔽Label

    千次阅读 2020-11-25 13:40:03
    g_marker[SetIndex].setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label offset: new AMap.Pixel(20, -25),//修改label相对于maker的位置 content: "标签名称", direction: 'right' ...
  • Android实现高德地图轨迹回放

    千次阅读 多人点赞 2020-10-30 14:13:53
    Android实现高德地图轨迹回放写在前面准备官方文档解读创建应用:地图api引入:权限添加效果展示过程实现写在结尾 写在前面 本篇文章是对近期工作项目中集成高德地图轨迹回放和单/多点标记功能的一个总结。 欢迎...
  • 利用目标区域点的集合与外围自定义区域形成一个环形遮罩层,高亮显示所选行政区划,遮盖非目标区域。
  • 啰嗦几句去年写了一个功能简单的高德地图插件给flutter_deer使用,当时支持了Android与iOS两端。前一阵子有一个issue问是否会支持Flutter Web,当时我有点懵,毕竟js我都不熟。。。不过先记下这个需求,等着有时间了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,396
精华内容 958
关键字:

高德地图显示天地图

友情链接: Seq.rar