supermap学习系列（七）——用户自己在地图上添加点、线、面标注

最新推荐文章于 2023-12-04 14:46:52 发布
VIP文章 最新推荐文章于 2023-12-04 14:46:52 发布
阅读量1.5w 收藏 12
点赞数 2
分类专栏： 超图 文章标签： supermap 地图 标注 移动或者单击 点线面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duyelang/article/details/20473235
版权

学习笔记，方便以后查阅。参考资源超图地理信息云门户-示例：http://www.supermapcloud.com/online/developAPI.html

上代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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 = "http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest";
        function GetMap() {
            // 创建地图对象
            map = new SuperMap.Map("map");
            //control = new SuperMap.Control.MousePosition();     //该控件显示鼠标移动时，所在点的地理坐标。
            //map.addControl(control);  //添加控件  
            featuresLayer = new SuperMap.Layer.Vector("  test!@#  是图层的name属性
            drawLine = new SuperMap.Contro
最低0.47元/天 解锁文章
duyelang
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SuperMap地图中添加动态点的三种方法
01-07
文档总结了在SuperMap iCient for js的开发中，如何在各种图层类型中添加动态图或动态点的方法。有代码实例~
超图桌面版创建基本三维对象（点、线、面、体、粒子系统）的基本操作
luoluo95的博客
05-16 1414
在文件型数据源，新建 三维点 类型的数据集； 通过下拉选择创建类型，再创建三维线和三维面类型的数据集； 添加到场景；并使图层可编辑；可编辑的图层在其名称前面有一个铅笔的标示； 名称前，第一个标示是像眼睛的，这是使图层可见或不可见；第三个标示是铅笔； 选中三维点类型的图层时，对象绘制菜单下的 三维点 菜单可用， 用鼠标选中该菜单，绘制一些点对象如下；如有问题多操作几次；一般是点右键结束绘制； 用鼠标选中一个点， 可查看其属性； 选中 三维线 类型的图层，对...
SuperMap iMobile for iOS 点击屏幕添加点标注
12-15
在实际项目中经常需要向地图中添加一些标注信息，本范例将示范在iOS中通过点击屏幕，向地图中添加点标注。
SuperMap iDesktop 7C 指定距离为线数据集添加节点
12-14
生成的路由数据集有时候需要转换为线数据集进行使用，本范例将示范如何在SuperMap iDesktop 7C中将路由数据集转换为线数据集。
SuperMap Objects Java线对象添加节点
12-07
本范例在Objects Java中实现了对象编辑的操作中的线对象增加节点的功能。线上添加节点的方式跟Deskpro里面一样，线外添加节点，是鼠标点击一个点，然后将这个节点插入到离它最近的两个节点之间，并构建为一个新的线对象。
supermap for android移动端离线地图显示及添加自定义坐标点和自定义点符号
wangwhe的博客
12-04 1699
首先显示离线地图就不多说了，supermap官方实例里面有，本文主要讲解怎么显示坐标点以及自定义点符号。 先上一张效果图，其中红色点是supermap自带的点符号，蓝色点是我添加的自己的图片。 一、显示坐标点 我们首先需要新建一个点GeoPoint的实例，然后再把GeoPoint添加到一个地图的跟踪图层TrackingLayer上. 跟踪图层类TrackingLayer。 在 Sup...
【超图】SuperMap iObject .Net 实现Excel导入创建点
最新发布
冰美式当作酒
12-04 892
作者：taco最近在支持客户的过程中，有客户想要实现excel数据的导入，但是excel数据并没有单独的import方法进行导入，那么针对于该类型的数据应该如何进行导入呢？导入后的数据又如何创建点数据集来存储这个呢？本篇文章将介绍如何导入excel数据。
vue+supermap超图实现点击地图添加点
JKC_HOWL的博客
12-17 2251
点击地图加点并添加图标（已规划导航路线选取终点起点为例） 首先是点击获取坐标 getPosition(item) { this.point = item // item 接受两个字符串 'start', 'end' 用来区分起点和终点 const that = this that.pickState = true // 加点时开关，为true时点击地图调用加点方法加点， const handler = new Cesium.ScreenSpaceEventHandler(view
超图js版本在地图上使用图标标记地理点
bcbobo21cn的专栏
04-21 1313
效果； 项目结构； 代码； <%@ Page Language="C#" AutoEventWireup="true" CodeFile="marker1.aspx.cs" Inherits="marker_marker1" %> <!DOCTYPE html> <html> <head> <meta charset="utf...
supermap 学习系列（二）——添加标注（鼠标点击弹出窗口）
热门推荐
duyelang的专栏
02-26 1万+
学习笔记，方便以后查询。 http://www.w3.org/1999/xhtml">                                            var map, layer, vectorLayer, control, selectFeature;         // 设置访问的GIS服务地址         var url =
SuperMap iclient for ios添加marker和矢量线
12-14
SuperMap iclient for ios 7c中使用MakerManager和RMpath分别对maker和矢量线要素进行管理，本范例讲解了如何在地图上添加Maker和叠加矢量线
SuperMap Objects Java 点信息构面
12-15
读取Excel内的点信息，根据点所属的区域信息，通过ProximityAnalyst.createThiessnPolygon构建面并生成面数据集
SuperMap iClient for 3D 添加和保存点对象
12-14
本范例讲解在SuperMap iclient for 3D中绑定结点动画，实现动态可视域分析。
supermap学习系列之silverlight--添加可拖拽的定位图钉
08-21
学习笔记，方便以后查阅。是一个silverlight版的supermap。 在地图上做了一个可以自定义图标并且可以拖拽的图钉。
SuperMap Deskpro .NET 提取面数据集中心点
12-14
对于岛状型的面对象其内点往往不是面对象的中心点，这样会导致制作标签专题图时，标签不在面对象的中心位置，本范例将示范提起岛状型面对象中心点，利用中心点来制作专题图，达到让标签在中心点位置显示的效果。
SuperMap地图数据的几何校正和配准
08-07
SuperMap地图数据几何校正和配准操作详解。包括单图层配准、参考图层配准和批量配准。帮助初学者了解如何使用超图进行开发及技术使用讲解。
SuperMap地图配色策略与技巧
03-05
SuperMap地图配色策略与技巧
在web3d 的地图 实现测距 调用supermap 下的js
11-24
在web下加载supermap的iserver上的三维服务以及三维数据（iserver上的是工作空间包括三维和三维数据服务） 这是一个案例工程 可以直接在网页开发IDE打开 （如果不行就把根目录放tomcat的webappsx下，后用IDE打开）该...
SuperMap iObjects .NET 7C小车在地图上运动
12-15
该范例的主要功能为小车沿线运动并且小车位于地图中央。
vue2 使用superMap 在地图上给 点位布置一个半径3km的圈
07-16
要在Vue.js中使用SuperMap在地图上给点位布置一个半径为3km的圈，你可以按照以下步骤进行操作： 1. 首先，确保你已经按照上述步骤在Vue.js项目中引入了SuperMap的JavaScript API。 2. 在Vue.js组件的生命周期钩子函数中初始化SuperMap，并创建地图对象和图层。 ```javascript created() { // 初始化地图对象 const map = new SuperMap.Map("map", { controls: [ new SuperMap.Control.Navigation(), new SuperMap.Control.LayerSwitcher(), ] }); // 添加基础图层 const layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", "http://localhost:8090/iserver/services/map-world/rest/maps/World", { transparent: true }); map.addLayer(layer); } ``` 3. 在Vue.js组件的方法中添加一个函数来绘制圆形覆盖物。你可以使用SuperMap的API来创建一个圆形覆盖物，并添加到地图上。 ```javascript methods: { drawCircle() { // 创建圆心坐标 const lon = 0; const lat = 0; const center = new SuperMap.Geometry.Point(lon, lat); // 创建圆形覆盖物 const radius = 3000; // 半径为3km const circle = new SuperMap.Feature.Vector( new SuperMap.Geometry.Polygon.createRegularPolygon(center, radius, 40, 0) ); // 设置圆形覆盖物的样式 circle.style = { fillColor: "#ff0000", fillOpacity: 0.5, strokeColor: "#ff0000", strokeOpacity: 1, strokeWidth: 2, }; // 将圆形覆盖物添加到地图上 const layer = new SuperMap.Layer.Vector("CircleLayer"); layer.addFeatures(circle); this.map.addLayer(layer); } } ``` 4. 在Vue.js组件的模板中添加一个按钮，用于调用绘制圆形覆盖物的函数。 ```html <template> <div> <div id="map"></div> <button @click="drawCircle">绘制圆形</button> </div> </template> ``` 通过点击按钮，就可以在地图上绘制一个半径为3km的圆形覆盖物。你可以根据需要对圆形覆盖物的样式进行修改，并添加其他功能来满足你的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值