arcgis js api 4.x 前端加载json显示

最新推荐文章于 2024-08-13 08:53:37 发布

gis小白的成长之路

最新推荐文章于 2024-08-13 08:53:37 发布

阅读量1.9k

点赞数

分类专栏： ARCGIS API 文章标签： arcgis api 4.x json

本文链接：https://blog.csdn.net/qq_36179257/article/details/113175082

版权

ARCGIS API 专栏收录该内容

21 篇文章 18 订阅

订阅专栏

arcgis js api 4.x 没有直接加载json的方法，可通过以下步骤实现：
1 、如果只有shp，没有json格式的数据，可通过arcmap或其他方式转换传送门：shp转json
2 、通过加载本地路径json或者按钮导入json文件的方法(选其一),并将json转换为JavaScript 对象
3、通过js对象获取矢量信息和字段属性信息，生成polygon实例，并通过graphic渲染
4、通过绘制图层GraphicsLayer添加graphic实例

实现效果：
在这里插入图片描述
json测试数据和源代码下载：传送门： json数据和源代码下载

实现代码，有注释，可直接复制运行：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>arcgis api 4.x 加载json</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var getJson, upload;
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/TileLayer",
            "esri/Basemap",
            "esri/geometry/SpatialReference",
            'esri/layers/GraphicsLayer',
            'esri/Graphic',
            "esri/geometry/Extent",
            "dojo/domReady!"
        ], function (
            Map,  
            SceneView, 
            TileLayer, 
            Basemap, 
            SpatialReference, 
            GraphicsLayer,
            Graphic,
            Extent) {
                var tileLayer = new TileLayer({ //arcgis在线地图
                    url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
                }) 
               
                var grLayer = new GraphicsLayer() //绘制图层

                var customBasemap = new Basemap({
                    baseLayers: [tileLayer,grLayer],
                    title: "Custom Basemap",
                    id: "myBasemap"
                });
                var map = new Map({
                    basemap: customBasemap
                });
                var view = new SceneView({
                    container: "viewDiv",
                    map: map,
                    zoom: 16,
                    center: [110.301,20.025]
                });

                //加载本地路径json的方法
                getJson = function () {
                    let graphics = []
                    let json = null
                    let url = "test.json"/*json文件url*/
                    let request = new XMLHttpRequest();
                    request.open("get", url);/*设置请求方法与路径*/
                    request.send(null);/*不发送数据到服务器*/
                    request.onload = function() {/*XHR对象获取到返回信息后执行*/
                        if (request.status == 0) { 
                            json = JSON.parse(request.responseText)  //转为js对象
                            json.features.forEach(element => { //遍历js对象
                                let rings = element.geometry.rings //面的矢量数据
                                let attributes = element.attributes //字段属性信息
                                let polygon = { //面实例
                                    type: 'polygon', 
                                    rings: rings,
                                    attributes: attributes,
                                    spatialReference: { wkid: 4326 }
                                }
                                let polygonGraphics = new Graphic({  //graphic实例
                                    geometry: polygon,
                                    symbol: { type: "simple-fill" } //面符号
                                })
                                grLayer.add(polygonGraphics) //添加到绘制图层

                            });
                        }
                    }
                }  

                //按钮导入json的方法
                upload = function () {
                    let input = document.getElementById("json").files[0]; //获取导入的文件
                    let reader = new FileReader(); 
                    reader.readAsText(input) //读取文件为 Text
                    reader.onload = function(evt){
                        let json = evt.target.result //读取json数据
                        let obj = JSON.parse(json) //转换为js对象
                        let length = obj.features.length
                        for (let i=0; i<length; i++) {
                            let rings = obj.features[i].geometry.rings //矢量信息
                            let attributes = obj.features[i].attributes //字段属性信息
                            let polygon = {  //面实例
                                type: 'polygon', 
                                rings: rings,
                                attributes: attributes,
                                spatialReference: { wkid: 4326 }
                            }
                            let polygonGraphics = new Graphic({ //graphic实例
                                geometry: polygon,
                                symbol: { type: "simple-fill" } //简单面符号
                            })
                            grLayer.add(polygonGraphics) //添加到绘制图层
                        }
                    }
                }
            });
    </script>
</head>
<body>
    <button type="button" onclick="getJson()">加载本地路径json</button><br>
    <input type="file" id="json">
    <button type="button" onclick="upload()">加载导入的json</button>
    <div id="viewDiv"></div>
</body>
</html>