1、npm install esri-leaflet --save

2、引入包

import Leaflet from "leaflet";

var esri = require("esri-leaflet");
 

3、添加底图

esri.basemapLayer("Topographic").addTo(this.map);
4、添加动态服务
 
esri.dynamicMapLayer({
url:"https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer",
opacity: 0.7
})
.addTo(this.map);

【GIS】Vue esri-leaflet的更多相关文章

  1. 【GIS】Vue、Leaflet、highlightmarker、bouncemarker

    感谢: https://github.com/brandonxiang/leaflet.marker.highlight https://github.com/maximeh/leaflet.boun ...

  2. 【GIS】Vue修改图层透明度

    1.添加透明度控制条 <input id="slider" type="range" min="0" max="1" ...

  3. 【GIS】postgres(postgis) --》nodejs+express --》geojson --》leaflet

    一.基本架构 1.数据存储层:PostgreSQL-9.2.13 + postgis_2_0_pg92 2.业务处理层:Nodejs + Express + PG驱动 3.前端展示层:Leaflet ...

  4. 【1】vue/cli 3.0 脚手架 及cube-ui 安装

    安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...

  5. 【转】Vue.js:轻量高效的前端组件化方案

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  6. 【05】Vue 之 实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  7. 【可视化】Vue基础

    作者 | Jeskson 来源 | 达达前端小酒馆 Vue简介 Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点. 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完 ...

  8. Vue学习笔记【23】——Vue组件(组件的定义)

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  9. 【前端】Vue和Vux开发WebApp日志四、增加命令行参数

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html 项目github地址:https://github.com/shamoyuu/vue- ...

随机推荐

  1. sitemap xml文件生成

    sitemap xml生成方法 <?php /** * SitemapService.php. * * 生成sitemap */ class Sitemap { public $newLine ...

  2. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  3. 理解 .NET 2015

    去年跟着BUILD之后,我发了一篇文章Exciting Times for .NET 并从那以后我已经很荣幸地能够与.NET团队并肩作战,这其中包括了运行时.框架.语言和编译器.虽然去年我的重心已经更 ...

  4. 使用SpringBoot入门案例

    一.创建项目 二.给根项目UnicomCmp的pom.xml,加入parent节点(spring-boot-starter-parent) <!--Add Spring boot Parent- ...

  5. Linux 下Tomcat配置远程访问管理端

    1:修改Tomcat默认端口号,将默认的8080修改为8081 apache-tomcat-8.5.31\conf\server.xml <Connector port="8081&q ...

  6. Jmeter远程测试

    11.3 详解JMeter远程测试(1) 2012-04-09 09:14 温素剑 电子工业出版社 字号:T | T 综合评级: 想读(7)  在读(2)  已读(0)   品书斋鉴(0)   已有9 ...

  7. 前后分离模型之封装 Api 调用

    Ajax 和异步处理 调用 API 访问数据采用的 Ajax 方式,这是一个异步过程,异步过程最基本的处理方式是事件或回调,其实这两种处理方式实现原理差不多,都需要在调用异步过程的时候传入一个在异步过 ...

  8. Android 手动调用 返回键

    有人想通过下面代码来实现手动调用返回键,很可惜会出现空指针异常. this.onKeyDown(KeyEvent.KEYCODE_BACK, null); 我们可以通过调用 onBackPressed ...

  9. SqlServer 2008的tempdb数据文件大小暴增处理

    tempdb数据文件暴增,导致服务器磁盘空间被耗尽! 1.查看tempdb的使用分配情况 use tempdb go SELECT top 10 t1.session_id, t1.internal_ ...

  10. [svc]arp协议的细枝末节

    tcpdump抓取arp包 tcpdump -nn -i calif24874aae57 -e arp数据包格式 操作字段指出四种操作类型: arp请求 1 arp应答 2 rarp请求 3 rarp ...