ArcGIS JS 4加载第三方矢量切片

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

原文地址:https://www.cnblogs.com/polong/p/12004605.html

时间: 2024-11-02 13:03:27

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

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

在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就像许多网站用Google的CDN库,而我们在墙内访问一样.页面不会出来,一直加载这个js文件,直到浏览器放弃加载为止! 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default

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

利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/layers/TileInfo",

js顺序加载与并行加载

前端优化过程中常提到js的加载方式,下面说下几种常用的加载方式: 1:head标签内插入<script>标签 <script type="text/javaScript" src="test.js"></script> 这是最常见的方法,但是这个方法有个最大的问题,就是当浏览器解析到<script>标签时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,是个阻塞的过程,这意味着,其后的test.css

判断JS是否加载完成

在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载.这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证这个文件加载完成后,再执行下面的内容. 如何判断js是否加载完成?(实现loadScript(url,callback)异步加载脚本,完成后执行回调函数,要求支持IE) 我们使用document的readyState属性:document.readyState readyState 属性返回当前文档

页面优化——js异步加载

同步加载 在介绍js异步加载之前,我们先来看看什么是js同步加载.我们平时最常使用的就是这种同步加载形式: <script src="http://XXX.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行.一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在he

js动态加载css和js

js动态加载css和js用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjscssfile("http://libs.baidu.com/jquery/1.9.1/jquery.js","js") * @param fileurl 文件路径, * @param filetype 文件类型,支持传入类型,js.css */ loadjscssfile:function(

JS异步加载的几种方式

一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

JS 页面加载触发事件 document.ready和onload的区别

JS 页面加载触发事件 document.ready和onload的区别 document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 用jQ的人很多人都是这么开始写脚本的: $(function(){       // do something }); 例如: $(functi

js资源加载优化

互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其实就是将自己页面所依赖的js(静态的)放置到CDN上,或者使用一些CDN库,以此降低对应用服务器的请求,而浏览器缓存也是不重复加载js文件的性质. 优点: 1.简单.容易维护 2.304 cache 简单来说就是转掉请求,缓存不重加载. 缺点: 1.缓存会失效,当用户强制刷新时会有请求 2.无法增量