diff --git a/dist/mapboxgl/include-mapboxgl.js b/dist/mapboxgl/include-mapboxgl.js
index 4ddfd2613..6b279d63e 100644
--- a/dist/mapboxgl/include-mapboxgl.js
+++ b/dist/mapboxgl/include-mapboxgl.js
@@ -201,6 +201,9 @@
     if (inArray(includes, 'vue-cesium')) {
       inputScript(libsurl + '/vue-cesium/2.1.4/index.umd.min.js');
     }
+    if (inArray(includes, 'snap')) {
+      inputScript(libsurl + '/mapboxglDrawSnap/0.2.0/mapboxglDrawSnap.js');
+    }
   }
 
   load({
diff --git a/dist/maplibregl/include-maplibregl.js b/dist/maplibregl/include-maplibregl.js
index c851240a6..62d0b125a 100644
--- a/dist/maplibregl/include-maplibregl.js
+++ b/dist/maplibregl/include-maplibregl.js
@@ -174,6 +174,9 @@
     if (inArray(includes, 'turf')) {
       inputScript(libsurl + '/turf/6.5.0/turf.min.js');
     }
+    if (inArray(includes, 'snap')) {
+      inputScript(libsurl + '/mapboxglDrawSnap/0.2.0/mapboxglDrawSnap.js');
+    }
     if (!inArray(excludes, 'iclient-maplibregl')) {
       if (supportES6()) {
         inputScript('../../dist/maplibregl/iclient-maplibregl-es6.min.js');
diff --git a/dist/ol/include-ol.js b/dist/ol/include-ol.js
index aa9f0d598..5380bada6 100644
--- a/dist/ol/include-ol.js
+++ b/dist/ol/include-ol.js
@@ -119,6 +119,9 @@
         if (inArray(includes, 'xlsx')) {
             inputScript(libsurl + '/xlsx/0.19.3/xlsx.core.min.js');
         }
+        if (inArray(includes, 'lodash')) {
+          inputScript(libsurl + '/lodash/4.17.21/lodash.min.js');
+        }
 
         // dist
         if (!inArray(excludes, 'iclient-ol')) {
diff --git a/examples/js/include-web.js b/examples/js/include-web.js
index 8068a9185..0857af2be 100644
--- a/examples/js/include-web.js
+++ b/examples/js/include-web.js
@@ -211,6 +211,10 @@
             inputScript(libsurl + '/iclient8c/examples/js/plottingPanel/colorpicker/js/colorpicker.js');
             inputCSS(libsurl + '/iclient8c/examples/js/plottingPanel/colorpicker/css/colorpicker.css');
         }
+        if (inArray(includes, 'viewer')) {
+          inputScript(libsurl + '/viewerjs/viewer.js');
+          inputCSS(libsurl + '/viewerjs/css/viewer.css');
+        }
     }
 
     function datGuiI18N() {
diff --git a/examples/leaflet/drawAndEditFeatures.html b/examples/leaflet/drawAndEditFeatures.html
index 3d4a6dbb2..b9f04a2d1 100644
--- a/examples/leaflet/drawAndEditFeatures.html
+++ b/examples/leaflet/drawAndEditFeatures.html
@@ -7,8 +7,6 @@
     <meta charset="UTF-8" />
     <title data-i18n="resources.title_editFeatures"></title>
     <script type="text/javascript" include="leaflet-geoman" src="../../dist/leaflet/include-leaflet.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js" integrity="sha512-EC3CQ+2OkM+ZKsM1dbFAB6OGEPKRxi6EDRnZW9ys8LghQRAq6cXPUgXCCujmDrXdodGXX9bqaaCRtwj4h4wgSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" integrity="sha512-za6IYQz7tR0pzniM/EAkgjV1gf1kWMlVJHBHavKIvsNoUMKWU99ZHzvL6lIobjiE2yKDAKMDSSmcMAxoiWgoWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
       .key-input,
       .value-input {
@@ -190,11 +188,11 @@
     <div id="map" style="width: 100%; height: 100%"></div>
     <div class="video-modal">
       <video controls width="960">
-        <source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
+        <source src="" type="video/mp4">
       </video>
     </div>
     <div id="popup">
-      <p>按Tab键开始输入坐标值，回车键确定</p>
+      <p><span data-i18n="resources.msg_pleaseSaveFirst"></span></p>
       <div id="popup-content">
         <h5>X</h5>
         <input class="input-element coordX" type="number" tabindex="1">
@@ -210,7 +208,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-plus" aria-hidden="true">新增要素</span>
+          <span class="glyphicon glyphicon-plus" aria-hidden="true"><span data-i18n="resources.text_addFeature"></span></span>
         </button>
         <button
           id="editFeature"
@@ -218,7 +216,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-edit" aria-hidden="true">编辑要素</span>
+          <span class="glyphicon glyphicon-edit" aria-hidden="true"><span data-i18n="resources.text_editFeature"></span></span>
         </button>
         <button
           id="deleteFeature"
@@ -226,70 +224,70 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-trash" aria-hidden="true">删除要素</span>
+          <span class="glyphicon glyphicon-trash" aria-hidden="true"><span data-i18n="resources.text_deleteFeature"></span></span>
         </button>
       </div>
       <div class="info-panel">
         <div class="add-feature-info">
-          <h4 class="into-title">新增要素</h4>
+          <h4 class="into-title"><span data-i18n="resources.text_addFeature"></span></h4>
           <div>
-            <h5>目标数据集</h5>
+            <h5><span data-i18n="resources.text_targetDataset"></span></h5>
             <select class="select-element addDatasetNameList" name="capital">
             </select>
           </div>
-          <h6><span class="line-element"></span>空间信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
-            <p class="desc-element">鼠标移动至地图绘制要素。</p>
+            <p class="desc-element"><span data-i18n="resources.msg_moveToMapDraw"></span></p>
           </div>
-          <h6><span class="line-element"></span>属性信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="add-attribute-info">
           </div>
           <div class="info-bottom">
-            <button class="btn btn-default btn-group-xs cancel-add">取消</button>
-            <button class="btn btn-primary btn-group-xs addSave">保存</button>
+            <button class="btn btn-default btn-group-xs cancel-add" data-i18n="resources.btn_cancel"></button>
+            <button class="btn btn-primary btn-group-xs addSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="edit-feature-info">
-          <h4 class="into-title">编辑要素<span class="dataset-info">数据集：<span class="edit-dataset"></span></span></h4>
-          <h6>空间信息</h6>
+          <h4 class="into-title"><span data-i18n="resources.text_editFeature"></span><span class="dataset-info">数据集：<span class="edit-dataset"></span></span></h4>
+          <h6><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
           </div>
-          <h6>属性信息</h6>
+          <h6><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="edit-attribute-info">
           </div>
           <div class="info-bottom">
-            <button class="btn btn-default btn-group-xs cancel-edit">取消</button>
-            <button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
+            <button class="btn btn-default btn-group-xs cancel-edit" data-i18n="resources.btn_cancel"></button>
+            <button disabled class="btn btn-primary btn-group-xs editSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="delete-feature-info">
-          <h4 class="into-title">删除要素</h4>
-          <p class="desc-element">在地图上选择待删除的要素。</p>
+          <h4 class="into-title"><span data-i18n="resources.text_deleteFeature"></span></h4>
+          <p class="desc-element"><span data-i18n="resources.msg_selectDeleteFeature"></span></p>
           <div style="border-top: 1px solid #baafaf">
-            <h5>待删除要素:</h5>
+            <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
             <div class="delete-feature-list">
 
             </div>
           </div>
           <div class="info-bottom">
-            <button class="btn btn-default btn-group-xs cancel-delete">取消</button>
+            <button class="btn btn-default btn-group-xs cancel-delete" data-i18n="resources.btn_cancel"></button>
             <div class="delete-modal">
-              <p>删除后要素将无法恢复，是否确认删除？</p>
+              <p><span data-i18n="resources.msg_confirmDelete"></span></p>
               <div style="float: right;">
-                <button class="final-cancel-delete btn btn-default btn-group-xs">取消</button>
-                <button class="final-delete btn btn-danger btn-group-xs">删除</button>
+                <button class="final-cancel-delete btn btn-default btn-group-xs" data-i18n="resources.btn_cancel"></button>
+                <button class="final-delete btn btn-danger btn-group-xs" data-i18n="resources.text_input_value_delete"></button>
               </div>
             </div>
-            <button class="btn btn-danger btn-group-xs delete">删除</button>
+            <button class="btn btn-danger btn-group-xs delete" data-i18n="resources.text_input_value_delete"></button>
           </div>
         </div>
       </div>
-      <div class="edit-tips">在地图上点击要素进行选择。</div>
+      <div class="edit-tips"><span data-i18n="resources.msg_clickToSelect"></span></div>
     </div>
     </div>
-    <script type="text/javascript" include="jquery,bootstrap,widgets.alert" src="../js/include-web.js"></script>
+    <script type="text/javascript" include="jquery,bootstrap,widgets.alert,viewer" src="../js/include-web.js"></script>
     <script type="text/javascript">
       var status = 'ADD';
       var type = '';
@@ -297,11 +295,10 @@ <h5>待删除要素:</h5>
       var currentDataset = 'buildings_R';
       var map,
         draw,
-        // url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326";
-        url = "http://172.16.14.44:8090/iserver/services/map-china400/rest/maps/China_4326";
+        url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326";
       var isUpdate = false;
-      var dataUrl = 'http://172.16.14.44:8090/iserver/services/data-Buildings/rest/data';
-      var dataSourceName = 'NewBuildings';
+      var dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-building/rest/data";
+      var dataSourceName = 'building';
       var editFeaturesService = new L.supermap.FeatureService(dataUrl);
       var currentShowPanel = '';
       var datasetNameList = [];
@@ -447,7 +444,7 @@ <h5>待删除要素:</h5>
           datasetNameList = e.result.datasetNames;
           currentFeature.dataset = datasetNameList[0];
           currentDataset = datasetNameList[0];
-          // 获取所有数据集的类型
+          var count = 0;
           datasetNameList.forEach(function(datasetName, index) {
             filterFields[datasetName] = {};
             datasetService.getDataset(dataSourceName, datasetName, function(e) {
@@ -456,11 +453,12 @@ <h5>待删除要素:</h5>
               id: 0
             }
             typeMap[e.result.datasetInfo.type] && datasetTypeClassify[typeMap[e.result.datasetInfo.type]].push(datasetName);
+            count++;
             if (index === 0) {
               var editType = e.result.datasetInfo.type;
               createOptions(datasetNameList, document.querySelector('.addDatasetNameList'), editType, datasetNameList[0]);
             }
-            if (index === datasetNameList.length - 1) {
+            if (count === datasetNameList.length) {
               initFeature();
             }
           });
diff --git a/examples/locales/zh-CN/resources.js b/examples/locales/zh-CN/resources.js
index c7fed3ebd..7498c6b5d 100644
--- a/examples/locales/zh-CN/resources.js
+++ b/examples/locales/zh-CN/resources.js
@@ -1909,7 +1909,21 @@ window.examplesResources = {
         "option_meterUnit": "米",
         "option_mileUnit": "英里",
         "option_degreeUnit": "度",
-        "text_print": "打印"
+        "text_print": "打印",
+        "text_addFeature": "新增要素",
+        "text_editFeature": "编辑要素",
+        "text_deleteFeature": "删除要素",
+        "text_targetDataset": "目标数据集",
+        "text_spacialInfo": "空间信息",
+        "msg_pleaseSaveFirst": "有未完成的更改，请先保存或取消更改",
+        "msg_inputCoordinates": "按Tab键开始输入坐标值，回车键确定",
+        "msg_moveToMapDraw": "鼠标移动至地图绘制要素",
+        "text_attributeInfo": "属性信息",
+        "msg_pleaseSave": "请先保存或取消更改",
+        "msg_selectDeleteFeature": "在地图上选择待删除的要素",
+        "msg_confirmDelete": "删除后要素将无法恢复，是否确认删除？",
+        "msg_clickToSelect": "在地图上点击要素进行选择",
+        "text_featureToDelete": "待删除要素"
     }
 };
 window.resources = window.examplesResources.resources;
diff --git a/examples/mapboxgl/drawAndEditFeatures.html b/examples/mapboxgl/drawAndEditFeatures.html
index dd52bc610..71fe4ac7c 100644
--- a/examples/mapboxgl/drawAndEditFeatures.html
+++ b/examples/mapboxgl/drawAndEditFeatures.html
@@ -6,10 +6,7 @@
   <head>
     <meta charset="UTF-8" />
     <title data-i18n="resources.title_editFeatures"></title>
-    <script type="text/javascript" include="draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
-    <script src="../../dist/mapboxgl/mapbox-gl-draw-snap-mode.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js" integrity="sha512-EC3CQ+2OkM+ZKsM1dbFAB6OGEPKRxi6EDRnZW9ys8LghQRAq6cXPUgXCCujmDrXdodGXX9bqaaCRtwj4h4wgSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" integrity="sha512-za6IYQz7tR0pzniM/EAkgjV1gf1kWMlVJHBHavKIvsNoUMKWU99ZHzvL6lIobjiE2yKDAKMDSSmcMAxoiWgoWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script type="text/javascript" include="draw,snap" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
     <style>
       .key-input,
       .value-input {
@@ -212,7 +209,7 @@
   <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
     <div id="map" style="width: 100%; height: 100%"></div>
     <div id="popup" class="ol-popup">
-      <p>按Tab键开始输入坐标值，回车键确定</p>
+      <p><span data-i18n="resources.msg_inputCoordinates"></span></p>
       <div id="popup-content">
         <h5>X</h5>
         <input class="input-element coordX" type="number">
@@ -228,7 +225,7 @@ <h5>Y</h5>
     </div>
     <div class="message">
       <span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
-      <span>有未完成的更改，请先保存或取消更改</span>
+      <span><span data-i18n="resources.msg_pleaseSaveFirst"></span></span>
     </div>
     <div class="edit-panel">
       <div class="button-group">
@@ -238,7 +235,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-plus" aria-hidden="true">新增要素</span>
+          <span class="glyphicon glyphicon-plus" aria-hidden="true"><span data-i18n="resources.text_addFeature"></span></span>
         </button>
         <button
           id="editFeature"
@@ -246,7 +243,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-edit" aria-hidden="true">编辑要素</span>
+          <span class="glyphicon glyphicon-edit" aria-hidden="true"><span data-i18n="resources.text_editFeature"></span></span>
         </button>
         <button
           id="deleteFeature"
@@ -254,72 +251,72 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-trash" aria-hidden="true">删除要素</span>
+          <span class="glyphicon glyphicon-trash" aria-hidden="true"><span data-i18n="resources.text_deleteFeature"></span></span>
         </button>
       </div>
       <div class="info-panel">
         <div class="add-feature-info">
-          <h4 class="into-title">新增要素</h4>
+          <h4 class="into-title"><span data-i18n="resources.text_addFeature"></span></h4>
           <div>
-            <h5>目标数据集</h5>
+            <h5><span data-i18n="resources.text_targetDataset"></span></h5>
             <select class="select-element addDatasetNameList" name="capital">
             </select>
           </div>
-          <h6><span class="line-element"></span>空间信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
-            <p class="desc-element">鼠标移动至地图绘制要素。</p>
+            <p class="desc-element"><span data-i18n="resources.msg_moveToMapDraw"></span></p>
           </div>
-          <h6><span class="line-element"></span>属性信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="add-attribute-info">
           </div>
           <div class="info-bottom">
-            <p class="add-tips">请先保存或取消更改</p>
-            <button class="btn btn-default btn-group-xs cancel-add">取消</button>
-            <button class="btn btn-primary btn-group-xs addSave">保存</button>
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
+            <button class="btn btn-default btn-group-xs cancel-add" data-i18n="resources.btn_cancel"></button>
+            <button class="btn btn-primary btn-group-xs addSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="edit-feature-info">
-          <h4 class="into-title">编辑要素<span class="dataset-info">数据集：<span class="edit-dataset"></span></span></h4>
-          <h6>空间信息</h6>
+          <h4 class="into-title"><span data-i18n="resources.text_editFeature"></span><span class="dataset-info"><span data-i18n="resources.text_dataset"></span>：<span class="edit-dataset"></span></span></h4>
+          <h6><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
           </div>
-          <h6>属性信息</h6>
+          <h6><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="edit-attribute-info">
           </div>
           <div class="info-bottom">
-            <p class="add-tips">请先保存或取消更改</p>
-            <button class="btn btn-default btn-group-xs cancel-edit">取消</button>
-            <button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
+            <button class="btn btn-default btn-group-xs cancel-edit" data-i18n="resources.btn_cancel"></button>
+            <button disabled class="btn btn-primary btn-group-xs editSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="delete-feature-info">
-          <h4 class="into-title">删除要素</h4>
-          <p class="desc-element">在地图上选择待删除的要素。</p>
+          <h4 class="into-title"><span data-i18n="resources.text_deleteFeature"></span></h4>
+          <p class="desc-element"><span data-i18n="resources.msg_selectDeleteFeature"></span></p>
           <div style="border-top: 1px solid #baafaf">
-            <h5>待删除要素:</h5>
+            <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
             <div class="delete-feature-list">
 
             </div>
           </div>
           <div class="info-bottom">
             <div class="delete-modal">
-              <p>删除后要素将无法恢复，是否确认删除？</p>
+              <p><span data-i18n="resources.msg_confirmDelete"></span></p>
               <div class="btns">
-                <button class="final-delete-cancel btn btn-default btn-group-xs">取消</button>
-                <button class="final-delete btn btn-danger btn-group-xs">删除</button>
+                <button class="final-delete-cancel btn btn-default btn-group-xs" data-i18n="resources.btn_cancel"></button>
+                <button class="final-delete btn btn-danger btn-group-xs"><span data-i18n="resources.text_input_value_delete"></span></button>
               </div>
             </div>
-            <button class="btn btn-default btn-group-xs cancel-delete">取消</button>
-            <button class="btn btn-danger btn-group-xs delete">删除</button>
+            <button class="btn btn-default btn-group-xs cancel-delete" data-i18n="resources.btn_cancel"></button>
+            <button class="btn btn-danger btn-group-xs delete"><span data-i18n="resources.text_input_value_delete"></span></button>
           </div>
         </div>
       </div>
-      <div class="edit-tips">在地图上点击要素进行选择。</div>
+      <div class="edit-tips"><span data-i18n="resources.msg_clickToSelect"></span></div>
     </div>
     </div>
-    <script type="text/javascript" include="jquery,bootstrap,widgets.alert" src="../js/include-web.js"></script>
+    <script type="text/javascript" include="jquery,bootstrap,widgets.alert,viewer" src="../js/include-web.js"></script>
     <script type="text/javascript">
       var status = 'ADD';
       var type = '';
@@ -327,11 +324,10 @@ <h5>待删除要素:</h5>
       var currentDataset = 'buildings_R';
       var map,
         draw,
-        // url = (window.isLocal ? window.server : "https://iserver.supermap.io") + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}';
-        url = "http://172.16.14.44:8090/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}";
-        var isUpdate = false;
-      var dataUrl = 'http://172.16.14.44:8090/iserver/services/data-Buildings/rest/data';
-      var dataSourceName = 'NewBuildings';
+        url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326";
+      var isUpdate = false;
+      var dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-building/rest/data";
+      var dataSourceName = 'building';
       var editFeaturesService = new mapboxgl.supermap.FeatureService(dataUrl);
       var currentShowPanel = '';
       var datasetNameList = [];
@@ -562,7 +558,7 @@ <h5>待删除要素:</h5>
           datasetNameList = e.result.datasetNames;
           currentFeature.dataset = datasetNameList[0];
           currentDataset = datasetNameList[0];
-          // 获取所有数据集的类型
+          var count = 0;
           datasetNameList.forEach(function(datasetName, index) {
             filterFields[datasetName] = {};
             datasetService.getDataset(dataSourceName, datasetName, function(e) {
@@ -571,11 +567,12 @@ <h5>待删除要素:</h5>
               id: 0
             }
             typeMap[e.result.datasetInfo.type] && datasetTypeClassify[typeMap[e.result.datasetInfo.type]].push(datasetName);
+            count++;
             if (index === 0) {
               var editType = e.result.datasetInfo.type;
               createOptions(datasetNameList, document.querySelector('.addDatasetNameList'), editType, datasetNameList[0]);
             }
-            if (index === datasetNameList.length - 1) {
+            if (count === datasetNameList.length) {
               initFeature();
             }
           });
@@ -695,7 +692,7 @@ <h5>待删除要素:</h5>
           inputEle.value = properties[key];
           inputEle.label = key;
           item.appendChild(inputEle);
-          if (key === 'VIDEO') {
+          if (key === 'VIDEO' && properties[key]) {
             var videoPlayIcon = document.createElement('div');
             videoPlayIcon.className = 'playIcon';
             var video = document.createElement('video');
@@ -743,14 +740,29 @@ <h5>待删除要素:</h5>
         });
 
          // 切换状态
-        document.querySelector('.button-group').addEventListener('click', function(e) {
-          var className = e.target.className;
+         document.querySelector('#addFeature').addEventListener('click', function() {
           if (isChanged) {
             document.querySelector('.message').style.display = 'block';
             document.querySelector('.add-tips').style.display = 'inline-block';
             return;
           }
-          switchPanel(className);
+          switchPanel('add');
+        });
+        document.querySelector('#editFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('edit');
+        });
+        document.querySelector('#deleteFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('delete');
         });
 
         document.querySelector('.add-attribute-info').addEventListener('change', checkInput);
@@ -784,18 +796,20 @@ <h5>待删除要素:</h5>
         });
 
         document.querySelector('.cancel-edit').addEventListener('click', function() {
+          if (currentShowPanel) {
+              document.querySelector('.' + currentShowPanel).style.display = 'none';
+          }
           if (curEditOriginFeatures.length) {
             curEditOriginFeatures.forEach(function(feature) {
               map.setFilter(feature.properties.datasetName, null);
               draw.delete(feature.id);
             });
             curEditOriginFeatures = [];
-            if (currentShowPanel) {
-              document.querySelector('.' + currentShowPanel).style.display = 'none';
-            }
             document.querySelector('.message').style.display = 'none';
             document.querySelector('.add-tips').style.display = 'none';
             isChanged = false;
+            status = '';
+            endDraw();
           }
         });
 
@@ -815,13 +829,13 @@ <h5>待删除要素:</h5>
         }
         var type = datasetInfoList[currentDataset].type;
         var source = datasetInfoList[currentDataset].source;
-        if (className.indexOf('plus') > -1) {
+        if (className === 'add') {
           document.querySelector('.edit-tips').style.display = 'none';
           startDraw(type, source);
           document.querySelector('.add-feature-info').style.display = 'block';
           currentShowPanel = 'add-feature-info';
           status = 'ADD';
-        } else if (className.indexOf('edit') > -1) {
+        } else if (className === 'edit') {
           draw.changeMode('simple_select');
           if (fromAdd) {
             fillContent();
@@ -832,7 +846,7 @@ <h5>待删除要素:</h5>
           currentShowPanel = 'edit-feature-info';
           status = 'EDIT';
           startSelect(source);
-        } else if (className.indexOf('trash') > -1) {
+        } else if (className === 'delete') {
           document.querySelector('.edit-tips').style.display = 'none';
           endDraw();
           document.querySelector('.delete-feature-info').style.display = 'block';
@@ -933,7 +947,6 @@ <h5>待删除要素:</h5>
             geojsonFeatures.features.forEach(function(feature) {
               feature.properties.datasetName = datasetName;
             });
-            console.log('geojsonFeatures', geojsonFeatures, serviceResult, getFeatureParams);
               geojsonFeatures.features.forEach(function(feature) {
                 if (feature.id > datasetInfoList[datasetName].id) {
                   datasetInfoList[datasetName].id = feature.id;
@@ -974,6 +987,15 @@ <h5>待删除要素:</h5>
           });
           editFeaturesService.editFeatures(addFeatureParams, function (serviceResult) {
             if (serviceResult.result.succeed) {
+              var source = map.getSource(dataset);
+              var data = source._data;
+              deleteList[dataset].forEach((deleteId) => {
+                var idx = data.features.findIndex((feature) => {
+                  return feature.id === deleteId;
+                });
+                data.features.splice(idx, 1);
+              });
+              source.setData(data);
               widgets.alert.showAlert(resources.text_deleteSuccess, true);
             }
           });
@@ -986,8 +1008,12 @@ <h5>待删除要素:</h5>
           if (status === 'EDIT') {
             isChanged = true;
             if (res[0] && !['mapbox-gl-draw-cold', 'mapbox-gl-draw-hot'].indexOf(res[0].source) > -1) {
+              var source = map.getSource(res[0].source);
               var type = res[0].type;
-              var geometry = res[0].geometry;
+              var targetFeature = source._data.features.find(function(feature) {
+                return feature.id === res[0].id;
+              });
+              var geometry = targetFeature.geometry;
               var id = res[0].id;
               var properties = res[0].properties;
               var editFeature = {
@@ -996,8 +1022,10 @@ <h5>待删除要素:</h5>
                 id: id,
                 properties: properties
               };
-              var source = map.getSource(properties.datasetName);
               var layer = map.getLayer(properties.datasetName);
+              if (!layer) {
+                return;
+              }
               var allIds = source._data.features.map(function(feature) {
                 return feature.id;
               });
diff --git a/examples/maplibregl/drawAndEditFeatures.html b/examples/maplibregl/drawAndEditFeatures.html
index cb2f769bd..a31672351 100644
--- a/examples/maplibregl/drawAndEditFeatures.html
+++ b/examples/maplibregl/drawAndEditFeatures.html
@@ -6,10 +6,7 @@
   <head>
     <meta charset="UTF-8" />
     <title data-i18n="resources.title_editFeatures"></title>
-    <script type="text/javascript" include="draw" src="../../dist/maplibregl/include-maplibregl.js"></script>
-    <script src="../../dist/mapboxgl/mapbox-gl-draw-snap-mode.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js" integrity="sha512-EC3CQ+2OkM+ZKsM1dbFAB6OGEPKRxi6EDRnZW9ys8LghQRAq6cXPUgXCCujmDrXdodGXX9bqaaCRtwj4h4wgSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" integrity="sha512-za6IYQz7tR0pzniM/EAkgjV1gf1kWMlVJHBHavKIvsNoUMKWU99ZHzvL6lIobjiE2yKDAKMDSSmcMAxoiWgoWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script type="text/javascript" include="draw,snap" src="../../dist/maplibregl/include-maplibregl.js"></script>
     <style>
       .key-input,
       .value-input {
@@ -213,7 +210,7 @@
   <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
     <div id="map" style="width: 100%; height: 100%"></div>
     <div id="popup" class="ol-popup">
-      <p>按Tab键开始输入坐标值，回车键确定</p>
+      <p><span data-i18n="resources.msg_inputCoordinates"></span></p>
       <div id="popup-content">
         <h5>X</h5>
         <input class="input-element coordX" type="number">
@@ -229,7 +226,7 @@ <h5>Y</h5>
     </div>
     <div class="message">
       <span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
-      <span>有未完成的更改，请先保存或取消更改</span>
+      <span data-i18n="resources.msg_pleaseSaveFirst"></span>
     </div>
     <div class="edit-panel">
       <div class="button-group">
@@ -239,7 +236,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-plus" aria-hidden="true">新增要素</span>
+          <span class="glyphicon glyphicon-plus" aria-hidden="true"><span data-i18n="resources.text_addFeature"></span></span>
         </button>
         <button
           id="editFeature"
@@ -247,7 +244,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-edit" aria-hidden="true">编辑要素</span>
+          <span class="glyphicon glyphicon-edit" aria-hidden="true"><span data-i18n="resources.text_editFeature"></span></span>
         </button>
         <button
           id="deleteFeature"
@@ -255,72 +252,72 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-trash" aria-hidden="true">删除要素</span>
+          <span class="glyphicon glyphicon-trash" aria-hidden="true"><span data-i18n="resources.text_deleteFeature"></span></span>
         </button>
       </div>
       <div class="info-panel">
         <div class="add-feature-info">
-          <h4 class="into-title">新增要素</h4>
+          <h4 class="into-title"><span data-i18n="resources.text_addFeature"></span></h4>
           <div>
-            <h5>目标数据集</h5>
+            <h5><span data-i18n="resources.text_targetDataset"></span></h5>
             <select class="select-element addDatasetNameList" name="capital">
             </select>
           </div>
-          <h6><span class="line-element"></span>空间信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
-            <p class="desc-element">鼠标移动至地图绘制要素。</p>
+            <p class="desc-element"><span data-i18n="resources.msg_moveToMapDraw"></span></p>
           </div>
-          <h6><span class="line-element"></span>属性信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="add-attribute-info">
           </div>
           <div class="info-bottom">
-            <p class="add-tips">请先保存或取消更改</p>
-            <button class="btn btn-default btn-group-xs cancel-add">取消</button>
-            <button class="btn btn-primary btn-group-xs addSave">保存</button>
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
+            <button class="btn btn-default btn-group-xs cancel-add" data-i18n="resources.btn_cancel"></button>
+            <button class="btn btn-primary btn-group-xs addSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="edit-feature-info">
-          <h4 class="into-title">编辑要素<span class="dataset-info">数据集：<span class="edit-dataset"></span></span></h4>
-          <h6>空间信息</h6>
+          <h4 class="into-title"><span data-i18n="resources.text_editFeature"></span><span class="dataset-info"><span data-i18n="resources.text_dataset"></span>：<span class="edit-dataset"></span></span></h4>
+          <h6><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
           </div>
-          <h6>属性信息</h6>
+          <h6><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="edit-attribute-info">
           </div>
           <div class="info-bottom">
-            <p class="add-tips">请先保存或取消更改</p>
-            <button class="btn btn-default btn-group-xs cancel-edit">取消</button>
-            <button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
+            <button class="btn btn-default btn-group-xs cancel-edit" data-i18n="resources.btn_cancel"></button>
+            <button disabled class="btn btn-primary btn-group-xs editSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="delete-feature-info">
-          <h4 class="into-title">删除要素</h4>
-          <p class="desc-element">在地图上选择待删除的要素。</p>
+          <h4 class="into-title"><span data-i18n="resources.text_deleteFeature"></span></h4>
+          <p class="desc-element"><span data-i18n="resources.msg_selectDeleteFeature"></span></p>
           <div style="border-top: 1px solid #baafaf">
-            <h5>待删除要素:</h5>
+            <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
             <div class="delete-feature-list">
 
             </div>
           </div>
           <div class="info-bottom">
             <div class="delete-modal">
-              <p>删除后要素将无法恢复，是否确认删除？</p>
+              <p><span data-i18n="resources.msg_confirmDelete"></span></p>
               <div class="btns">
-                <button class="final-delete-cancel btn btn-default btn-group-xs">取消</button>
-                <button class="final-delete btn btn-danger btn-group-xs">删除</button>
+                <button class="final-delete-cancel btn btn-default btn-group-xs" data-i18n="resources.btn_cancel"></button>
+                <button class="final-delete btn btn-danger btn-group-xs"><span data-i18n="resources.text_input_value_delete"></span></button>
               </div>
             </div>
-            <button class="btn btn-default btn-group-xs cancel-delete">取消</button>
-            <button class="btn btn-danger btn-group-xs delete">删除</button>
+            <button class="btn btn-default btn-group-xs cancel-delete" data-i18n="resources.btn_cancel"></button>
+            <button class="btn btn-danger btn-group-xs delete"><span data-i18n="resources.text_input_value_delete"></span></button>
           </div>
         </div>
       </div>
-      <div class="edit-tips">在地图上点击要素进行选择。</div>
+      <div class="edit-tips"><span data-i18n="resources.msg_clickToSelect"></span></div>
     </div>
     </div>
-    <script type="text/javascript" include="jquery,bootstrap,widgets.alert" src="../js/include-web.js"></script>
+    <script type="text/javascript" include="jquery,bootstrap,widgets.alert,viewer" src="../js/include-web.js"></script>
     <script type="text/javascript">
       var status = 'ADD';
       var type = '';
@@ -328,11 +325,10 @@ <h5>待删除要素:</h5>
       var currentDataset = 'buildings_R';
       var map,
         draw,
-        // url = (window.isLocal ? window.server : "https://iserver.supermap.io") + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}';
-        url = "http://172.16.14.44:8090/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}";
-        var isUpdate = false;
-      var dataUrl = 'http://172.16.14.44:8090/iserver/services/data-Buildings/rest/data';
-      var dataSourceName = 'NewBuildings';
+        url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326";
+      var isUpdate = false;
+      var dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-building/rest/data";
+      var dataSourceName = 'building';
       var editFeaturesService = new maplibregl.supermap.FeatureService(dataUrl);
       var currentShowPanel = '';
       var datasetNameList = [];
@@ -563,7 +559,7 @@ <h5>待删除要素:</h5>
           datasetNameList = e.result.datasetNames;
           currentFeature.dataset = datasetNameList[0];
           currentDataset = datasetNameList[0];
-          // 获取所有数据集的类型
+          var count = 0;
           datasetNameList.forEach(function(datasetName, index) {
             filterFields[datasetName] = {};
             datasetService.getDataset(dataSourceName, datasetName, function(e) {
@@ -572,11 +568,12 @@ <h5>待删除要素:</h5>
               id: 0
             }
             typeMap[e.result.datasetInfo.type] && datasetTypeClassify[typeMap[e.result.datasetInfo.type]].push(datasetName);
+            count++;
             if (index === 0) {
               var editType = e.result.datasetInfo.type;
               createOptions(datasetNameList, document.querySelector('.addDatasetNameList'), editType, datasetNameList[0]);
             }
-            if (index === datasetNameList.length - 1) {
+            if (count === datasetNameList.length) {
               initFeature();
             }
           });
@@ -696,7 +693,7 @@ <h5>待删除要素:</h5>
           inputEle.value = properties[key];
           inputEle.label = key;
           item.appendChild(inputEle);
-          if (key === 'VIDEO') {
+          if (key === 'VIDEO' && properties[key]) {
             var videoPlayIcon = document.createElement('div');
             videoPlayIcon.className = 'playIcon';
             var video = document.createElement('video');
@@ -744,14 +741,29 @@ <h5>待删除要素:</h5>
         });
 
          // 切换状态
-        document.querySelector('.button-group').addEventListener('click', function(e) {
-          var className = e.target.className;
+         document.querySelector('#addFeature').addEventListener('click', function() {
           if (isChanged) {
             document.querySelector('.message').style.display = 'block';
             document.querySelector('.add-tips').style.display = 'inline-block';
             return;
           }
-          switchPanel(className);
+          switchPanel('add');
+        });
+        document.querySelector('#editFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('edit');
+        });
+        document.querySelector('#deleteFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('delete');
         });
 
         document.querySelector('.add-attribute-info').addEventListener('change', checkInput);
@@ -785,18 +797,19 @@ <h5>待删除要素:</h5>
         });
 
         document.querySelector('.cancel-edit').addEventListener('click', function() {
+          if (currentShowPanel) {
+              document.querySelector('.' + currentShowPanel).style.display = 'none';
+          }
           if (curEditOriginFeatures.length) {
             curEditOriginFeatures.forEach(function(feature) {
               map.setFilter(feature.properties.datasetName, null);
               draw.delete(feature.id);
             });
             curEditOriginFeatures = [];
-            if (currentShowPanel) {
-              document.querySelector('.' + currentShowPanel).style.display = 'none';
-            }
             document.querySelector('.message').style.display = 'none';
             document.querySelector('.add-tips').style.display = 'none';
             isChanged = false;
+            status = '';
           }
         });
 
@@ -816,13 +829,13 @@ <h5>待删除要素:</h5>
         }
         var type = datasetInfoList[currentDataset].type;
         var source = datasetInfoList[currentDataset].source;
-        if (className.indexOf('plus') > -1) {
+        if (className === 'add') {
           document.querySelector('.edit-tips').style.display = 'none';
           startDraw(type, source);
           document.querySelector('.add-feature-info').style.display = 'block';
           currentShowPanel = 'add-feature-info';
           status = 'ADD';
-        } else if (className.indexOf('edit') > -1) {
+        } else if (className === 'edit') {
           draw.changeMode('simple_select');
           if (fromAdd) {
             fillContent();
@@ -833,7 +846,7 @@ <h5>待删除要素:</h5>
           currentShowPanel = 'edit-feature-info';
           status = 'EDIT';
           startSelect(source);
-        } else if (className.indexOf('trash') > -1) {
+        } else if (className === 'delete') {
           document.querySelector('.edit-tips').style.display = 'none';
           endDraw();
           document.querySelector('.delete-feature-info').style.display = 'block';
@@ -975,6 +988,15 @@ <h5>待删除要素:</h5>
           });
           editFeaturesService.editFeatures(addFeatureParams, function (serviceResult) {
             if (serviceResult.result.succeed) {
+              var source = map.getSource(dataset);
+              var data = source._data;
+              deleteList[dataset].forEach((deleteId) => {
+                var idx = data.features.findIndex((feature) => {
+                  return feature.id === deleteId;
+                });
+                data.features.splice(idx, 1);
+              });
+              source.setData(data);
               widgets.alert.showAlert(resources.text_deleteSuccess, true);
             }
           });
@@ -987,8 +1009,12 @@ <h5>待删除要素:</h5>
           if (status === 'EDIT') {
             isChanged = true;
             if (res[0] && !['mapbox-gl-draw-cold', 'mapbox-gl-draw-hot'].indexOf(res[0].source) > -1) {
+              var source = map.getSource(res[0].source);
               var type = res[0].type;
-              var geometry = res[0].geometry;
+              var targetFeature = source._data.features.find(function(feature) {
+                return feature.id === res[0].id;
+              });
+              var geometry = targetFeature.geometry;
               var id = res[0].id;
               var properties = res[0].properties;
               var editFeature = {
@@ -997,8 +1023,10 @@ <h5>待删除要素:</h5>
                 id: id,
                 properties: properties
               };
-              var source = map.getSource(properties.datasetName);
               var layer = map.getLayer(properties.datasetName);
+              if (!layer) {
+                return;
+              }
               var allIds = source._data.features.map(function(feature) {
                 return feature.id;
               });
diff --git a/examples/openlayers/drawAndEditFeatures.html b/examples/openlayers/drawAndEditFeatures.html
index ed9c54933..40d1278d2 100644
--- a/examples/openlayers/drawAndEditFeatures.html
+++ b/examples/openlayers/drawAndEditFeatures.html
@@ -6,10 +6,7 @@
   <head>
     <meta charset="UTF-8" />
     <title data-i18n="resources.title_editFeatures"></title>
-    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js" integrity="sha512-EC3CQ+2OkM+ZKsM1dbFAB6OGEPKRxi6EDRnZW9ys8LghQRAq6cXPUgXCCujmDrXdodGXX9bqaaCRtwj4h4wgSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" integrity="sha512-za6IYQz7tR0pzniM/EAkgjV1gf1kWMlVJHBHavKIvsNoUMKWU99ZHzvL6lIobjiE2yKDAKMDSSmcMAxoiWgoWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script type="text/javascript" include="lodash" src="../../dist/ol/include-ol.js"></script>
     <style>
       .key-input,
       .value-input {
@@ -218,10 +215,10 @@
     </div>
     <div class="message">
       <span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
-      <span>有未完成的更改，请先保存或取消更改</span>
+      <span><span data-i18n="resources.msg_pleaseSaveFirst"></span></span>
     </div>
     <div id="popup" class="ol-popup">
-      <p>按Tab键开始输入坐标值，回车键确定</p>
+      <p><span data-i18n="resources.msg_inputCoordinates"></span></p>
       <div id="popup-content">
         <h5>X</h5>
         <input class="input-element coordX" type="number">
@@ -237,7 +234,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-plus" aria-hidden="true">新增要素</span>
+          <span class="glyphicon glyphicon-plus" aria-hidden="true"><span data-i18n="resources.text_addFeature"></span></span>
         </button>
         <button
           id="editFeature"
@@ -245,7 +242,7 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-edit" aria-hidden="true">编辑要素</span>
+          <span class="glyphicon glyphicon-edit" aria-hidden="true"><span data-i18n="resources.text_editFeature"></span></span>
         </button>
         <button
           id="deleteFeature"
@@ -253,84 +250,81 @@ <h5>Y</h5>
           type="button"
           class="btn btn-primary btn-group-xs"
         >
-          <span class="glyphicon glyphicon-trash" aria-hidden="true">删除要素</span>
+          <span class="glyphicon glyphicon-trash" aria-hidden="true"><span data-i18n="resources.text_deleteFeature"></span></span>
         </button>
       </div>
       <div class="info-panel">
         <div class="add-feature-info">
-          <h4 class="into-title">新增要素</h4>
+          <h4 class="into-title"><span data-i18n="resources.text_addFeature"></span></h4>
           <div>
-            <h5>目标数据集</h5>
+            <h5><span data-i18n="resources.text_targetDataset"></span></h5>
             <select class="select-element addDatasetNameList" name="capital">
             </select>
           </div>
-          <h6><span class="line-element"></span>空间信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
-            <p class="desc-element">鼠标移动至地图绘制要素。</p>
+            <p class="desc-element"><span data-i18n="resources.msg_moveToMapDraw"></span></p>
           </div>
-          <h6><span class="line-element"></span>属性信息</h6>
+          <h6><span class="line-element"></span><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="add-attribute-info">
           </div>
           <div class="info-bottom">
-            <p class="add-tips">请先保存或取消更改</p>
-            <button class="btn btn-default btn-group-xs cancel-add">取消</button>
-            <button class="btn btn-primary btn-group-xs addSave">保存</button>
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
+            <button class="btn btn-default btn-group-xs cancel-add" data-i18n="resources.btn_cancel"></button>
+            <button class="btn btn-primary btn-group-xs addSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="edit-feature-info">
-          <h4 class="into-title">编辑要素<span class="dataset-info">数据集：<span class="edit-dataset"></span></span></h4>
-          <h6>空间信息</h6>
+          <h4 class="into-title"><span data-i18n="resources.text_editFeature"></span><span class="dataset-info"><span data-i18n="resources.text_dataset"></span>：<span class="edit-dataset"></span></span></h4>
+          <h6><span data-i18n="resources.text_spacialInfo"></span></h6>
           <div class="space-info">
             <input class="input-element" type="text">
           </div>
-          <h6>属性信息</h6>
+          <h6><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="edit-attribute-info">
           </div>
           <div class="info-bottom">
-            <p class="add-tips">请先保存或取消更改</p>
-            <button class="btn btn-default btn-group-xs cancel-edit">取消</button>
-            <button disabled class="btn btn-primary btn-group-xs editSave">保存</button>
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
+            <button class="btn btn-default btn-group-xs cancel-edit" data-i18n="resources.btn_cancel"></button>
+            <button disabled class="btn btn-primary btn-group-xs editSave" data-i18n="resources.btn_save"></button>
           </div>
         </div>
         <div class="delete-feature-info">
-          <h4 class="into-title">删除要素</h4>
-          <p class="desc-element">在地图上选择待删除的要素。</p>
+          <h4 class="into-title"><span data-i18n="resources.text_deleteFeature"></span></h4>
+          <p class="desc-element"><span data-i18n="resources.msg_selectDeleteFeature"></span></p>
           <div style="border-top: 1px solid #baafaf">
-            <h5>待删除要素:</h5>
+            <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
             <div class="delete-feature-list">
-
             </div>
           </div>
           <div class="info-bottom">
-            <button class="btn btn-default btn-group-xs cancel-delete">取消</button>
+            <button class="btn btn-default btn-group-xs cancel-delete" data-i18n="resources.btn_cancel"></button>
             <div class="delete-modal">
-              <p>删除后要素将无法恢复，是否确认删除？</p>
+              <p><span data-i18n="resources.msg_confirmDelete"></span></p>
               <div class="btns">
-                <button class="final-delete-cancel btn btn-default btn-group-xs">取消</button>
-                <button class="final-delete btn btn-danger btn-group-xs">删除</button>
+                <button class="final-delete-cancel btn btn-default btn-group-xs" data-i18n="resources.btn_cancel"></button>
+                <button class="final-delete btn btn-danger btn-group-xs"><span data-i18n="resources.text_input_value_delete"></span></button>
               </div>
             </div>
-            <button class="btn btn-danger btn-group-xs delete">删除</button>
+            <button class="btn btn-danger btn-group-xs delete"><span data-i18n="resources.text_input_value_delete"></span></button>
           </div>
         </div>
       </div>
-      <div class="edit-tips">在地图上点击要素进行选择。</div>
+      <div class="edit-tips"><span data-i18n="resources.msg_clickToSelect"></span></div>
     </div>
     </div>
-    <script type="text/javascript" include="jquery,bootstrap,widgets.alert" src="../js/include-web.js"></script>
+    <script type="text/javascript" include="jquery,bootstrap,widgets.alert,viewer" src="../js/include-web.js"></script>
     <script type="text/javascript">
       var status = 'ADD';
       var type = '';
-      var uniqueId = 0;
       var currentDataset = 'buildings_R';
       var map,
         draw,
-        // url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326";
-        url = "http://172.16.14.44:8090/iserver/services/map-china400/rest/maps/China_4326";
+        url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326";
       var isUpdate = false;
-      var dataUrl = 'http://172.16.14.44:8090/iserver/services/data-Buildings/rest/data';
-      var dataSourceName = 'NewBuildings';
+      var dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-building/rest/data";
+      var dataSourceName = 'building';
       var editFeaturesService = new ol.supermap.FeatureService(dataUrl);
       var currentShowPanel = '';
       var datasetNameList = [];
@@ -512,18 +506,21 @@ <h5>待删除要素:</h5>
           currentFeature.dataset = datasetNameList[0];
           currentDataset = datasetNameList[0];
           // 获取所有数据集的类型
+          var count = 0;
           datasetNameList.forEach(function(datasetName, index) {
             filterFields[datasetName] = {};
             datasetService.getDataset(dataSourceName, datasetName, function(e) {
             datasetInfoList[datasetName] = {
-              type: e.result.datasetInfo.type
+              type: e.result.datasetInfo.type,
+              uniqueId: 0
             }
             typeMap[e.result.datasetInfo.type] && datasetTypeClassify[typeMap[e.result.datasetInfo.type]].push(datasetName);
+            count++;
             if (index === 0) {
               var editType = e.result.datasetInfo.type;
               createOptions(datasetNameList, document.querySelector('.addDatasetNameList'), editType, datasetNameList[0]);
             }
-            if (index === datasetNameList.length - 1) {
+            if (count === datasetNameList.length) {
               initFeature();
             }
           });
@@ -644,10 +641,9 @@ <h5>待删除要素:</h5>
           inputEle.className = 'input-element';
           inputEle.value = properties[key];
           inputEle.label = key;
-          // 系统字段
           inputEle.disabled = filterFields[currentFeature.dataset][key];
           item.appendChild(inputEle);
-          if (key === 'VIDEO') {
+          if (key === 'VIDEO' && properties[key]) {
             var videoPlayIcon = document.createElement('div');
             videoPlayIcon.className = 'playIcon';
             var video = document.createElement('video');
@@ -695,14 +691,29 @@ <h5>待删除要素:</h5>
         });
 
          // 切换状态
-        document.querySelector('.button-group').addEventListener('click', function(e) {
-          var className = e.target.className;
+        document.querySelector('#addFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('add');
+        });
+        document.querySelector('#editFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('edit');
+        });
+        document.querySelector('#deleteFeature').addEventListener('click', function() {
           if (isChanged) {
             document.querySelector('.message').style.display = 'block';
             document.querySelector('.add-tips').style.display = 'inline-block';
             return;
           }
-          switchPanel(className);
+          switchPanel('delete');
         });
 
         document.querySelector('.add-attribute-info').addEventListener('change', checkInput);
@@ -731,10 +742,15 @@ <h5>待删除要素:</h5>
             document.querySelector('.message').style.display = 'none';
             document.querySelector('.add-tips').style.display = 'none';
             isChanged = false;
+            endDraw();
+            clearInteraction();
           }
         });
 
         document.querySelector('.cancel-edit').addEventListener('click', function() {
+          if (currentShowPanel) {
+              document.querySelector('.' + currentShowPanel).style.display = 'none';
+            }
           if (cacheFeatures.length) {
             editedFeatures.forEach(function(feature) {
               currentSource.removeFeature(feature);
@@ -745,12 +761,10 @@ <h5>待删除要素:</h5>
             editedFeatures = [];
             cacheFeatures = [];
             currentFeature = {};
-            if (currentShowPanel) {
-              document.querySelector('.' + currentShowPanel).style.display = 'none';
-            }
             document.querySelector('.message').style.display = 'none';
             document.querySelector('.add-tips').style.display = 'none';
             isChanged = false;
+            clearInteraction();
           }
         });
 
@@ -761,6 +775,8 @@ <h5>待删除要素:</h5>
           if (currentShowPanel) {
             document.querySelector('.' + currentShowPanel).style.display = 'none';
           }
+          isChanged = false;
+          clearInteraction();
         });
       }
 
@@ -769,14 +785,14 @@ <h5>待删除要素:</h5>
           document.querySelector('.' + currentShowPanel).style.display = 'none';
         }
         var type = datasetInfoList[currentDataset].type;
-        if (className.indexOf('plus') > -1) {
+        if (className === 'add') {
           cacheFeatures = [];
           document.querySelector('.edit-tips').style.display = 'none';
           startDraw(type);
           document.querySelector('.add-feature-info').style.display = 'block';
           currentShowPanel = 'add-feature-info';
           status = 'ADD';
-        } else if (className.indexOf('edit') > -1) {
+        } else if (className === 'edit') {
           getDomains(currentDataset);
           endDraw();
           if (fromAdd) {
@@ -788,14 +804,14 @@ <h5>待删除要素:</h5>
           currentShowPanel = 'edit-feature-info';
           status = 'EDIT';
           startSelect();
-        } else if (className.indexOf('trash') > -1) {
+        } else if (className === 'delete') {
           cacheFeatures = [];
           document.querySelector('.edit-tips').style.display = 'none';
           endDraw();
           document.querySelector('.delete-feature-info').style.display = 'block';
           currentShowPanel = 'delete-feature-info';
           status = 'DELETE';
-          startSelect(true);
+          startSelect();
         }
       }
 
@@ -837,6 +853,9 @@ <h5>待删除要素:</h5>
       });
 
       function save(type) {
+        if (!currentFeature.data) {
+          return;
+        }
         var properties = {};
         var attributeElement = document.querySelector('.' + type + '-attribute-info');
         var listArr = Array.prototype.slice.call(attributeElement.children);
@@ -862,10 +881,8 @@ <h5>待删除要素:</h5>
       
 
       function initFeature() {
-        // 按照面 线 点的顺序渲染
         var featureService = new ol.supermap.FeatureService(dataUrl);
         var datasetOrder = [].concat(datasetTypeClassify['Polygon'], datasetTypeClassify['Line'], datasetTypeClassify['Point'])
-        // var datasetOrder = [].concat(datasetTypeClassify['Line'], datasetTypeClassify['Point']);
         var layer = addVectorLayer().layer;
         var source = addVectorLayer().source;
         datasetOrder.forEach(function(datasetName) {
@@ -884,8 +901,8 @@ <h5>待删除要素:</h5>
               features.forEach(function(feature) {
                 feature.set('dataset', datasetName);
                 if (feature.getId()) {
-                  uniqueId = feature.getId();
-                  feature.setId(feature.getId() + '');
+                  // uniqueId = feature.getId();
+                  feature.setId(datasetName + '_' + feature.getId() + '');
                 }
               });
               if (geojsonFeatures.features[0]) {
@@ -926,7 +943,6 @@ <h5>待删除要素:</h5>
           editFeaturesService.editFeatures(addFeatureParams, function (serviceResult) {
             if (serviceResult.result.succeed) {
               widgets.alert.showAlert(resources.text_deleteSuccess, true);
-              // 清空
               var features = currentSource.getFeatures();
               features.forEach(function(feature) {
                 var id = feature.getId();
@@ -937,6 +953,7 @@ <h5>待删除要素:</h5>
               });
               var deleteEle = document.querySelector('.delete-feature-list');
               deleteEle.innerHTML = '';
+              isChanged = false;
             }
           });
         });
@@ -976,7 +993,8 @@ <h5>待删除要素:</h5>
             if (deleteList[dataset].indexOf(props.id) > -1) {
               return;
             }
-            deleteList[dataset].push(props.id);
+            var arr = props.id.split('_');
+            deleteList[dataset].push(arr[arr.length -1]);
             var deleteItem = document.createElement('div');
             deleteItem.innerText = 'SMID: ' + props.id + ' (' + dataset + ')';
             var deleteEle = document.querySelector('.delete-feature-list');
@@ -1075,7 +1093,6 @@ <h5>待删除要素:</h5>
           map.removeInteraction(snap);
         }
       }
-
     </script>
   </body>
 </html>