根据项目要求，需要对指定的位置进行标注。

1、初始化地图服务

2、根据地图服务接口信息进行标注

3、根据经纬度信息进行标注

展示接口截图：

以下代码并不能直接粘贴跑起来，因为代码所涉及的文件地址都是内网的地址。需要自行更改对应的IP

如截图所示：

　　1、红色的是todoLabel 方法，根据经纬度值直接标注上去的。

　　2、蓝色车辆图标，是targetLabelFun 调用地图服务接口，添加到图层上去的。

 <!--地图初始化-->

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>地图初始化</title>

     <link rel="stylesheet" type="text/css" href="http://10.101.8.102:80/map/js/3.26/esri/css/esri.css" />

     <script type="text/javascript" src="http://10.101.8.102:80/map/js/3.26/init.js" ></script>

     <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>

     <style>html, body {height: 100%;width: 100%;margin: 0;padding: 0;}</style>

 </head>

 <body> 

 <div id="xinyiMapPID" style="height: 70%;width: 90%;padding-left:50px">

     <div id="xinyiMap"></div>

 </div> 

 <script type="text/javascript">

     $(function () {

         initMap({},'xinyiMap');

     })

     var maplet = null;//地图对象

     var initMap = function(param,DOMID){

         return new Promise(function(resolve) {  // 用于回调操作，预留

             var domMapID;

             var layer_city; // 图层对象

             if (DOMID == undefined || DOMID == "") {domMapID = "xinyiMap";} // 传递不同的id值，用于初始化不同的DOM地图服务

             else {domMapID = DOMID;}

             var list = {// 默认地图初始化参数

                 minZoom: '11',

                 maxZoom: 19,

                 zoom: 16,

                 center: [113.33227, 23.14154],  // 广州

             }

             var options = Object.assign(list, param);    // 参数对象合并,若存在重复，后面的会覆盖前面的

             require(["esri/map",

                     "esri/config",

                     "esri/dijit/OverviewMap",

                     "esri/layers/ArcGISTiledMapServiceLayer"

                 ],

                 function (Map, config, OverviewMap, ArcGISTiledMapServiceLayer) {

                 $("#" + domMapID).width($("#" + domMapID).parent().width());    // 重新定义地图区域的宽高，等于父级的宽高

                 $("#" + domMapID).height($("#" + domMapID).parent().height());

                 maplet = new Map(domMapID, {// 初始化地图

                     center: options.center, //初始化展示中心位置

                     zoom: options.zoom,

                     logo: false, //logo设置图标是否显示,true时地图底部显示powered by ESRI

                     maxZoom: options.maxZoom,   //最大放缩级别

                     minZoom: options.minZoom,   //最小放缩级别

                     navigationMode: 'css-transforms'    //指示在平移和缩放时地图是否使用CSS3变换。

                 })

                 //ArcGISTiledMapServiceLayer，用于加载服务器端的缓存地图服务,displayLevels表示放缩级别约束

                 layer_city = new ArcGISTiledMapServiceLayer('http://10.101.8.103:6080/arcgis/rest/services/gz_google_7_19MapService/MapServer', {displayLevels: [10,11,12, 13, 14, 15, 16, 17,18,19]});

                 maplet.addLayer(layer_city, 0); // 把创建的ArcGISTiledMapServiceLayer地图服务添加到map地图中

                     // 进行标注

                     maplet.on('load',function(){

                         targetLabelFun();//调用地图服务接口，进行标注

                         todoLabel(23.14154,113.33227,1);  //直接根据经纬度值进行标注。纬度（0°——90），经度（0°——180°）

                     })

             })

         })

         resolve(maplet);

     }

     // 地图标注方法,根据地图服务进行标注

     var targetLabelFun = function () {

         var labelObj = null;    // 定义需要标注的对象

         require([

             "esri/map", // 创建地图类

             "esri/layers/ArcGISTiledMapServiceLayer",

             "esri/symbols/PictureMarkerSymbol",

             "esri/renderers/SimpleRenderer",

             "esri/layers/FeatureLayer"

         ],function (Map, ArcGISTiledMapServiceLayer, PictureMarkerSymbol, SimpleRenderer, FeatureLayer, ) {

             var pictureSymbol = new PictureMarkerSymbol('http://10.101.8.102:80/map/img/car.png', 24, 36);    // 标注所需的图标，用于在图层上进行标注

             var simpleRender = new SimpleRenderer(pictureSymbol);                 // 使用Symbol参数创建一个新的SimpleRenderer对象。

             labelObj = new FeatureLayer('http://10.101.8.103:6080/arcgis/rest/services/viasCameraMapService/MapServer/0', {visible: true, id: 'layer_label', outFields: ['*']})

             labelObj.setRenderer(simpleRender);

             maplet.addLayer(labelObj);

         })

     }

     // 根据经纬度进行标注

     var todoLabel = function (lat,lon,index) {//113.33227, 23.14154

         require([

             "esri/map", // 创建地图类

             "esri/geometry/webMercatorUtils",

             "esri/layers/GraphicsLayer",

             "esri/symbols/PictureMarkerSymbol",

             "esri/graphic",

             "esri/geometry/Point"

         ], function (map,webMercatorUtils, GraphicsLayer, PictureMarkerSymbol, Graphic, Point) {

             var pot = new Point(parseFloat(lon), parseFloat(lat), { "wkid": 4326 });

             var webMctor = webMercatorUtils.geographicToWebMercator(pot); // 转换为横轴墨卡托系统坐标

             var pms = new PictureMarkerSymbol("http://10.101.8.102:80/map/img/point_red.png",21,33);

             var graphicObj = new Graphic(webMctor, pms, null, null);

             maplet.graphics.add(graphicObj);

             maplet.centerAt(webMctor);

         })

     }

 </script>

 </body>

 </html>

acgis地图初始化并根据经纬度进行标注的更多相关文章

  1. 百度地图API-搜索地址、定位、点击获取经纬度并标注

    百度地图api:http://developer.baidu.com/map/jsdemo.htm api申请ak:http://lbsyun.baidu.com/ 一.搜索地址.定位.点击获取经纬度 ...

  2. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  3. 【百度地图API】你看过房产地图吗？你知道房产标注是如何建立的吗？

    原文:[百度地图API]你看过房产地图吗?你知道房产标注是如何建立的吗? 你是不是看过很多房产网站?例如安居客,新浪乐居. 你是不是也想做一个能写文字的标注? 你知道怎么去实现麼? 其实,上图这样的标 ...

  4. 【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注

    原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?&quo ...

  5. ORB-SLAM（三）地图初始化

    单目SLAM地图初始化的目标是构建初始的三维点云.由于不能仅仅从单帧得到深度信息,因此需要从图像序列中选取两帧以上的图像,估计摄像机姿态并重建出初始的三维点云. ORB-SLAM中提到,地图初始化常见 ...

  6. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  7. [Windows Phone] 地图控制项的经纬度

    原文:[Windows Phone] 地图控制项的经纬度 前言 本文主要示范如何使用地图经纬度以及显示地标和行人街道,并透过卷轴控制地图缩放比例的功能. ? 实作 step1 建立专案. ? step ...

  8. 【百度地图API1.1】修改文本标注的样式

    原文:[百度地图API1.1]修改文本标注的样式 百度地图API1.0中文本标注的样式写法为: label.getDom().style.borderColor = "#808080&quo ...

  9. 百度地图 echarts tooltip属性 经纬度坐标不显示

    中国地图.散点图结合点击后显示当前城市数量 不显示经纬度坐标 echarts.appMap = function (id, opt) { // 实例 var chart = this.init(doc ...

随机推荐

  1. Spark MLlib之线性回归源代码分析

    1.理论基础 线性回归(Linear Regression)问题属于监督学习(Supervised Learning)范畴,又称分类(Classification)或归纳学习(Inductive Le ...

  2. 生成字符Banner

    生成字符Banner http://patorjk.com/software/taag __ _______/ |_ ____ ____ ____ / ___/\ __\/ _ \ / \ / _ \ ...

  3. 拓扑排序---AOV图

    对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中全部顶点排成一个线性序列, 使得图中随意一对顶点u和v,若边(u,v)∈E(G),则u在线性序列中出如 ...

  4. Java图形界面（GUI）——如何将JTable成功放入面板

    在这次课程设计中,大部分内容都设计的很流畅,没有遇到太大的问题,但在面板中加入JTable时确实花费了一部分时间,在此将解决办法总结出来: 定义控件: JPanel panel = new JPane ...

  5. Patterns in the Composite Application Library

    Patterns in the Composite Application Library Inversion of Control https://www.codeproject.com/Artic ...

  6. php json 初始化函数（格式化json字符串为php json_decode 标准的字符串）

    $json="[{ 'i':100000, 'u':-1,n: '中国'},{i:100001,u:-1,n:'阿尔巴尼亚'},{i:100002,u:-1,n:'阿尔及利亚',}]&quo ...

  7. [Plugin] 文件上传利器SWFUpload使用指南

    SWFUpload是 一个flash和js相结合而成的文件上传插件,其功能非常强大.以前在项目中用过几次,但它的配置参数太多了,用过后就忘记怎么用了,到以后要用时又得 到官网上看它的文档,真是太烦了. ...

  8. 如何在在页面中清除一个已知的cookie？

    前些天在写一个项目的时候,使用cookie来存储一些用户数据,在用户登出时需要清理以往的数据,对于一个初学者来说,我需要学习如何清除一个已知的cookie. 首先,引入两个js文件: 1.jquery ...

  9. Android适配文件dimen自动生成代码

    1:保存下,别人的code import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputSt ...

  10. GCC G++ Make CMake自我科普

    Linux下gcc g++ make cmake 联系和区别 C/C++程序从编写到可执行一般经历这几个阶段 编写源代码 编译器编译代码生成目标文件,如.o文件 链接器链接目标文件和其他目标文件/库文 ...