精华内容
下载资源
问答
  • 对于简单场景而言,体验应该还好,但对于一些状态多,变化频繁的复杂场景而言,不仅要时刻维护本地数据状态和地图状态同步,还要查找设置各种状态的地图API,实在是让人头疼的事情。 设计vue-amap的初衷,也就是为了...
  • 最近用Vue开发一个h5页面,网络图片可以正确显示,但是本地图片无法显示 源代码 <img src="../../assets/image/home.png" alt=""/> 找了很多种方法均不行 比如 <img src="~@/static/Trump.jpg" class=...

    最近用Vue开发一个h5页面,网络图片可以正确显示,但是本地图片无法显示
    源代码

    <img src="../../assets/image/home.png" alt=""/>
    

    显示不了
    找了很多种方法均不行
    比如

    <img src="~@/static/Trump.jpg" class="image">
    


    src写imgurl用动态获取的方式,src=require("xxx")

    后来发现直接引入可以
    在script中

    import homeImg from '../../assets/image/home.png'
    export default {
      data: {
        imgObj: {homeImg},
      }
      // xxx
    }
    

    然后在html中

    <img :src="imgObj.homeImg" alt=""/>
    

    可以显示了
    图片可以显示了,完美,😆

    展开全文
  • 基于VUE的Cesium加载本地地图跨域问题解决方案

    千次阅读 热门讨论 2019-12-06 14:38:40
    Cesium加载本地地图是报跨域错误 var viewer = new Cesium.Viewer('cesiumContainer', { animation: false,// 是否显示动画控件 imageryProvider:new Cesium.UrlTemplateImageryProvider({ url : '...

    Cesium加载本地地图是报跨域错误

    var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,// 是否显示动画控件
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url : 'http://127.0.0.1:3000/satellite/z={z}&x={x}&y={y}',              
        }),
        baseLayerPicker:false,// 去掉自带的图层选择器
    });

    解决方案

    修改config\index.js 配置proxyTable

    //接口地址原本是/satellite/z={z}&x={x}&y={y} 但是为了匹配代理地址 调用时需在前面加一个 /satellite,  因此接口地址需要写成这样的即可生效 /satellite/satellite/z={z}&x={x}&y={y}
    proxyTable: {
      '/satellite': {//代理的目的:只要是/satellite开头的路径都往localhost:3000进行转发  
        target: 'http://localhost:3000', //后端接口地址 设置代理服务器地址 转发地址
        ws:true,//WebSocket协议
        changeOrigin: true, //表示是否改变原域名;这个一定要选择为true; 是否允许跨域[ 如果接口跨域 则要配置这个参数]
        // secure: false, // 如果是https接口 需要配置这个参数
        pathRewrite: {// 把程序中的地址转换成“真实地址”+‘/satellite’后面的部分如‘/satellite/satellite/z={z}&x={x}&y={y}',被转换成'http://localhost:3000/satellite/z={z}&x={x}&y={y}'
            '^/satellite': ''//修改pathRewrite地址 将前缀'^satellite'转为'/satellite'
        } 
      },
      '/api': {
        target: 'http://192.168.2.190:8060', 
        ws:true,
        changeOrigin: true, 
        // secure: false, // 如果是https接口 需要配置这个参数
        pathRewrite: {
            '^/api': ''
        } 
      }
    },

    调用本地地图

    src\views\Home.vue

    var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url : 'satellite/satellite/z={z}&x={x}&y={y}',  
        }),
        baseLayerPicker:false,
    });

    cesium+Vue项目环境搭建

    展开全文
  • 如果使用本地图片,可以用 require("../../icons/map/camera.png") ,否则不显示图片, 网络图片则没有此问题。

    如果使用本地图片,可以用 require("../../icons/map/camera.png") ,否则不显示图片,

    网络图片则没有此问题。

    展开全文
  • 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地图可视化 Cesium篇

    千次阅读 2019-03-08 08:34:00
    最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程。官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一...一、vue 工程创建,使用 vue-cli vue init webpack cesium-demo 复制代...
  • vue使用地图api

    2021-02-09 16:46:58
    vue使用地图api百度地图api方式一方式二解析文档高德地图api 百度地图api 方式一 注册账号密码,拿到ak 将html的demo改造成vue格式 BMapGL of undefined报错:vue中需要用window.xxx来处理 var map = new BMapGL....
  • Vue动态渲染本地图片

    2021-01-14 15:58:56
    今天总结一下Vue动态渲染本地图片的一些问题~ 如果你直接使用本地图片地址,像下面这样 <div> <img src="../../images/icon_01.png"> </div> 这是可以正常显示图片的, 但是如果你想遍历...
  • vue 展示本地图片三种方法

    千次阅读 2020-08-07 15:35:00
    第一种:直接写 两个都可以 如果@配置了的话 <img src="../assets/img/mapchange/map1.png" alt=""> <img src="@/assets/img/mapchange/map1.png" alt=""> 第二种:import 然后在data内定义后 src绑定 ...
  • 里面代码可能有的地方会有不妥之处,后面会改进的一、接入腾讯地图首先在马上开始接入 - 入门指南 | 腾讯位置服务​lbs.qq.com,这里面申请一个key效果图如下1、在vue里面的index.html中引用地图<2、在vue页面中...
  • vue引入百度地图

    2021-02-26 16:48:05
    vue引入百度地图 功能点: 1.挂载百度地图 2.封装逆地址解析函数(根据坐标点获取详细地址) 3.设置图像标注并绑定拖拽标注结束后事件 4.添加(右上角)平移缩放控件 5.添加(左下角)定位控件 6.浏览器定位(定位...
  • 存放在项目的public文件目录下即可
  • 本地调试 this.$axios.get(... {}) 这是请求四川的json地图文件,这个使用echarts中取 的四川数据,本地直接 就是8080直接调试就行 上线怎么搞 this.$axios.get(this.jsonUrl+'...
  • vue--百度地图之离线地图

    千次阅读 热门讨论 2020-08-03 15:56:16
    其实理解了离线百度地图,它的使用很简单,就是把在线百度地图的一些js文件下载到本地,再引用一下就可以啦 1、获取百度地图api的js代码 访问此链接 打开会看到以下内容 在代码中找到红框中的内容 src=...
  • - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试...
  • vue + vue-cli3 + 高德地图 一、AMap.js 项目里的引用文件,css,js链接,都以下列方式引入,重点注意插件的引用 代码如下(示例): // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key...
  • Vue+Cesium从入门到放弃2:Cssium加载各种地图前言Cesium加载google earth地图Cesium加载天地图Cesium加载高德地图Cesium加载自己的地图服务TMSWMSWMTSWFSCesium加载本地图片
  • 最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来。控制台显示src是有获取到图片地址的,可是就是加载不出来。 最后才发现原因原来是浏览器中直接显示’./img/img1.png’,也就是没有经过编译的步骤,...
  • 想了很久很久,最终是大佬给我点醒的,通过本地存储来实现这个效果 localStorage.setItem('positionMap',this.projectInput.position) 'positionMap’表示的是一个自己给数据取的名字,逗号后面这个就是我需要传递...
  • vue集成百度离线地图

    千次阅读 2020-05-29 16:18:46
    项目里集成了百度地图的一些功能,因客户方是内网项目,瓦片需要部署在本地,因此记录下在本地集成百度地图的需求的解决方法~~ 1、下载npm地图包 npm i vue-baidu-map --S 2、配置webpack。例如vue-cli2,在webpack...
  • vue实现世界疫情地图(点击进入子地图)

    万次阅读 多人点赞 2020-11-24 11:25:56
    vue实现世界疫情地图,点击可以进入子地图效果展示寻找数据源设置代理发送请求提取数据提取数据踩坑处理数据并绘图国内疫情地图数据处理绘制海外疫情地图数据处理绘制完整代码代码优化 点击进入子地图目前只实现了...
  • vue echarts全国地图和区域地图 map

    千次阅读 2020-08-18 17:42:41
    vue echart map 全国和地区数据 链接: 阿里云获取省市区边界数据链接. 效果图如下(可通过省市区code改变echarts地图 当前为武汉市的地图): 1.引入echarts 这一步就不说了 百度很多 <template> <div id=...
  • vue 使用高德地图插件 vue-amap

    千次阅读 2020-03-28 22:31:37
    vue 使用高德地图 vue-amap账号注册高德地图插件安装页面引入与组件配置创建全局组件AMapmain.js页面引入vue-amap以及globalComponents.js配置AMap为全局组件AMap页面实现插入链接与图片如何插入一段漂亮的代码片...
  • vue+离线百度地图

    千次阅读 2019-12-12 17:22:33
    首先,使用离线百度地图首先需要准备好瓦片图,由于资源内容较大不适合直接放在项目中,因此使用nginx代理 server { listen 80; server_name 127.0.0.1;... //配置本地百度地图离线资源路径 ...
  • arcgis + vue 本地开发环境配置

    千次阅读 2018-04-28 18:23:15
    arcgis + vue 本地开发环境配置 1 首先用 vue-cli 生成项目结构并安装项目依赖,当然,这不是唯一的,同样也可以使用 iview-cli 来生成,再次不在赘述. 2 安装 arcgis 官方依赖 esri-loader,这个只是开发依赖,因此使用...
  • vue使用腾讯地图

    千次阅读 2018-12-05 06:40:00
    1 vue cli 3.x 使用腾讯地图 1. npm安装腾讯地图 腾讯官方并没有在npm上发布腾讯地图插件,所以找到一个别人写的,可以直接调用腾讯地图javascript方法 链接:https://www.npmjs.com/package/qqmap npm install ...
  • vue项目中leaflet的使用(我用的是直接cdn引入,也可以npm安装) <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet"> <script src="https://cdn.bo.
  • 项目使用vue-cli进行构建,vue和UI框架版本如下:"mint-ui": "^2.2.2","vue": "^2.2.2",之前我在scss文件中引入mint-ui的css,并没有报错:@import "reset";@import "color";@import "mixin";@import url('~mint-ui/...
  • 这个页面基于百度地图,功能是你输入起始点位置,然后给你规划一条路径并且在地图上可视化出来,当然完成这项工作都是站在百度的肩膀上,在你输入起始点后,需要通过百度地图接口——地理编码服务,正编码接口可以...

空空如也

空空如也

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

vue地图本地服务

vue 订阅