超图js版本在地图上使用图标标记地理点

最新推荐文章于 2023-11-14 14:33:25 发布

bcbobo21cn

最新推荐文章于 2023-11-14 14:33:25 发布

阅读量1.3k

点赞数

分类专栏： GIS 文章标签： SuperMap marker

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/89427017

版权

GIS 专栏收录该内容

167 篇文章 21 订阅

订阅专栏

效果；

项目结构；

代码；

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="marker1.aspx.cs" Inherits="marker_marker1" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标记图层Demo1</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #fff;
}
#map{
position: relative;
height: 553px;
border:1px solid #3473b7;
}
</style>
<link href='../css/bootstrap.min.css' rel='stylesheet' />
<link href='../css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src = '../libs/SuperMap.Include.js'></script>
<script type="text/javascript">
var map,layer, markerlayer ,marker,
host = "http://localhost:8090";
url = host + "/iserver/services/map-china400/rest/maps/China";

function init()
{
map = new SuperMap.Map("map",{controls:[
new SuperMap.Control.Zoom() ,
new SuperMap.Control.Navigation() ,
new SuperMap.Control.LayerSwitcher()
]
});
map.addControl(new SuperMap.Control.MousePosition());
layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
layer.events.on({"layerInitialized":addLayer});
markerlayer = new SuperMap.Layer.Markers("卡通小人标记层");
addktxr();
}
function addLayer(){

map.addLayers([layer,markerlayer]);
//显示地图范围
map.setCenter(new SuperMap.LonLat(0,0), 0);

}
//添加标记
function addktxr()
{
markerlayer.removeMarker(marker);
var size = new SuperMap.Size(88,66);
var offset = new SuperMap.Pixel(-(size.w/2), -size.h);
var icon = new SuperMap.Icon('../images/ktxr1.jpg', size, offset);
marker =new SuperMap.Marker(new SuperMap.LonLat(116.3,39.9),icon) ;
markerlayer.addMarker(marker);
}
</script>
</head>
<body onload="init()" >
<div id="map"></div>

</body>
</html>

new SuperMap.Control.Zoom() ,
new SuperMap.Control.Navigation() ,
new SuperMap.Control.LayerSwitcher()

这几个是往地图上加的控件；缩放，导航，图层控件；

缩放控件是左上角加减号那个；图层控件显示当前有2个图层：卡通小人标记层，World；

markerlayer = new SuperMap.Layer.Markers("卡通小人标记层");

定义一个marker层，双引号里面是图层名称；

map.addLayers([layer,markerlayer]);

添加2个图层；

marker =new SuperMap.Marker(new SuperMap.LonLat(116.3,39.9),icon) ;
markerlayer.addMarker(marker);

先定义icon的大小，偏移，然后用经纬度和icon构造一个marker；然后把marker加到markerlayer层；

可以使用任何图标来标识地理信息上有意义的点；按自己的需要；可根据自己需要标记多个点；

bcbobo21cn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
超图js版本在地图上使用图标标记地理点

效果；项目结构；代码；<%@ Page Language="C#" AutoEventWireup="true" CodeFile="marker1.aspx.cs" Inherits="marker_marker1" %><!DOCTYPE html><html><head><meta charset="utf...
复制链接

扫一扫

专栏目录