现在矢量切片越来越普及,对于地图渲染能更轻更快。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. github下载历史版本--xdd

    第一步 打开一个仓库,可以看到此时在主分支下,点击1位置查看历史版本 第二步 现在可以查看到所有的版本(提交)信息,单击2位置进入该版本 第三步 单击3位置浏览并打开该版本 第四步 进入该版本之后,可 ...

  2. Mac OS 终端利器 iTerm2(怕以后找不到,自存自用)

    之前一直使用 Mac OS 自带的终端,用起来虽然有些不太方便,但总体来说还是可以接受的,是有想换个终端的想法,然后今天偶然看到一个终端利器 iTerm2,发现真的很强大,也非常的好用,按照网上配置了 ...

  3. 【转】Pandas常见用法总结

    关键缩写和包导入 在这个速查手册中,我们使用如下缩写: df:任意的Pandas DataFrame对象 s:任意的Pandas Series对象 raw:行标签 col:列标签 引入响应模块: im ...

  4. windows和linux的开机顺序

    windows的开机顺序: 启动自检阶段---初始化启动阶段---Boot加载阶段---检测和配置硬件阶段---内核加载阶段---屏幕显示. linux的开机启动顺序: 加载Bios---读取MBR- ...

  5. c语言作业07

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  6. DNS服务正向解析实验

    DNS域名解析服务是用于解析域名与ip地址对应关系的服务,功能上可以实现正向解析和反向解析 正向解析:根据主机名(域名)查找对应的IP地址. 反向解析:根据IP地址查找对应的主机名(域名). 下面我来 ...

  7. Python中的Base64编码的加密与解密

    Base64 可以干些啥? Base64编码的作用: 由于某些系统中只能使用ASCII字符.Base64就是用来将非ASCII字符的数据转换成ASCII字符的一种方法. 图片(and种子)base64 ...

  8. C#中的委托和事件(二)

    引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为细节的问题,包括一些大家常 ...

  9. js中的宏任务与微任务

    如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...

  10. 在modelarts上部署backend为TensorFlow的keras模型

    最近老山在研究在modelarts上部署mask-rcnn,源代码提供的是keras模型.我们可以将keras转化成savedModel模型,在TensorFlow Serving上部署,可参考老山的 ...