离线地图解决方案(四):地图图元编辑

使用鼠标对地图上已经有的图元,进行修改,点图元可以进行移动,线、面图元可以拖动原有坐标节点,增加新的节点,并对节点进行拖动

效果如下:

代码:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>地图图元编辑</title>

<link rel="stylesheet" href="plugin/ol3/css/ol.css" type="text/css" />

<style type="text/css">

body, #div_gis {

border: 0px;

margin: 0px;

padding: 0px;

width: 100%;

height: 100%;

font-size: 13px;

}

</style>

<script type="text/javascript" src="plugin/ol3/build/ol-debug.js"></script>

<script type="text/javascript" src="js/Config.js"></script>

<script type="text/javascript" src="js/PrivateFunction.js"></script>

</head>

<body>

<div id="div_gis">

</div>

</body>

</html>

<script type="text/javascript">

LoadTiandituTileMap(0, ‘div_gis‘, 1, 11, 8, 103.964571, 30.245677);

CreateVectorLayer();

AddEditItem();

SetMapEditState();

function AddEditItem()

{

var pointStyle = CreatePointStyle(‘#aa3300‘, ‘10‘, ‘red‘, ‘2‘,‘‘, ‘center‘, ‘middle‘, ‘Arial‘, ‘14‘, ‘normal‘, ‘blue‘, ‘#ffffff‘, ‘2‘, ‘0‘, ‘0‘, ‘0‘);

AddPointToLayer(tempDrawSoure, ‘1‘, 103.964571, 30.245677, pointStyle);

var linestyle = CreateLineStyle(‘green‘, ‘2‘, ‘‘, ‘center‘, ‘middle‘, ‘Arial‘, ‘14‘, ‘normal‘, ‘blue‘, ‘#ffffff‘, ‘2‘, ‘0‘);

AddLineToLayer(tempDrawSoure, ‘2‘, 104.65434, 30.76453, 105.233415, 32.33456225, linestyle);

var polystyle = CreatePolyStyle(‘rgba(255, 255, 255, 0.5)‘, ‘#ffcc33‘, ‘2‘, ‘‘, ‘center‘, ‘middle‘, ‘Arial‘, ‘14‘, ‘normal‘, ‘blue‘, ‘#ffffff‘, ‘2‘);

var polyPointarr = [[

[103.800883, 30.69275],

[104.076575, 30.510007],

[104.122967, 30.652833],

[103.929917, 30.698417],

[103.910783, 30.71455]]];

AddPolyToLayer(tempDrawSoure, ‘3‘, polyPointarr, polystyle);

}

</script>

时间: 2024-12-23 23:05:32

离线地图解决方案(四):地图图元编辑的相关文章

离线地图解决方案

目前GIS系统的开发,大多采用Arcgis,superMap等专业的gis开发平台.部分项目采用当前主流的在线地图提供的api进行开发.Arcgis.supermap等专业厂商提供的开发平台,开发周期长,并且购买这些开发平台,成本相对很高.采用在线地图api进行项目开发,在部分不能上外网的单位项目没办法进行部署和使用.并且采用在线地图api进行开发,需要申请地图调用的所谓key.部分接口和api每天有调用次数限制. 大部分的GIS项目,其实只需要比较简单的GIS功能,如地图基本显示,在显示的地图

离线地图解决方案(十):最短路径规划

最短路径规划,采用开源数据库postgres.开源路径分析项目pgRouting进行. pgRouting是一个基于PostgreSQL/PostGIS的项目,目的是提供路径分析的功能. 基于postgres和pgrouting实现路径规划功能,大致分为以下几个步骤: 1.矢量路网数据导入 2.为矢量路网数据添加字段并构建拓扑关系 3.编写两点间路径规划函数 4.对外发布两点间路径规划接口 5.前端展示路径规划结果 Postgres和pgRouting的安装以及矢量数据的导入,请参看本博客相关文

百度谷歌离线地图解决方案(离线地图下载)

离线地图解决方案,除了买地图数据,使用专业的ArcGIS来做外,也可以使用GMap.Net来做. 关于GMap的开发教程,可以看我以前的文章:基于GMap.Net的地图解决方案 使用了GMap一年了,也有了一些积累,开发了一个可以下载百度.谷歌.高德.腾讯SOSO的地图下载器,各个地图加载显示如下: 百度普通地图: 百度混合地图: 谷歌普通地图: 谷歌混合地图: 从目前的情况来看,百度的普通的地图数据是更新最快的,但是有些小地方没有卫星地图,而谷歌几乎所有的地方都有卫星地图,但是谷歌中国的地图更

离线地图解决方案(一):加载瓦片地图

当前主流的在线地图有百度.高德.天地图.腾讯地图.google地图等.针对局域网内网内脱离要脱离互联网访问的应用,需要下载这些主流厂商的瓦片数据.网上有很多地图下载器软件可以下载地图瓦片,可以通过各种方式获取到这些地图厂商的瓦片数据. 加载高德离线瓦片数据: 加载高德街道瓦片: 地图加载代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

离线地图解决方案(六):地图坐标“纠偏”

国内主流的在线地图服务和接口,应国家相关部门的要求,在发布地图是都进行了坐标偏移.现在web在线地图主要的坐标系有WGS84.GCJ-02.BD-09三种,WGS84原始坐标,未经过偏移,大部分GPS设备和矢量数据都采用这种坐标系.在线地图中google地图(国外)和天地图在线地图未经过偏移.GCJ-02坐标:高德.腾讯以及google国内在线地图采用这种坐标,BD-09是百度地图独有的坐标系,在GCJ-02基础上做了二次偏移. 在离线地图做加载瓦片数据后,如果要在这些"底图"上用坐标

支持WEB、Android、IOS的地图解决方案

转自原文 支持WEB.Android.IOS的地图解决方案 工具链 GIS工具集 OpenGeo Suite 包含PostGIS, GeoServer, GeoWebCache, OpenLayers, 和 QGIS 地图准备 QGIS 导入.导出.编辑.shp,postgis,geotiff,geojson,dxf等多种GIS文件,给普通图片配准到地理坐标 教程:http://www.qgistutorials.com/en/ DraftSight 编辑CAD文件 SketchUp   从CA

【百度地图API】自定义可编辑的交通路线

原文:[百度地图API]自定义可编辑的交通路线 任务描述: 我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线. 如何实现: 鼠标左击地图,绘制路线:双击后,绘制结束:绘制结束后,路线可编辑. TIPS: API1.1以后,可以使用enableEditing()来开启折线可编辑功能. 图示: 运行代码,请点击这里. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

百度地图、高德地图的数据从哪里得到的?[声明我只是此文章的搬运工,从百度知道复制来的]

要说数据来源,首先得对地图数据做一个分类,因为不同分类的数据,其来源,采集方法都是有大不同的. 要明白地图的数据分类,必须先理解一个概念,就是地图图层的概念: 如上图,电子地图对我们实际空间的表达,事实上是通过不同的图层去描述,然后通过图层叠加显示来进行表达的过程. 对于我们地图应用目标的不同,叠加的图层也是不同的,用以展示我们针对目标所需要信息内容. 其次呢,我引入一下矢量模型和栅格模型的概念,GIS(电子地图)采用两种不同的数学模型来对现实世界进行模拟: 矢量模型:同多X,Y(或者X,Y,Z

百度地图、高德地图的数据从哪里得到的?

要说数据来源,首先得对地图数据做一个分类,因为不同分类的数据,其来源,采集方法都是有大不同的. 要明白地图的数据分类,必须先理解一个概念,就是地图图层的概念:        如上图,电子地图对我们实际空间的表达,事实上是通过不同的图层去描述,然后通过图层叠加显示来进行表达的过程. 对于我们地图应用目标的不同,叠加的图层也是不同的,用以展示我们针对目标所需要信息内容. 其次呢,我引入一下矢量模型和栅格模型的概念,GIS(电子地图)采用两种不同的数学模型来对现实世界进行模拟: 矢量模型:同多X,Y(