1. 添加插件

1.1. 添加wms插件

1.1.1. 步骤

1. 将 imodeljs\extensions\wms\lib\extension 下的所有文件拷贝到 imodeljs\test-apps\display-test-app\public\imjs\_extensions\wmsExtension 目录下，路径下缺省的文件夹自行创建

2. 将 wmsPlugin.json 改名为 wmsExtension.json
   

3. 在 imodeljs\test-apps\display-test-app\src\frontend\App.ts 中，在 startup 之后加上代码：

   IModelApp.viewManager.onSelectedViewportChanged.addListener(() => {
               const loader = new ExternalServerExtensionLoader("http://localhost:3000");
        IModelApp.extensionAdmin.addExtensionLoaderFront(loader)
        IModelApp.tools.run('Extension', ['wmsExtension']);
    });
   

   如图：

4. 在 imodeljs\test-apps\display-test-app\public\imjs\_extensions\wmsExtension\index.js 中的 WMSExtension 中的 onload 方法中加上：

   this.i18n.registerNamespace(this._defaultNs);
   

   如图：

5. 打开设置中的 BackGroundMap，keyin 中输入 view globe satellite

1.2. 添加 geonames 插件

1.2.1. 步骤

1. 拷贝
2. 将 imodeljs\extensions\geonames\lib\extension 下的所有文件拷贝到 imodeljs\test-apps\display-test-app\public\imjs_extensions\wmsExtension 目录下，路径下缺省的文件夹自行创建

3. 将 imodeljs\extensions\geonames\src\public下的所有文件也来拷贝到 imodeljs\test-apps\display-test-app\public\imjs_extensions\wmsExtension 目录下

4. 路径下缺省的文件夹自行创建，目录如下：

   

5. 在 imodeljs\test-apps\display-test-app\src\frontend\App.ts 中，在 startup 之后加上代码：

   IModelApp.viewManager.onSelectedViewportChanged.addListener(() => {
   const loader = new ExternalServerExtensionLoader("http://localhost:3000");
      IModelApp.extensionAdmin.addExtensionLoaderFront(loader);
      IModelApp.tools.run('Extension', ['geoNames']);
      // IModelApp.tools.run('Extension', ['wmsExtension']);
   });
   

   

6. 在 imodeljs\test-apps\display-test-app\public\imjs_extensions\geoNames\index.js 中的 GeoNameExtension 中的 onload 方法中加上：

   

7. 打开设置中的 BackGroundMap，keyin 中输入 view globe satellite ，然后再输入 GeoNames On，就可以看到 geoNames 生效，如果没有出来可以试试 GeoNames Update 更新：