现在矢量切片越来越普及,对于地图渲染能更轻更快。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. SpringBoot系列之集成Thymeleaf用法手册

    目录 1.模板引擎 2.Thymeleaf简介 2.1).Thymeleaf定义 2.2).适用模板 3.重要知识点 3.1).th:text和th:utext 3.2).标准表达式 3.3).Thy ...

  2. 概率分布的python实现

    接上篇概率分布,这篇文章讲概率分布在python的实现. 文中的公式使用LaTex语法,即在\begin{equation}至\end{equation}的内容可以在https://www.codec ...

  3. solr数据操作

    本文介绍solr的基本数据操作,基于solr 8.2.solr支持多种数据格式,包括XML,JSON,CSV等,并提供多种脚本和工具来操作数据.本文讲解curl请求和JSON数据格式的处理方式. 本文 ...

  4. 数据表与简单java类映射转换

    简单的Java类的定义来源于数据表的结构, 例如:雇员信息表.部门信息表描述的就是雇员或部门的信息, 在实际的开发之中,数据表和简单java类之间的映射关系如下: 1. 数据实体表设计 = 类的定义: ...

  5. 使用最新AndroidStudio编写Android编程权威指南(第3版)中的代码会遇到的一些问题

    Android编程权威指南(第3版)这本书是基于Android7.0的,到如今已经过于古老,最新的Android版本已经到10,而这本书的第四版目前还没有正式发售,在最近阅读这本书时,我发现这本书的部 ...

  6. spring cloud 之 -- eureka vs consul,该选择谁?

    0--前言 spring cloud的服务注册中心,该选择谁?在选择前,我们首先需要来了解下分布式的CAP定理: 所谓CAP,是指: Consistency:一致性:就是在分布式系统中的所有数据备份, ...

  7. MongoDB第四天(操作文档,添加,更新,查询以及对于日期的相关操作)

    添加文档: 添加单个文档,多个文档 package com.bjsxt.mongodbdemo; import com.mongodb.client.MongoCollection; import o ...

  8. BZOJ 3106: [cqoi2013]棋盘游戏

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 859  Solved: 356[Submit][Status][Discuss] Descriptio ...

  9. CodeForces1006C-Three Parts of the Array

    C. Three Parts of the Array time limit per test 1 second memory limit per test 256 megabytes input s ...

  10. Mysql基础02-约束

    约束与索引 概念 1.数据完整性(Data Integrity)是指数据的精确性(Accuracy)和可靠性(Reliability). 实体完整性(Entity Integrity):例如,同一个表 ...