代码拉取完成，页面将自动刷新
<!--********************************************************************
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* iclient-plot-leaflet (https://iclient.supermap.io/web/libs/plotting/leaflet/12.0.0.0/iclient-plot-leaflet.min.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_defaultStyle"></title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary"
style="position: absolute;top: 10px;right: 10px;text-align: center;z-index: 800;border-radius: 4px;">
<div class='panel-heading' id="panelheading">
<h5 class='panel-title text-center' data-i18n="resources.title_defaultStyle"></h5></div>
<div class='panel-body content' id="panelbodycontent">
<div class='panel'>
<div class='input-group' style="width: 220px;margin-bottom: 15px;">
<span class='input-group-addon' data-i18n="resources.text_lineWidth"></span>
<input type='text' class='form-control' id='lineWidth' value='2' onchange="lineWidthChanges()"/>
</div>
<div class='input-group' style="width: 220px;margin-bottom: 15px;">
<span class='input-group-addon' data-i18n="resources.text_lineType"></span>
<select class='form-control' id="lineStyle" onchange="lineStyleChanges()"></select>
</div>
<div class='input-group' style="width: 220px;margin-bottom: 15px;">
<span class='input-group-addon' data-i18n="resources.text_lineColor"></span>
<input type="text" id="lineColor" value="" class='form-control'/>
<span class='input-group-addon'><img src='../img/colorpicker.png' id="cp1"
style="cursor:pointer; z-index: 9999;"/></span>
</div>
<div class='input-group' style="width: 220px;margin-bottom: 15px;">
<span class='input-group-addon' data-i18n="resources.text_markerWidth"></span>
<input type='text' class='form-control' id='symbolWidth' value='40' onchange="symbolWidthChanges()"/>
</div>
<div class='input-group' style="width: 220px;margin-bottom: 15px;">
<span class='input-group-addon' data-i18n="resources.text_markerHeight"></span>
<input type='text' class='form-control' id='symbolHeight' value='40' onchange="symbolHeightChanges()"/>
</div>
<div class='input-group' style="width: 220px;margin-bottom: 15px;">
<span class='input-group-addon' data-i18n="resources.text_defaultStyle"></span>
<select class='form-control' id='defaultStyleFlag' onchange="defaultStyleFlagChanges()">
<option value='0'>false</option>
<option value='1'>true</option>
</select>
</div>
</div>
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_drawMarker" onclick="plotSymbol()"/>
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_cancelMarker" onclick="PlottingDrawCancel()"/>
</div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap-css,responsive,colorpicker" src="../js/include-web.js"></script>
<script type="text/javascript" include="iclient-leaflet-css,iclient-plot-leaflet"
src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var url = host + "/iserver/services/map-china/rest/maps/China_4326";
var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
var map, symbolLibManager, plotting;
var item = ["实线","长虚线","由点构成的直线","由线划线段组成的直线","由重复的线划点图案构成的直线"],
select, lineStyle;
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
center: [35,104],
maxZoom: 18,
zoom: 3
});
new 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);
plotting = L.supermap.plotting.getControl(map, serverUrl);
function loadSymbolLib() {
symbolLibManager = plotting.getSymbolLibManager();
symbolLibManager.on(SuperMap.Plot.Event.initializecompleted, initializeCompleted);
symbolLibManager.initializeAsync();
}
function initializeCompleted() {
initHtml();
}
function initHtml() {
document.getElementById("lineWidth").value = plotting.getDefaultStyle().lineWidth;
document.getElementById("lineStyle").value = item[0];
//document.getElementById("lineStyle").value = item[plotting.getDefaultStyle().lineType];
document.getElementById("lineColor").value = plotting.getDefaultStyle().lineColor;
document.getElementById("symbolWidth").value = plotting.getDefaultStyle().dotSymbolSize;
document.getElementById("symbolHeight").value = plotting.getDefaultStyle().dotSymbolSize;
if (plotting.getDefaultStyle().defaultFlag)
document.getElementById("defaultStyleFlag").value = 1;
else
document.getElementById("defaultStyleFlag").value = 0;
}
function selectLineType() {
var select = document.getElementById("lineStyle");
var type;
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].selected) {
type = select.children[i].value;
}
}
if (type === item[0]) {
lineStyle = 0;
}
else if (type === item[1]) {
lineStyle = 1;
}
else if (type === item[2]) {
lineStyle = 2;
}
else if (type === item[3]) {
lineStyle = 3;
}
else if (type === item[4]) {
lineStyle = 4;
}
var obj = new Object();
obj.selectValue = type;
obj.lineStyle = lineStyle;
return obj;
}
function lineWidthChanges() {
PlottingDrawCancel();
plotting.getDefaultStyle().lineWidth = document.getElementById("lineWidth").value;
}
function lineStyleChanges() {
PlottingDrawCancel();
var obj=selectLineType();
plotting.getDefaultStyle().lineType = obj.lineStyle;
}
function symbolWidthChanges() {
PlottingDrawCancel();
plotting.getDefaultStyle().dotSymbolSize = document.getElementById("symbolWidth").value;
document.getElementById("symbolHeight").value = plotting.getDefaultStyle().dotSymbolSize;
}
function symbolHeightChanges() {
PlottingDrawCancel();
plotting.getDefaultStyle().dotSymbolSize = document.getElementById("symbolHeight").value;
document.getElementById("symbolWidth").value = plotting.getDefaultStyle().dotSymbolSize;
}
function defaultStyleFlagChanges() {
PlottingDrawCancel();
if (document.getElementById("defaultStyleFlag").selectedIndex === 0) {
plotting.getDefaultStyle().defaultFlag = false;
} else {
plotting.getDefaultStyle().defaultFlag = true;
}
}
function plotSymbol() {
drawControl.handler.serverUrl = serverUrl;
drawControl.handler.libID = 421;
drawControl.handler.code = 20100;
drawControl.handler.enable();
}
function PlottingDrawCancel() {
drawControl.handler.disable();
}
function PlottingClear() {
plottingLayer.removeAllFeatures();
}
$(document).ready(function () {
$("#cp1").colorpicker({
ishex: true,
fillcolor: true,
event: 'mouseover',
target: $("#lineColor"),
success: lineColorChanges
});
$("#_creset").css("font-size", "12px");
$("#_creset").css("padding-right", "20px");
$("#colorpanel").css({"z-index": "9999"});
});
function lineColorChanges() {
PlottingDrawCancel();
plotting.getDefaultStyle().lineColor = document.getElementById("lineColor").value;
}
window.onload = function () {
select = document.getElementById("lineStyle");
for (var i = 0, len = item.length; i < len; i++) {
var options = document.createElement("option");
options.setAttribute("value", item[i]);
options.innerHTML = item[i];
select.appendChild(options);
}
loadSymbolLib();
};
$(document).ready(function(){
$('#panelheading').click(function(){
$('#panelbodycontent').toggle();
});
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手