Skip to content

Commit 56cb6d6

Browse files
songyumengsongyumeng
committed
更新例子
1 parent cae6f94 commit 56cb6d6

File tree

1 file changed

+184
-1
lines changed

1 file changed

+184
-1
lines changed

‎examples/leaflet/plot_symbolExtendProperty.html

Lines changed: 184 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,184 @@
1-
<!--********************************************************************* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.*********************************************************************--><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title data-i18n="resources.title_symbolExtendProperty"></title></head><body style=" overflow: hidden;width: 100%;height:100%;position: absolute;top: 0;"><div id="toolbar" class="panel panel-primary" style="position: absolute;top: 15px;right: 10px;width: 220px;text-align: center;z-index: 9999;border-radius: 4px;"> <div class='panel-heading'> <h5 class='panel-title text-center' data-i18n="resources.title_symbolExtendProperty"></h5></div> <div class='panel-body content'> <div class='panel'> <div class='input-group' style="margin-bottom: 15px;"> <span class='input-group-addon' data-i18n="resources.text_propertyName"></span> <input class='form-control' id='propertyName' value=''/> </div> <div class='input-group' style="margin-bottom: 15px;"> <span class='input-group-addon' data-i18n="resources.text_propertyValue"></span> <input class='form-control' id='propertyValue' value=''/> </div> </div> <input id="btn" type="button" class="btn btn-default" data-i18n="[value]resources.btn_addProperty" onclick="addExtendProperty()"/> </div></div><div id="popupWin" class="panel panel-primary popupWindow" style=" position: absolute;right: 10px;top: 247px;width: 220px;background: #FFF;z-index: 9999;display: block;"> <div class="winTitle" style=" background: #1E90FF;"> <span class="title_left" data-i18n="resources.title_symbolExtendProperty"></span> </div> <div id="extendProperty" class="winContent" style=" padding: 5px;overflow-y: auto;height: 300px;"></div></div><div id="map" style="margin:0 auto;width: 100%;height: 100%"></div><script type="text/javascript" include="bootstrap,widgets.alert,jquery" src="../js/include-web.js"></script><script type="text/javascript" include="iclient9-leaflet-css,iclient9-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script><script type="text/javascript"> var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090"; var url = host + "/iserver/services/map-china400/rest/maps/China_4326"; var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/"; var map; map = L.map('map', { preferCanvas: true, crs: L.CRS.EPSG4326, center: [0, 0], zoom: 2, maxZoom: 18 }); L.supermap.tiledMapLayer(url).addTo(map); var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl); plottingLayer.addTo(map); var drawControl = L.supermap.plotting.drawControl(plottingLayer); drawControl.addTo(map); var editControl = L.supermap.plotting.editControl(); editControl.addTo(map); var plotting = L.supermap.plotting.getControl(map, serverUrl); function plotSymbol(){ //标绘多边形 var polygonPoints = []; polygonPoints.push(L.latLng(0,-20)); polygonPoints.push(L.latLng(20,-10)); polygonPoints.push(L.latLng(40,-30)); polygonPoints.push(L.latLng(10,-60)); plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL, polygonPoints); //标绘折线 var linePoints = []; linePoints.push(L.latLng(0, 0)); linePoints.push(L.latLng(20, 0)); linePoints.push(L.latLng(10,20)); linePoints.push(L.latLng(30,10)); plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.POLYLINESYMBOL, linePoints); //标绘点 var dotPoints = []; dotPoints.push(L.latLng(8.3515625,-75.96875)); plottingLayer.createSymbol(421, 9, dotPoints,{symbolType:SuperMap.Plot.SymbolType.DOTSYMBOL}); } editControl.on(SuperMap.Plot.Event.featuresselected, function(event){ showExtendProperty(event); }); editControl.on(SuperMap.Plot.Event.featuresunselected, function(event){ showExtendProperty(event); }); function addExtendProperty() { widgets.alert.clearAlert(); var key = document.getElementById("propertyName").value; var value = document.getElementById("propertyValue").value; if ("" === key || "" === value) { return; } var layers = editControl.getSelectedFeatures(); if (0 === layers.length) { widgets.alert.showAlert("请选择您要编辑的标号！",true); return; } var extendProperty = layers[0].getExtendProperty(); extendProperty.addProperty(key, value); showExtendProperty(); } function showExtendProperty() { document.all.extendProperty.innerHTML = ""; //获取选中的对象 var layers = editControl.getSelectedFeatures(); if (0 === layers.length) { return; } var extendProperty = layers[0].getExtendProperty(); var nPropertyCount = extendProperty.getPropertyCount(); if (0 === nPropertyCount) { return; } var container = document.getElementById("extendProperty"); var table = document.createElement("table"); var body = document.createElement("tbody"); table.setAttribute("border", "1"); table.setAttribute("borderColor", "black"); table.setAttribute("width", "100%"); var tr = document.createElement("tr"); //添加属性名 var td_Name = document.createElement("th"); var text_Name = document.createTextNode("属性名"); td_Name.appendChild(text_Name); tr.appendChild(td_Name); //添加属性值 var td_Value = document.createElement("th"); var text_Value = document.createTextNode("属性值"); td_Value.appendChild(text_Value); tr.appendChild(td_Value); body.appendChild(tr); for (var i = 0; i < nPropertyCount; i++) { var property = extendProperty.getPropertyByIndex(i); if (null === property) { continue; } var _tr = document.createElement("tr"); //添加属性名 var td_PropertyName = document.createElement("td"); var text_propertyName = document.createTextNode(property.getKey()); td_PropertyName.appendChild(text_propertyName); _tr.appendChild(td_PropertyName); //添加属性值 var td_PropertyValue = document.createElement("td"); var text_propertyValue = document.createTextNode(property.getValue()); td_PropertyValue.appendChild(text_propertyValue); _tr.appendChild(td_PropertyValue); body.appendChild(_tr); } table.appendChild(body); container.appendChild(table); } window.onload = function(){ plotSymbol(); };</script></body></html>
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
7+
<head>
8+
<meta charset="UTF-8">
9+
<title data-i18n="resources.title_symbolExtendProperty"></title>
10+
</head>
11+
12+
<body style=" overflow: hidden;width: 100%;height:100%;position: absolute;top: 0;">
13+
<div id="toolbar" class="panel panel-primary" style="position: absolute;top: 15px;right: 10px;width: 220px;text-align: center;z-index: 9999;border-radius: 4px;">
14+
<div class='panel-heading'>
15+
<h5 class='panel-title text-center' data-i18n="resources.title_symbolExtendProperty"></h5>
16+
</div>
17+
<div class='panel-body content'>
18+
<div class='panel'>
19+
<div class='input-group' style="margin-bottom: 15px;">
20+
<span class='input-group-addon' data-i18n="resources.text_propertyName"></span>
21+
<input class='form-control' id='propertyName' value='' />
22+
</div>
23+
<div class='input-group' style="margin-bottom: 15px;">
24+
<span class='input-group-addon' data-i18n="resources.text_propertyValue"></span>
25+
<input class='form-control' id='propertyValue' value='' />
26+
</div>
27+
</div>
28+
<input id="btn" type="button" class="btn btn-default" data-i18n="[value]resources.btn_addProperty" onclick="addExtendProperty()" />
29+
</div>
30+
</div>
31+
<div id="popupWin" class="panel panel-primary popupWindow" style=" position: absolute;right: 10px;top: 247px;width: 220px;background: #FFF;z-index: 9999;display: block;">
32+
<div class="winTitle" style=" background: #1E90FF;">
33+
<span class="title_left" data-i18n="resources.title_symbolExtendProperty"></span>
34+
</div>
35+
<div id="extendProperty" class="winContent" style=" padding: 5px;overflow-y: auto;height: 300px;"></div>
36+
</div>
37+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
38+
<script type="text/javascript" include="bootstrap,widgets.alert,jquery" src="../js/include-web.js"></script>
39+
<script type="text/javascript" include="iclient9-leaflet-css,iclient9-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
40+
<script type="text/javascript">
41+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
42+
var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
43+
var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
44+
var map;
45+
map = L.map('map', {
46+
preferCanvas: true,
47+
crs: L.CRS.EPSG4326,
48+
center: [0, 0],
49+
zoom: 2,
50+
maxZoom: 18
51+
});
52+
L.supermap.tiledMapLayer(url).addTo(map);
53+
var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
54+
plottingLayer.addTo(map);
55+
var drawControl = L.supermap.plotting.drawControl(plottingLayer);
56+
drawControl.addTo(map);
57+
var editControl = L.supermap.plotting.editControl();
58+
editControl.addTo(map);
59+
var plotting = L.supermap.plotting.getControl(map, serverUrl);
60+
61+
function plotSymbol() {
62+
//标绘多边形
63+
var polygonPoints = [];
64+
polygonPoints.push(L.latLng(0, -20));
65+
polygonPoints.push(L.latLng(20, -10));
66+
polygonPoints.push(L.latLng(40, -30));
67+
polygonPoints.push(L.latLng(10, -60));
68+
plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL, polygonPoints);
69+
70+
//标绘折线
71+
var linePoints = [];
72+
linePoints.push(L.latLng(0, 0));
73+
linePoints.push(L.latLng(20, 0));
74+
linePoints.push(L.latLng(10, 20));
75+
linePoints.push(L.latLng(30, 10));
76+
plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.POLYLINESYMBOL, linePoints);
77+
78+
//标绘点
79+
var dotPoints = [];
80+
dotPoints.push(L.latLng(8.3515625, -75.96875));
81+
plottingLayer.createSymbol(421, 9, dotPoints, {
82+
symbolType: SuperMap.Plot.SymbolType.DOTSYMBOL
83+
});
84+
}
85+
86+
editControl.on(SuperMap.Plot.Event.featuresselected, function (event) {
87+
showExtendProperty(event);
88+
});
89+
editControl.on(SuperMap.Plot.Event.featuresunselected, function (event) {
90+
showExtendProperty(event);
91+
});
92+
93+
function addExtendProperty() {
94+
widgets.alert.clearAlert();
95+
var key = document.getElementById("propertyName").value;
96+
var value = document.getElementById("propertyValue").value;
97+
if ("" === key || "" === value) {
98+
return;
99+
}
100+
101+
var layers = editControl.getSelectedFeatures();
102+
if (0 === layers.length) {
103+
widgets.alert.showAlert("请选择您要编辑的标号！", true);
104+
return;
105+
}
106+
107+
var extendProperty = layers[0].getExtendProperty();
108+
extendProperty.addProperty(key, value);
109+
110+
showExtendProperty();
111+
}
112+
113+
function showExtendProperty() {
114+
document.all.extendProperty.innerHTML = "";
115+
116+
//获取选中的对象
117+
var layers = editControl.getSelectedFeatures();
118+
if (0 === layers.length) {
119+
return;
120+
}
121+
var extendProperty = layers[0].getExtendProperty();
122+
123+
var nPropertyCount = extendProperty.getPropertyCount();
124+
if (0 === nPropertyCount) {
125+
return;
126+
}
127+
128+
var container = document.getElementById("extendProperty");
129+
var table = document.createElement("table");
130+
var body = document.createElement("tbody");
131+
table.setAttribute("border", "1");
132+
table.setAttribute("borderColor", "black");
133+
table.setAttribute("width", "100%");
134+
135+
var tr = document.createElement("tr");
136+
137+
//添加属性名
138+
var td_Name = document.createElement("th");
139+
var text_Name = document.createTextNode("属性名");
140+
td_Name.appendChild(text_Name);
141+
tr.appendChild(td_Name);
142+
143+
//添加属性值
144+
var td_Value = document.createElement("th");
145+
var text_Value = document.createTextNode("属性值");
146+
td_Value.appendChild(text_Value);
147+
tr.appendChild(td_Value);
148+
body.appendChild(tr);
149+
150+
for (var i = 0; i < nPropertyCount; i++) {
151+
var property = extendProperty.getPropertyByIndex(i);
152+
if (null === property) {
153+
continue;
154+
}
155+
156+
var _tr = document.createElement("tr");
157+
158+
//添加属性名
159+
var td_PropertyName = document.createElement("td");
160+
var text_propertyName = document.createTextNode(property.getKey());
161+
td_PropertyName.appendChild(text_propertyName);
162+
_tr.appendChild(td_PropertyName);
163+
164+
//添加属性值
165+
var td_PropertyValue = document.createElement("td");
166+
var text_propertyValue = document.createTextNode(property.getValue());
167+
td_PropertyValue.appendChild(text_propertyValue);
168+
_tr.appendChild(td_PropertyValue);
169+
170+
171+
body.appendChild(_tr);
172+
}
173+
174+
table.appendChild(body);
175+
container.appendChild(table);
176+
}
177+
178+
window.onload = function () {
179+
plotSymbol();
180+
};
181+
</script>
182+
</body>
183+
184+
</html>

0 commit comments

Comments
 (0)