创建自定义微件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "compilerOptions": {
    "module": "amd",
    "lib": ["ES2019", "DOM"],
    "noImplicitAny": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "jsx": "react",
    "jsxFactory": "tsx",
    "target": "ES5",
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "importHelpers": true,
    "moduleResolution": "node"
  },
  "include": ["./app/*"],
  "exclude": ["node_modules"]
}

1
2
npm init --yes
npm install --save @types/geoscene-js-api

1
2
3
4
5
6
7
8
9
10
import { subclass, property } from "geoscene/core/accessorSupport/decorators";

import Widget from "geoscene/widgets/Widget";

import { tsx, messageBundle } from "geoscene/widgets/support/widget";

const CSS = {
  base: "esri-hello-world",
  emphasis: "esri-hello-world--emphasis"
};

1
2
3
4
5
6
@subclass("esri.widgets.HelloWorld")
class HelloWorld extends Widget {
   constructor(params?: any) {
    super(params);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@subclass("esri.widgets.HelloWorld")
class HelloWorld extends Widget {

  constructor(params?: any) {
    super(params);
  }

  //----------------------------------
  //  firstName
  //----------------------------------

  @property()
  firstName: string = "John";

  //----------------------------------
  //  lastName
  //----------------------------------

  @property()
  lastName: string = "Smith";

  //----------------------------------
  //  emphasized
  //----------------------------------

  @property()
  emphasized: boolean = false;

  //----------------------------------
  //  messages
  //----------------------------------

  @property()
  @messageBundle("HelloWorld/assets/t9n/widget")
  messages: { greeting: any; } = null;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Public method
render() {
  const greeting = this._getGreeting();
  const classes = {
    [CSS.emphasis]: this.emphasized
  };

  return (
    <div class={this.classes(CSS.base, classes)}>
      {greeting}
    </div>
  );
}

// Private method
private _getGreeting(): string {
  return `Hello, my name is ${this.firstName} ${this.lastName}!`;
}

1
2
3
4
5
6
7
8
9
render() {
  const baseClass = this.isBold && this.isItalic ? `${CSS.base} ${CSS.bold} ${CSS.italic}` :
    this.isBold ? `${CSS.base} ${CSS.bold}` :
    this.isItalic ? `${CSS.base} ${CSS.italic}` :
    CSS.base;
  return (
    <div class={baseClass}>Hello World!</div>
  );
}

1
2
3
4
5
6
7
8
9
render() {
  const dynamicClasses = {
    [CSS.bold]: this.isBold,
    [CSS.italic]: this.isItalic
  };
  return (
    <div class={this.classes({CSS.base, dynamicClasses})>Hello World!</div>
  );
}

1
export = HelloWorld;

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  #btnSpace {
    padding: 10px;
  }

  .geoscene-hello-world {
    display: inline-block;
  }
  .geoscene-hello-world--emphasis {
    font-weight: bold;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
<script>
  let locationPath = location.pathname.replace(/\/[^\/]+$/, "");
  window.dojoConfig = {
    packages: [
      {
        name: "app",
        location: locationPath + "/app"
      }
    ]
  };
</script>

1
2
3
require(["app/HelloWorld", "geoscene/intl"], (HelloWorld, intl) => {

});

1
2
3
4
5
6
7
8
9
root-folder/
  app/
    .tsx
    .js
  assets/
    t9n/
      widget_en.json
      widget_fr.json
  index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
intl.registerMessageBundleLoader({
  pattern: "widgets-custom-widget/assets/",
  async fetchMessageBundle(bundleId, locale) {
    const [, filename] = bundleId.split("/t9n/");
    const knownLocale = intl.normalizeMessageBundleLocale(locale);
    const bundlePath = `./assets/t9n/${filename}_${knownLocale}.json`;

    // bundlePath is "https://domain-URL/widgets-custom-widget/assets/t9n/widget_<locale>.json"

    const response = await fetch(bundlePath);
    return response.json();
  }
});

1
2
3
4
5
6
let names = [
    { firstName: "John", lastName: "Smith" },
    { firstName: "Jackie", lastName: "Miller" },
    { firstName: "Anna", lastName: "Price" }
  ],
  nameIndex = 0;

1
2
3
4
5
const widget = new HelloWorld({
  firstName: names[nameIndex].firstName,
  lastName: names[nameIndex].lastName,
  container: "widgetDiv"
});

1
2
3
4
5
function changeName() {
  widget.set(names[nameIndex++ % names.length]);
}

setInterval(changeName, 1000);

1
2
3
4
5
6
7
8
9
const btnLocale = document.createElement("button");
btnLocale.style.padding = "10px";
btnLocale.classList.add("app-locale-button")
btnLocale.innerHTML = "Toggle Locale";
document.getElementById("btnSpace").appendChild(btnLocale);

btnLocale.addEventListener("click", () => {
  intl.getLocale() === "fr" ? intl.setLocale("en") : intl.setLocale("fr");
});