jgrayson-apl · cehui0303 · Apr 19, 2019 · Apr 19, 2019 · Apr 19, 2019 · Jun 11, 2019
diff --git a/README.md b/README.md
@@ -34,3 +34,8 @@ Edit the styles of Esri Vector Basemaps via ArcGIS.com items
 > WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 > See the License for the specific language governing permissions and
 > limitations under the License.
+
+### 关于SetStyle错误的问题
+- https://developers.arcgis.com/javascript/3/jsapi/vectortilelayer-amd.html#setstyle
+
+- Changes the style properties used to render the layers. It is the equivalent of changing the entire CSS style sheet for a web page. It takes either a style object or a url to a style resource. When loading a style, it is the developer's responsibility to make sure that any relative urls in the style resolve correctly.(要由开发者对url路径进行处理！！！）
diff --git a/js/main.js b/js/main.js
@@ -936,22 +936,31 @@ define([
 
         // GET STYLE //
         esriRequest({
-          url: lang.replace("{itemUrl}/resources/styles/root.json", this.selectedItem),
+          url: lang.replace("{url}/resources/styles/root.json", this.selectedItem),
           content: { f: "json" }
         }).then(function (style) {
           console.info("root.json", style);
 
+
+            //需要把style里的url处理为绝对路径
+            //.....
+          style.sources.esri.url = this.selectedItem.url;
+            style.sprite = this.selectedItem.url + "/resources/sprites/sprite";
+            style.glyphs = this.selectedItem.url + "/resources/fonts/{fontstack}/{range}.pbf";
           var isSecure = /https:/i;
           if(isSecure.test(window.location.protocol)) {
             style.glyphs = style.glyphs.replace(/http:/gi, "https:");
             style.sprite = style.sprite.replace(/http:/gi, "https:");
             style.sources.esri.url = style.sources.esri.url.replace(/http:/gi, "https:");
-          }
+            }
+
+
 
           // VECTOR BASEMAP LAYER //
           // - THERE ARE SEVERAL WAYS TO CREATE VECTORTILELAYER...
           //   HERE WE PASS IN THE STYLE DIRECTLY INTO THE CONSTRUCTOR
           this.vectorBasemapLayer = new VectorTileLayer(this._cloneVectorTileLayerStyle(style));
+            //this.vectorBasemapLayer = new VectorTileLayer(lang.replace("{url}/resources/styles/root.json", this.selectedItem));
           this.vectorBasemapLayer.on("error", function (evt) {
             console.warn("vectorBasemapLayer.error: ", evt.error);
           }.bind(this));

diff --git a/oauth.html b/oauth.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>测试ArcGIS OAuth功能</title>
+    <style>
+        html,
+        body {
+            font-family: Lucida Sans, Lucida Grande, Arial !important;
+            font-size: 14px;
+            width: 100%;
+            height: 100%;
+            margin: 0px;
+            padding: 0px;
+        }
+
+        .esri-item-gallery .esri-item-container {
+            float: left;
+            text-align: center;
+            padding: 10px;
+            width: 204px;
+            display: inline-block;
+        }
+
+        .esri-item-gallery .esri-image {
+            width: 200px;
+            height: 133px;
+            border: 2px solid gray;
+            border-radius: 5px;
+        }
+
+        .esri-item-gallery .esri-null-image {
+            line-height: 133px;
+            text-align: center;
+            color: #999999;
+        }
+
+        .esri-item-gallery .esri-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .esri-item-gallery .esri-null-title {
+            color: #999999;
+        }
+
+        .action {
+            color: blue;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+    </style>
+    <script src="https://js.arcgis.com/4.11/"></script>
+
+    <script>
+        require([
+            "esri/portal/Portal",
+            "esri/identity/OAuthInfo",
+            "esri/identity/IdentityManager",
+            "esri/portal/PortalQueryParams"
+        ], function (Portal, OAuthInfo, esriId, PortalQueryParams) {
+            var personalPanelElement = document.getElementById("personalizedPanel");
+            var anonPanelElement = document.getElementById("anonymousPanel");
+            var userIdElement = document.getElementById("userId");
+
+            var info = new OAuthInfo({
+                // Swap this ID out with registered application ID
+                appId: "Zybs7LDhrp3s6zhQ",
+                // Uncomment the next line and update if using your own portal
+                portalUrl: "http://gis.zjgisdev.com/portal",
+                // Uncomment the next line to prevent the user's signed in state from being shared with other apps on the same domain with the same authNamespace value.
+                // authNamespace: "portal_oauth_inline",
+                popup: false
+            });
+            esriId.registerOAuthInfos([info]);
+
+            esriId
+                .checkSignInStatus(info.portalUrl + "/sharing")
+                .then(function () {
+                    displayItems();
+                })
+                .catch(function () {
+                    // Anonymous view
+                    alert('error!');
+                    anonPanelElement.style.display = "block";
+                    personalPanelElement.style.display = "none";
+                });
+
+            document
+                .getElementById("sign-in")
+                .addEventListener("click", function () {
+                    // user will be redirected to OAuth Sign In page
+                    esriId.getCredential(info.portalUrl + "/sharing");
+                });
+
+            document
+                .getElementById("sign-out")
+                .addEventListener("click", function () {
+                    esriId.destroyCredentials();
+                    window.location.reload();
+                });
+
+            function displayItems() {
+                var portal = new Portal(info.portalUrl);
+                // Setting authMode to immediate signs the user in once loaded
+                portal.authMode = "immediate";
+                // Once loaded, user is signed in
+                portal.load().then(function () {
+                    // Create query parameters for the portal search
+                    debugger;
+                    var queryParams = new PortalQueryParams({
+                        query: "owner:" + portal.user.username,
+                        sortField: "numViews",
+                        sortOrder: "desc",
+                        num: 20
+                    });
+
+                    userIdElement.innerHTML = portal.user.username;
+                    anonPanelElement.style.display = "none";
+                    personalPanelElement.style.display = "block";
+
+                    // Query the items based on the queryParams created from portal above
+                    portal.queryItems(queryParams).then(createGallery);
+                });
+            }
+
+            function createGallery(items) {
+                var htmlFragment = "";
+
+                items.results.forEach(function (item) {
+                    htmlFragment +=
+                        '<div class="esri-item-container">' +
+                        (item.thumbnailUrl
+                            ? '<div class="esri-image" style="background-image:url(' +
+                            item.thumbnailUrl +
+                            ');"></div>'
+                            : '<div class="esri-image esri-null-image">Thumbnail not available</div>') +
+                        (item.title
+                            ? '<div class="esri-title">' + (item.title || "") + "</div>"
+                            : '<div class="esri-title esri-null-title">Title not available</div>') +
+                        "</div>";
+                });
+                document.getElementById("itemGallery").innerHTML = htmlFragment;
+            }
+        });
+    </script>
+</head>
+<body>
+    <div id="anonymousPanel"
+         style="display: none; padding: 5px; text-align: center;">
+        <span id="sign-in" class="action">Sign In</span> and view your ArcGIS
+        Online items.
+    </div>
+
+    <div id="personalizedPanel"
+         style="display: none; padding: 5px; text-align: center;">
+        Welcome <span id="userId" style="font-weight: bold;"></span> &nbsp;-&nbsp;
+        <span id="sign-out" class="action">Sign Out</span>
+    </div>
+
+    <div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div>
+</body>
+</html>