超图js版本矢量图层加载点要素单击弹出信息框

程序员文章站 2022-06-01 23:20:12

...

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点</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, vector,
host = "http://localhost:8090";
url = host + "/iserver/services/map-china400/rest/maps/China";
function init(){
//初始化地图
map = new SuperMap.Map("map",{controls:[
new SuperMap.Control.Navigation() ,
new SuperMap.Control.Zoom()
]});
map.addControl(new SuperMap.Control.MousePosition());
//初始化图层
layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
//监听图层信息加载完成事件
layer.events.on({ "layerInitialized": addLayer });

vector = new SuperMap.Layer.Vector("vector层");
var callbacks = {
    click: function (currentFeature) {
        closeInfoWin();
        var popup = new SuperMap.Popup.FramedCloud("popwin",
        new SuperMap.LonLat(0, 0),
        null,
        "鼠标点击测试点Demo! ",
        null,
        true);
        infowin = popup;
        map.addPopup(popup);
    }
};
var selectFeature = new SuperMap.Control.SelectFeature(vector,
{
    callbacks: callbacks
});
map.addControl(selectFeature);
selectFeature.activate();
}
//异步加载图层
function addLayer(){
    map.addLayer(layer);    
    map.addLayer(vector);
    map.setCenter(new SuperMap.LonLat(0, 0), 1);
    addPoint();
}

function addPoint() {
    vector.removeAllFeatures();
    //点对象
    var point = new SuperMap.Geometry.Point(0, 0);
    var pointVector = new SuperMap.Feature.Vector(point);
    pointVector.style = {
        fillColor: "green",
        strokeColor: "yellow",
        pointRadius: 10
    };
    vector.addFeatures([pointVector]);
}

var infowin = null;
function closeInfoWin() {
    if (infowin) {
        try {
            infowin.hide();
            infowin.destroy();
        }
        catch (e) { }
    }
}
</script>
</head>
<body onLoad = "init()">
<div id = "map"></div>
</body>
</html>

var callbacks定义回调函数；
SuperMap.Popup.FramedCloud，弹出信息框类；

var selectFeature = new SuperMap.Control.SelectFeature(vector,
{
callbacks: callbacks
});
把能用鼠标选择的图层添加进要素选择控件的选择列表；
SuperMap.Control.SelectFeature，超图js要素选择控件；

map.addControl(selectFeature);
selectFeature.activate();
把要素选择控件添加到map；**要素选择控件；

closeInfoWin()是为了点击时关闭前一个弹出框，再打开新的；

在此例子基础上进行；

https://blog.csdn.net/bcbobo21cn/article/details/89085909

iServer服务要先启动；否则地图不会出来；

上一篇： JS实现页面弹出登录框，点击页面后登录框消失

下一篇：小型学生管理系统的架构设计