精华内容
下载资源
问答
  • 基于vue使用arcgis加载地图
    2022-03-09 11:07:01

    cv就能运行了,加载有些慢有时候一时半会没显示出地图或者注记也不要着急。
    token申请的是服务端的
    1、先安装插件:esri-loader

    2、代码

    <template>
      <div>
        <div>使用Arcgis JS API加载天地图</div>
        <div id="viewBox" class="viewBox"></div>
      </div>
    </template>
    
    <script>
    import { loadModules } from "esri-loader";
    export default {
      data() {
        return {};
      },
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          const option = {
            //定义一个包含有JS API中js开发包和css样式文件的对象
            url: "https://js.arcgis.com/4.20/",
            css: "https://js.arcgis.com/4.20/esri/themes/light/main.css",
          };
          loadModules(
            [
              "esri/Map",
              "esri/views/MapView",
              "esri/layers/WebTileLayer"
              
            ],
            option
          ).then(([Map, MapView, WebTileLayer) => {
           const map = new Map();        
            const view = new MapView({
              //实例化地图视图
              container: "viewBox",
              map: map,
              zoom: 8,
              center: [121.607331, 31.1879],          
            });
    
            const veccLayer = new WebTileLayer({
              urlTemplate:
                "https://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=5d4236a2a06043cd0b0880bbf270c958",
              subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],         
            });
            const cvacLayer = new WebTileLayer({
              urlTemplate:
                "https://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=5d4236a2a06043cd0b0880bbf270c958",
              subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],         
            });
            map.add(veccLayer);
            map.add(cvacLayer);
          });
        },
      },
    };
    </script>
    
    <style scoped>
    .viewBox {
      width: 100%;
      height: 600px;
    }
    </style>
    
    更多相关内容
  • 主要介绍了vue异步加载高德地图的实现,详细的介绍了异步加载的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • openlayers加载各种地图

    文章目录


    一、天地图

          // 天地图影像
          let map_img = new TileLayer({
            source: new XYZ({
              url: "https://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk="+token,
            }),
          });
          // 天地图影像文字注记
          let map_cta1 = new TileLayer({
            source: new XYZ({
              url: "http://t4.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk="+token,
            }),
          });
          // 天地图矢量
          let map_vec = new TileLayer({
            source: new XYZ({
              url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk="+token,
            }),
          });
          // 天地图矢量文字注记
          let map_cta1 = new TileLayer({
            source: new XYZ({
              url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk="+token,
            }),
          });
    
    展开全文
  • 基于vue3,使用arcgis for javascript 4.17 加载地图,已经上线使用。在使用是可以直接天地图官网更换需要得地图服务http://lbs.tianditu.gov.cn/data/dataapi.html
  • 1. 创建 Vue 项目 我们利用 Vue-CLI 工具进行快捷创建 下载 Vue-CLI 工具 yarn add global @vue/cli # or: npm i @vue/cli -g 创建 Vue 项目 根据自己项目需求进行配置,这里不过多的赘述。 vue create example # ...
  • vue加载地图

    2022-03-04 11:15:59
    vue+arcgis api两种环境下加载地图(1.esri-loader、2.@arcgis/core)_我有柚子茶噢的博客-CSDN博客 相比较于arcgis api openlayer加载地图就很简单了,因为底层的切片方案是一致的 <template> <...

    vue+arcgis api两种环境下加载天地图(1.esri-loader、2.@arcgis/core)_我有柚子茶噢的博客-CSDN博客

    相比较于arcgis api openlayer加载天地图就很简单了,因为底层的切片方案是一致的

     

    <template>
      <div id="map"></div>
    </template>
    
    <script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import TileLayer from "ol/layer/Tile";
    import XYZ from "ol/source/XYZ";
    export default {
      mounted() {
        let layer = new TileLayer({
          source: new XYZ({
            url:
              "http://t4.tianditu.com/DataServer?T=vec_w&tk=4a76fd399e76e3e984e82953755c3410&x={x}&y={y}&l={z}",
          }),
        });
        let map = new Map({
          target: "map",
          view: new View({
            projection: "EPSG:4326",
            center: [114, 29],
            zoom: 5,
          }),
          layers: [layer],
        });
      },
    };
    </script>
    
    <style>
    html,body{
      height: 100%;
    }
    #map{
      height: 100%;
    }
    </style>

    这边还收集整理了其他天地图底图资源,并将其模块化成 Load_tianditu.js

    import { XYZ } from 'ol/source';
    
    export function tianditu(map) {
        // T=vec_c表示请求的是路网数据,x 表示切片的 x 轴坐标,y 表示切片的y轴坐标,z表示切片所在的缩放级别。
        // 使用 ol.source.XYZ 加载切片,并将获取的数据初始化一个切片图层 ol.layer.Tile:
        //天地图底图
        var source = new XYZ({
            url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=申请的天地图key&x={x}&y={y}&l={z}"
        });
        var tileLayer = new TileLayer({
            id: "tileLayer",
            title: "天地图",
            layerName: "baseMap",
            source: source
        });
        //标注图层
        var sourceMark = new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=cva_w&tk=申请的天地图key&x={x}&y={y}&l={z}'
        });
        var tileMark = new TileLayer({
            id: "tileMark",
            title: "标注图层",
            layerName: "baseMap",
            source: sourceMark,
    
        });
        //卫星图像
        var sourceSatellite = new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=img_w&tk=申请的天地图key&x={x}&y={y}&l={z}'
        });
        var tileSatellite = new TileLayer({
            id: "tileSatellite",
            title: "卫星图",
            layerName: "baseMap",
            source: sourceSatellite
    
        });
        //天地图地形地图
        var map_ter = new TileLayer({
            id: "map_ter",
            title: "天地图地形",
            layerName: "baseMap",
            source: new XYZ({
                url: "http://t4.tianditu.com/DataServer?T=ter_w&tk=申请的天地图key&x={x}&y={y}&l={z}"
            })
        })
        var map_cta = new TileLayer({
            id: "map_cta",
            title: "天地图标注",
            layerName: "baseMap",
            source: new XYZ({
                url: "http://t4.tianditu.com/DataServer?T=cva_w&tk=申请的天地图key&x={x}&y={y}&l={z}"
            })
        });
    
        return {
            "tileLayer": tileLayer,
            "tileMark": tileMark,
            "tileSatellite": tileSatellite,
            "map_ter": map_ter,
            "map_cta": map_cta
        };
    }
    

    展开全文
  • app.vue 代码 <template> <div id="SceneView"></div> </template> <script> import { loadModules } from "esri-loader"; export default { name: "SceneView", methods: { ...

     app.vue 代码 

    <template>
      <div id="SceneView"></div>
    </template>
    
    <script>
    import { loadModules } from "esri-loader";
    export default {
      name: "SceneView",
    
      methods: {
        _createSceneView: function() {
          let options = {
            url: "https://js.arcgis.com/4.21/",
            css: "https://js.arcgis.com/4.21/esri/themes/light/main.css",
          };
          loadModules(["esri/Map", "esri/views/SceneView"], options).then(
            ([Map, SceneView]) => {
              let map = new Map({
                basemap: "streets",
                ground: "world-elevation",
              });
              let view = new SceneView({
                container: "SceneView",
                map: map,
              });
              console.log(view);
            }
          );
        },
      },
      mounted() {
        this._createSceneView();
      },
    };
    </script>
    
    <style>
    #SceneView {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    </style>
    

    安装 esri-loader指令

    npm install esri-loader

     效果图

     

     

    展开全文
  • 1.基于Vue2 的Cesium三维地图框架; 2.已引入elementui组件 已完成对cesium的加载配置安装及测试; 3.可在该框架上开发、发布打包等; 4.该框架没有其它冗余依赖等,可以直接到项目使用,无版权控制。
  • 1:资源准备 1.1百度离线文件 ...2:构建vue的空项目 此步直接略过,不会的自行解决 3:在vue2.x中使用 3.1 把下载的1.1中的百度离线文件解压到 public/static下,static文件夹自己新建一个 3.2 在inde
  • Vue2创建项目并配置Cesium加载三维地图 cesium 安装配置 npm run dev 运行错误处理
  • VUE 离线地图的下载与使用,下载瓦片离线使用
  • vue项目中使用天地图

    2021-01-08 13:47:37
    2.创建自己的vue项目,这里就不说了 3.将 引入到你项目中的index.html文件中 4.创建map.vue文件 <!-- 点击画多边形 --> export default { data(){ return{ } }, created(){ }, mounted(){ ...
  • 记录Vue异步加载百度地图

    万次阅读 2018-11-05 15:16:38
    网上搜了不少资料都是index.html直接加script,个人是不喜欢这种方式,毕竟有时候只有一个页面需要到百度地图,没必要全局都加载百度地图的文件 单独新建一个js文件:loadBMap.js,名字随意取,位置可以随便放 ...
  • 本文实例讲述了Vue加载json文件的方法。分享给大家供大家参考,具体如下: 一、在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json'); // ...
  • vue-cli 版本:4.5.13 ArcGIS API for JavaScript 文档(4.20版本): ArcGIS API for JavaScript 主要还是跟着文档走 正文 有多种方式来将ArcGIS API for JavaScript引入自己的应用程序中,我是通过ES模块来构建的...
  • 地图打点
  • 本篇文章主要介绍了vue基于Vue2.0和高德地图地图组件实例,非常具有实用价值,需要的朋友可以参考下
  • 一、在Vue项目中引入三维地图 1.安装对应的包 //安装mars3d主库 npm install mars3d --save //安装mars3d插件(按需安装) npm install mars3d-space --save 2.为了方便使用,绑定到原型链,在其他vue文件,直接 ...
  • echarts全国地图VUE

    2020-12-28 15:26:24
    vue地图,echarts动态加载JS文件,支持下钻省市县和返回,依赖资源在我的资源里均可下载
  • 一、在Vue项目中引入二维地图 1.切换到公司的仓库下载地图插件 npm config set registry http://nexus.toops.club/repository/npm-zui/ npm i tongmap-gl 2.在页面上加载二维地图 <template> <div style...
  • vue项目打包上线后,首次打开会发现加载很慢,出现白屏的问题, 一、问题原因 打开控制台查看文件加载情况,会发现app.js/vendor.js这两个文件加载时间较长 二、解决办法 1、图片压缩 使用webpack打包文件时,可以...
  • vue电子地图围栏

    2019-03-01 16:43:08
    vue电子地图围栏,只包含前端代码,后台需要根据自己需要连接起来
  • 问题:按照引入单个地图文件去画地图也是可以的,但是打包后的体积比较大,页面加载很慢。所以只能寻求其他方法 1.究其原因页面加载慢,主要是地图文件载入比较慢,实际用到的地图可能就2.3个,所以,这边单独在...
  • 直接npm install , npm run serve 就可以启动了
  • vue地图显示缓慢问题

    千次阅读 2020-07-30 10:04:27
    vue地图显示缓慢问题 最近写代码,又掉进了css运用不熟练的坑里。 我的需求是,针对tabs不同的标签页,点击某个tab页时才将隐藏的元素显示出来。 一开始先去element-UI官网中查询了,tabs的事件用法。 我把官网...
  • vue调用百度地图api

    2019-08-10 02:35:12
    vue调用百度地图api
  • vue项目引入高德地图

    2018-06-19 11:19:31
    vue项目中,添加高德地图。对开发地图的开发人员有一定帮助
  • vue高德地图异步加载

    2020-11-21 10:11:30
    /**map.js*/ export function MapLoader() { const mp = new Promise(function (resolve, reject) { ... if (hasLoaded1) { // 只加载一次 return } window.init = function () { resolve(window.AMa
  • Cesium + Vue 加载地图服务(二)

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,414
精华内容 2,965
关键字:

vue加载地图