现在矢量切片越来越普及,对于地图渲染能更轻更快。ArcGIS JS 4.13可以实现加载第三方矢量切片,以下为代码示例,最下方是我之前切的建筑物数据。

    当切片大小在1M左右,加载效果还是可以。不过跟mapbox gl相比还是有些逊色,mapbox gl可以加载6M大小的切片,但ArcGIS JS 4却不行。矢量切片还是需要控制好大小,这样才能快速传输和渲染。

var style = {
"version": 8,
"sources": {
"osm": {
"tiles": ["https://osm-lambda.tegola.io/v1/maps/osm/{z}/{x}/{y}.pbf"],
"type": "vector"
}
},
"layers": [
{
id: "land",
type: "fill",
source: "osm",
"source-layer": "land",
minzoom: 0,
maxzoom: 24,
paint: {
"fill-color": "rgba(150, 150, 150, 1)"
}
}
],
"id": "test"
} require([
"esri/Map",
"esri/views/MapView",
"esri/layers/VectorTileLayer",
"dojo/domReady!"
], function(Map, MapView, VectorTileLayer) {
var map = new Map();
var view = new MapView({
container: "map",
map: map,
center: [-98.5795, 39.8283],
zoom: 2,
});
var tileLyr = new VectorTileLayer({
style: style
});
map.add(tileLyr);
});



参考资料:

https://gis.stackexchange.com/questions/300398/is-it-possible-to-add-vector-tile-layer-published-by-geoserver-layer-using-arcgi

ArcGIS JS 4加载第三方矢量切片的更多相关文章

  1. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  2. (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。

    1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

  3. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  4. 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

  5. 【 js 模块加载 】【源码学习】深入学习模块化加载(node.js 模块源码)

    文章提纲: 第一部分:介绍模块规范及之间区别 第二部分:以 node.js 实现模块化规范 源码,深入学习. 一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...

  6. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

  7. js顺序加载与并行加载

    前端优化过程中常提到js的加载方式,下面说下几种常用的加载方式: 1:head标签内插入<script>标签 <script type="text/javaScript&q ...

  8. js 模版加载到前端

    js 模版加载到前端 简单有效不高端 配个路由 /js/:filename ,  用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...

  9. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

随机推荐

  1. yum运行报错:File "/usr/libexec/urlgrabber-ext-down", line 28

    [root@sdw1 bin]# vim /usr/libexec/urlgrabber-ext-down 再次执行yum命令,正常下载

  2. Chapter 03—Getting Started with graphs

    例01:一个简单的例子               一. 图形参数 1. 符号和线条 例02: plot(dose,drugA,type="b",lty=3,lwd=3,pch=1 ...

  3. 安装软件包的三种方法、RPM包介绍、rpm、yum工具用法、yum搭建本地仓库

    第5周第3次课(4月18日) 课程内容: 7.1 安装软件包的三种方法7.2 rpm包介绍7.3 rpm工具用法7.4 yum工具用法7.5 yum搭建本地仓库 7.1 安装软件包的三种方法 rpm工 ...

  4. Redis系列(五):Redis的RESP协议详解

    一.什么是RESP Redis是Redis序列化协议,Redis客户端RESP协议与Redis服务器通信.Redis协议在以下几点之间做出了折衷: 简单的实现 快速地被计算机解析 简单得可以能被人工解 ...

  5. APM环境搭建

    权限设置 把用户添加到用户组 “dialout”(如果这步没做,会导致很多用户权限问题): sudo usermod -a -G dialout $USER   然后注销后,重新登录,因为重新登录后所 ...

  6. oracle创建jobs定时任务报错:PLS-00306: wrong number or types of arguments in call to 'JOB'

    原脚本: begin  sys.dbms_job.submit(job => job,                      what => 'xxx;',              ...

  7. 【我的物联网成长记6】由浅入深了解NB-IoT【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  8. 大型情感剧集Selenium:9_selenium配合Pillow完成浏览器局部截图

    网页截图 上次提到了selenium的四种截图方法,最终截图了整张网页.但很多时候,我们仅仅需要截图部分的内容.比如截取某个关键信息,或者现在已经不常见的截图验证码(现在都是各种按规则点击-).那么我 ...

  9. 区块链学习笔记:DAY01 区块链的技术原理

    其实很早之前就听过区块链,也看过有关区块链的介绍,那个时候的理解主要还是一句话:分布式记账 然后开始关注比特币,听了有几年了,对于其来历.用途其实一直都是一知半解. 这次的课算是第一次以一个学员的身份 ...

  10. 利用python实现dll依赖关系导出

    #说明:遍历rootdir目录下所有dll,导出每个dll依赖的dll信息到dstdir目录下 # 配合NotePad++打开所有txt,搜索,可快速定位到某dll被依赖的所有dll文件 import ...