参考资源超图地理信息云门户-示例:
http://www.supermapcloud.com/online/developAPI.html
上代码:
-
<p><!DOCTYPE html>
-
<html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script src="libs/SuperMap.Include.js"></script>
-
<script type="text/javascript">
-
var map, layer, popup;
-
var featuresLayer, drawLine, drawPoint, drawPolygon, selectDrawFeature;
-
var drawFeatureStyle = {
-
strokeColor: null,
-
strokeWidth: null,
-
strokeOpacity: null,
-
pointRadius: 6,
-
fillColor: null,
-
fillOpacity: null,
-
cursor: "pointer"
-
};//定义要添加要素的样式
-
var selectStyle = {
-
strokeColor: "#0099FF",
-
strokeWidth: 2,
-
pointerEvents: "visiblePainted",
-
fillColor: "#FF8247",
-
fillOpacity: 0.4,
-
pointRadius: 6,
-
label: "",
-
fontSize: 14,
-
fontWeight: "normal",
-
cursor: "pointer"
-
};// 点击添加的元素之后的样式
-
// 设置访问的GIS服务地址
-
var url = "<a target="_blank" href="http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest">http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest</a>";
-
function GetMap() {
-
// 创建地图对象
-
map = new SuperMap.Map("map");
-
//control = new SuperMap.Control.MousePosition(); //该控件显示鼠标移动时,所在点的地理坐标。
-
//map.addControl(control); //添加控件
-
featuresLayer = new SuperMap.Layer.Vector("<a target="_blank" href="mailto:test!@#');//">test!@#");//</a> test!@# 是图层的name属性
-
drawLine = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Path, { multi: true });
-
drawLine.events.on({ "featureadded": drawCompleted });
-
drawPoint = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Point, { multi: true });
-
drawPoint.events.on({ "featureadded": drawCompleted });
-
drawPolygon = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Polygon, { multi: true });
-
drawPolygon.events.on({ "featureadded": drawCompleted });
-
map.addControls([drawLine, drawPoint, drawPolygon]);
-
map.addLayer(featuresLayer);
-
// 创建图层对象
-
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
-
layer.events.on({ "layerInitialized": AddLayer });
-
}
-
// 加载图层
-
function AddLayer() {
-
// 向Map添加图层
-
map.addLayer(layer);
-
map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);</p><p> featuresLayer.events.register("mouseover", "", getTest, true);
-
featuresLayer.events.register("mouseout", "", getTest1, true);
-
}
-
function getTest(e) {
-
var ee = e.object;
-
var eee = e.target;
-
var current_feature = ee.getFeatureById(eee._featureId);
-
current_feature.style = selectStyle;
-
featuresLayer.redraw();</p><p> var name;
-
if (current_feature.geometry.CLASS_NAME == "SuperMap.Geometry.MultiPoint") {
-
name = "标注点";
-
} else if (current_feature.geometry.CLASS_NAME == "SuperMap.Geometry.MultiPolygon") {
-
name = "标注面"
-
} else {
-
name = "标注线"
-
}
-
popup = new SuperMap.Popup.FramedCloud("chicken",
-
current_feature.geometry.getBounds().getCenterLonLat(),
-
null,
-
name,
-
null, true);
-
current_feature.popup = popup;
-
popup.panMapIfOutOfView = true;
-
map.addPopup(popup);
-
}
-
function getTest1(e) {
-
var ee = e.object;
-
var eee = e.target;
-
ee.getFeatureById(eee._featureId).style = drawFeatureStyle;
-
featuresLayer.redraw();
-
map.removePopup(ee.getFeatureById(eee._featureId).popup);
-
ee.getFeatureById(eee._featureId).popup.destroy();
-
ee.getFeatureById(eee._featureId).popup = null;
-
}
-
function drawFeature(type) {
-
var fillColor = document.getElementById("color1").value;
-
var strokeColor = document.getElementById("color2").value;
-
var opacity = document.getElementById("txtOpacity").value;
-
var lineWidth = document.getElementById("txtLineWidth").value;
-
drawFeatureStyle.fillColor = fillColor;
-
drawFeatureStyle.strokeColor = strokeColor;
-
drawFeatureStyle.strokeWidth = lineWidth;
-
drawFeatureStyle.strokeOpacity = opacity;
-
drawFeatureStyle.fillOpacity = opacity;
-
if (type === "point") {
-
drawPoints();
-
}
-
else if (type === "line") {
-
drawLines();
-
}
-
else if (type === "polygon") {
-
drawPolygons();
-
}
-
}
-
function drawPoints() {
-
featuresLayer.style = drawFeatureStyle;
-
drawPoint.activate();
-
}
-
function drawLines() {
-
featuresLayer.style = drawFeatureStyle;
-
drawLine.activate();
-
}
-
function drawPolygons() {
-
featuresLayer.style = drawFeatureStyle;
-
drawPolygon.activate();
-
}
-
function drawCompleted(e) {
-
drawLine.deactivate();
-
drawPoint.deactivate();
-
drawPolygon.deactivate();
-
}
-
function clearAll() {
-
featuresLayer.removeAllFeatures();
-
}
-
</script>
-
</head>
-
<body onload="GetMap()">
-
<div>
-
<img alt="点" src="resource/controlImages/drawPoint.png" onclick="drawFeature('point')" />
-
<img alt="线" src="resource/controlImages/drawLine.png" onclick="drawFeature('line')" />
-
<img alt="面" src="resource/controlImages/drawRegion.png" onclick="drawFeature('polygon')" />
-
<img alt="清除" src="resource/controlImages/eraser.png" onclick="clearAll()" />
-
</div>
-
<div>
-
<table style="font-size: 12px">
-
<tr>
-
<td>
-
填充颜色:
-
</td>
-
<td>
-
<input type="text" size="10" id="color1" maxlength="7" name="rgb1" value="#FFFFFF"
-
onclick="showColorPicker(this, document.forms[0].rgb1)"/>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
填充透明度:
-
</td>
-
<td>
-
<select id="txtOpacity">
-
<option value="0.1">0.1</option>
-
<option value="0.2">0.2</option>
-
<option value="0.3">0.3</option>
-
<option value="0.4">0.4</option>
-
<option value="0.5" selected="selected">0.5</option>
-
<option value="0.6">0.6</option>
-
<option value="0.7">0.7</option>
-
<option value="0.8">0.8</option>
-
<option value="0.9">0.9</option>
-
<option value="1.0">1.0</option>
-
</select>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
线宽:
-
</td>
-
<td>
-
<input type="text" id="txtLineWidth" style="width: 50px" value="2" />
-
</td>
-
</tr>
-
<tr>
-
<td>
-
边线颜色:
-
</td>
-
<td>
-
<input type="text" size="10" id="color2" maxlength="7" name="rgb2" value="#FF0000"
-
onclick="showColorPicker(this, document.forms[0].rgb2)"/>
-
</td>
-
</tr>
-
</table></p><p>
-
</div>
-
<div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>
-
</body>
-
</html>
-
</p>
-
推荐阅读:
【免费】免费分享全国省级与市级行政区划啦!
【免费】百度网盘可免费下载全国高清卫星影像啦!
【免费】百度网盘可免费下载全国30米SRTM高程啦!
【免费】免费从网盘下载的影像和高程DEM如何使用?
【说明】如何利用免费地图数据构建一个离线三维地球?
【说明】DAT与IDX格式文件如何打开?
【说明】如何免费下载高清卫星影像地图?
【说明】22.3TB全国1-20级卫星影像终于出炉!
【亲测】干货:全球73.9TB卫星影像是如何下载的?
【说明】《全国12.5米高程DEM原始数据2.0》发布!
【说明】12.5m、30m、90m 高程数据详细对比说明!
【Cesium】在开源地球 Cesium 离线加载影像和高程!
【ArcMap】在ArcMap中离线加载海量卫星影像的方法!
【说明】《地图发布服务中间件》for Linux 发布!
【GoogleMap API for JS】最新版GoogleMap API 离线源码下载技术!
【亲测】全球卫星影像的大字体挂图打印制作方法
长按关注水经注,我们与你更近一步
地图下载|地图发布|系统部署|定制研发
请拔打24小时热线:400-028-0050