geojsonlayer.js 加载GeoJSON数据,页面显示可选中，拖拽，缩放

本文链接：https://blog.youkuaiyun.com/weixin_43747076/article/details/105680075

本文介绍了如何使用geojsonlayer.js库加载GeoJSON数据，并在页面上进行展示，支持用户选择、拖拽和缩放操作。特别指出，GeoJSON数据需先转换为wkid 3857坐标系。示例代码包括arcgis.html页面和geojsonlayer.js文件，供开发者根据自身需求调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意事项：

GeoJSON数据需要转换坐标系（我在这里使用的是wkid 3857）

目录结构：
在这里插入图片描述

页面使用代码arcgis.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ArcGIS GeoJSON Layer</title>
    <!-- ArcGIS API for JavaScript CSS-->
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <style>
        html,
        body,
        #mapGeo{
   
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
    <!-- ArcGIS API for JavaScript -->
    <script src="https://js.arcgis.com/3.20"></script>
    <!-- Terraformer -->
    <script src="https://unpkg.com/terraformer@1.0.7"></script>
    <script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></script>
    <script>
        require([
            "esri/map",
            "js/geojsonlayer.js",
            "esri/renderers/SimpleRenderer",
            "dojo/on",
            "dojo/query",
            "dojo/dom",
            "dojo/domReady!"],
            function (Map, GeoJsonLayer, SimpleRenderer, on, query, dom) {
   
                var map = new Map("mapGeo", {
   
                    basemap: "gray",
                    zoom: 5
                });
                map.on("load", function () {
   
                    addGeoJsonLayer("data/28F-0819.geojson");
                });
                function addGeoJsonLayer(url) {
   
                    var geoJsonLayer = new GeoJsonLayer({
   
                        url: url
                    });
                    geoJsonLayer.on("update-end", function (e) {
   
                        map.setExtent(e.target.extent.expand(1.2));
                    });
                    map.addLayer(geoJsonLayer);
                }
            });
        </script>
    </head>
<body>
    <div id="mapGeo"></div>
</body>
</html>

geojsonlayer.js代码：

define([
    "dojo/_base/declare",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/InfoTemplate",
    "esri/graphicsUtils",
    "esri/Color",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/renderers/SimpleRenderer",
    "esri/SpatialReference",
    "esri/geometry/webMercatorUtils",
    "esri/request",
    "esri/config",
    "dojo/_base/url",
    "dojo/_base/lang"
],  function (declare, Graphic, GraphicsLayer, InfoTemplate, graphicsUtils, Color, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, SpatialReference, webMercatorUtils, esriRequest, esriConfig, Url, lang
    ) {
   
    return declare(