现在矢量切片越来越普及,对于地图渲染能更轻更快。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. React源码 React.Children

    children是什么意思呢?就是我们拿到组件内部的props的时候,有props.children这么一个属性,大部分情况下,我们直接把 props.children 渲染到 JSX 里面就可以了. ...

  2. SpringCloud Alibaba微服务实战一 - 基础环境准备

    Springcloud Aibaba现在这么火,我一直想写个基于Springcloud Alibaba一步一步构建微服务架构的系列博客,终于下定决心从今天开始本系列文章的第一篇 - 基础环境准备. 该 ...

  3. P1035 级数求和

    题目描述 已知:S_n= 1+1/2+1/3+…+1/nSn​=1+1/2+1/3+…+1/n.显然对于任意一个整数KK,当nn足够大的时候,S_nSn​大于KK. 现给出一个整数KK(1 \le k ...

  4. 虚拟机中linux操作系统raid5(5块磁盘,3块做raid,2块做备份)配置流程及损坏磁盘的移除

    1.打开所要用的虚拟机,点击编辑虚拟机设置,点击硬盘,添加 2.一直点击下一步不做修改,直到最后完成 3.按照以上步骤添加5块磁盘 4.点击开启虚拟机,输入用户名root密码登录进去 5.进入虚拟机后 ...

  5. 重新调用 layoutSubview

    重新调用 layoutSubview

  6. 前端常用得CSS代码分享

    前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...

  7. 一图读懂基于鲲鹏处理器的全栈混合云华为云Stack6.5

    [摘要] 够料的全栈混合云干货信息,速戳! 近日,在2019华为云城市峰会广州站上,华为云发布基于鲲鹏处理器的全栈混合云解决方案HCS 6.5.x86+鲲鹏,双驱动开启云上新架构;云上+本地,双平台无 ...

  8. Centos7使用Yum安装高版本的LNMP

    [摘要] 本文旨在介绍使用yum的方式安装一些高版本的NGINX.MySQL.PHP服务.当然如果觉得红帽给的就够用,就用红帽给的就行. 在红帽系列的Linux操作系统中,nginx/mysql/ph ...

  9. 脚本shell每小时递增运行task

    下面 hello 是开始时间, world 是结束时间 #!/bin/bash START=$(date +%s); hello="20160911 00" world=" ...

  10. hibernate绑定session

    session session是一种单实例对象 简单说就是自己用 别人不能用.在一些项目中很多人一起来操作 所以我们可以把session与我们的本地线程一起绑定,本地线程的特点就是执行一次 从创建到销 ...