arcgis js 3.x和arcigs js 4.x加载postgis计算得矢量切片

最新推荐文章于 2022-09-30 10:26:39 发布

L.傲骨雄风

最新推荐文章于 2022-09-30 10:26:39 发布

阅读量555

点赞数

分类专栏： postgis

本文链接：https://blog.csdn.net/xlp789/article/details/119596980

版权

postgis 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

主要区别 arcigs js 4.20(最新版本）支持match stop等函数（用这些函数可以进行分级渲染） ,3.x不支持这些函数，另外我试了下4.16版本也不支持，应该是最新得版本才支持得。

另外，注意的是，3.x版本构建矢量切片图层实例得时候传入得是一个参数，而4传入得是个对象。

1.arcgis js 3.37加载矢量切片

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a vector tile source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href='http://localhost/arcgis_js_api_337/library/3.37/3.37/esri/css/esri.css' rel='stylesheet' />
    <script src='http://localhost/arcgis_js_api_337/library/3.37/3.37/init.js'></script>
 
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
     
    require(["esri/map",
            "esri/layers/VectorTileLayer",
        ], function (
            Map, VectorTileLayer) {
            
           
            var map = new Map("map", {
                logo: false,
                center: [118.5151588, 31.6648887],
                zoom: 16,
                showAttribution: false,
                basemap: "streets-vector",
                maxZoom: 18
            });
            var style = {
                "version": 8,
                "sources": {
                    "osm": {
                        "tiles": ['http://localhost/VectorTile/tiles.ashx?m=getVectorTile&z={z}&x={x}&y={y}'],
                        "type": "vector"
                    }
                },
                "layers": [
                    {
                        id: "gx",
                        type: "line",
                        source: "osm",
                        "source-layer": "lines",
                        minzoom: 0,
                        maxzoom: 24,
                        "paint": {
                            'line-color': '#DB0B00',
                            'line-width':2
                        }
                    }
                ],
                "id": "test"
            };
          
            var tileLyr = new VectorTileLayer(style);
            map.addLayer(tileLyr);             
        });
    </script>

</body>
</html>

2.arcgis js 4.20加载矢量切片

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a vector tile source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='http://localhost/arcgis_js_api_420/4.20/init.js'></script>
    <link href='http://localhost/arcgis_js_api_420/4.20/esri/css/main.css' rel='stylesheet' /> 
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        require(["esri/Map",
            "esri/views/MapView",
            "esri/layers/VectorTileLayer",
        ], function (
            Map, MapView, VectorTileLayer) {
            var style = {
                "version": 8,
                "sources": {
                    "osm": {
                        "tiles": ['http://localhost/VectorTile/tiles.ashx?m=getVectorTile&z={z}&x={x}&y={y}'],
                        "type": "vector"
                    }
                },
                "layers": [
                    {
                        id: "gx",
                        type: "line",
                        source: "osm",
                        "source-layer": "lines",
                        minzoom: 0,
                        maxzoom: 24,
                        "paint": {
                            'line-color': ['match', ['get', 'fs_name'], 'A', '#DB0B00', 'B', '#FE9003', 'C', '#FCFC82', 'D', '#59EB04', 'E', '#595CCF', '#FFF5EE'],
                            'line-width':2
                        }
                    }
                ],
                "id": "test"
            };
            var map = new Map();
            var view = new MapView({
                container: "map",
                map: map,
                center: [118.5151588, 31.6648887],
                zoom: 16,
            });
            var tileLyr = new VectorTileLayer({
                style: style
            });
            map.add(tileLyr);   
        });
    </script>

</body>
</html>

L.傲骨雄风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
arcgis js 3.x和arcigs js 4.x加载postgis计算得矢量切片

主要区别arcigs js 4.20(最新版本）支持match stop等函数（用这些函数可以进行分级渲染）,3.x不支持这些函数，另外我试了下4.16版本也不支持，应该是最新得版本才支持得。1.arcgis js 3.37加载矢量切片<!DOCTYPE html><html><head> <meta charset='utf-8' /> <title>Add a vector tile source</ti..
复制链接

扫一扫

专栏目录