温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(1543)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'地名查找及定位
ARCGIS API FOR JAVASCRIPT(zhuan)',
blogAbstract:'&!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\"&&html lang=\"en\"&
&meta http-equiv=\"Content-Type\" content=\"text/ charset=utf-8\"&
&meta http-equiv=\"X-UA-Compatible\" content=\"IE=7,IE=9\" /&
&meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1,user-scalable=no\"/&',
blogTag:'gis开发,js',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:7,
publishTime:3,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}关于ArcGIS API for JavaScript中basemap的总结介绍（一）
实际上basemap这个概念并不只在arcgis中才有，在Python中有一个matplotlib basemap toolkit（https://pypi.python.org/pypi/basemap），是用来实现地理信息可视化的。其中，matplotlib是Python常用的数据绘制包，basemap是matplotlib的一个子包，用来进行地图绘制。本文所指的basemap是指esri提供的基础底图图层。
正式使用basemap是在前一阵做webgis开发的时候，需要在自己的矢量图层下面加一个底图图层，发现网上的相关文档不多，所以整理了一下帮助文档和demo，分享给大家。
首先，看一下arcgis帮助文档中对GIS basemap的介绍（/zh-cn/help/main/10.1/index.html#/na/00s000/），因为重点介绍arcgis API，所以关于arcmap的操作方法和步骤不再赘述，只是简单介绍一下基础底图的概念：
底图图层属于一类地图图层，提供了一个可显示动态操作信息的框架。底图显示性能非常强大。由于底图图层相对稳定，不常发生变化，因此其显示只需计算一次，然后便可以多次重复使用。首次以特定的地图比例访问某个区域时，会对底图图层的显示进行计算。以后再以此地图比例访问该区域时，可调出该显示。众多 ArcMap 应用程序中都包括可用于显示和使用操作性信息、观测值和从分析模型中获取的信息的底图。底图用于位置参考，并为用户提供叠加或聚合业务图层、执行任务以及可视化地理信息的框架。底图是执行所有后续操作和地图制图的基础，它为地理信息的使用提供了环境和框架。底图相对稳定，并且在典型设置下，并不需要经常更新。此外，底图常常可在多种地图比例下使用。在各种地图比例范围内，底图都可以描绘出对应的内容。
接下来，重点介绍一下arcgis API for JS中esri提供的已有的17种basemap（包括&satellite&,&hybrid&,&streets&,&topo&,&osm&和&national-geographic&等等），包括代码和示例。
　在的arcgis_js_api包中有一个basemaps.js文件（路径为arcgis_js_api\3.17\esri），里面定义了esri提供的全部的basemap，下面贴出了这个js文件中的详细代码：
1 // All material copyright ESRI, All Rights Reserved, unless otherwise specified.
2 // See /3.17/esri/copyright.txt for details.
3 //&&built
4 define(&esri/basemaps&, [&require&, &dojo/has&, &./kernel&, &dojo/i18n!./nls/jsapi&], function(a, c, d, b) {
streets: {
title: b.basemaps.streets,
thumbnailUrl: a.toUrl(&./images/basemap/streets.jpg&),
itemId: &dd74413babfb0f&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/World_Street_Map/MapServer&
satellite: {
title: b.basemaps.satellite,
thumbnailUrl: a.toUrl(&./images/basemap/satellite.jpg&),
itemId: &86de95d4e0244cba80f0fa2c&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/World_Imagery/MapServer&
title: b.basemaps.hybrid,
thumbnailUrl: a.toUrl(&./images/basemap/hybrid.jpg&),
itemId: &413fd05bbdec96f4f8b18&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/World_Imagery/MapServer&
url: &/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer&,
isReference: !0
terrain: {
title: b.basemaps.terrain,
thumbnailUrl: a.toUrl(&./images/basemap/terrain.jpg&),
itemId: &aab054ab883c4a566ad40&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/World_Terrain_Base/MapServer&
url: &/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer&,
isReference: !0
title: b.basemaps.topo,
thumbnailUrl: a.toUrl(&./images/basemap/topo.jpg&),
itemId: &6e03e8c26aad4b9c92a87c1063ddb0e3&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/World_Topo_Map/MapServer&
title: b.basemaps.gray,
thumbnailUrl: a.toUrl(&./images/basemap/gray.jpg&),
itemId: &8b3baeb60e5fff0a319ce7&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer&
url: &/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer&,
isReference: !0
&dark-gray&: {
title: b.basemaps[&dark-gray&],
thumbnailUrl: a.toUrl(&./images/basemap/dark-gray.jpg&),
itemId: &da65bacab5bd4defb576f839b6b28098&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer&
url: &/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer&,
isReference: !0
title: b.basemaps.oceans,
thumbnailUrl: a.toUrl(&./images/basemap/oceans.jpg&),
itemId: &48b8cec7ebf04b5fbdcaf70d09daff21&,
baseMapLayers: [{
url: &/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer&
url: &/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer&,
isReference: !0
&national-geographic&: {
title: b.basemaps[&national-geographic&],
thumbnailUrl: a.toUrl(&./images/basemap/national-geographic.jpg&),
itemId: &509e2d6bad62c&,
baseMapLayers: [{
url: &/ArcGIS/rest/services/NatGeo_World_Map/MapServer&
title: b.basemaps.osm,
thumbnailUrl: a.toUrl(&./images/basemap/osm.jpg&),
itemId: &5d2bfa736f8e1f6be23eed&,
baseMapLayers: [{
type: &OpenStreetMap&
&dark-gray-vector&: {
title: b.basemaps[&dark-gray&],
thumbnailUrl: a.toUrl(&./images/basemap/dark-gray.jpg&),
itemId: &850db44b9eb845d3bd42b19e8aa7a024&,
baseMapLayers: [{
url: &/sharing/rest/content/items/850db44b9eb845d3bd42b19e8aa7a024/resources/styles/root.json&,
type: &VectorTile&
&gray-vector&: {
title: b.basemaps.gray,
thumbnailUrl: a.toUrl(&./images/basemap/gray.jpg&),
itemId: &0e02e6f86deaae811d9b5&,
baseMapLayers: [{
url: &/sharing/rest/content/items/0e02e6f86deaae811d9b5/resources/styles/root.json&,
type: &VectorTile&
&streets-vector&: {
title: b.basemaps.streets,
thumbnailUrl: a.toUrl(&./images/basemap/streets.jpg&),
itemId: &4ecca9cd49ad&,
baseMapLayers: [{
url: &/sharing/rest/content/items/4ecca9cd49ad/resources/styles/root.json&,
type: &VectorTile&
&topo-vector&: {
title: b.basemaps.topo,
thumbnailUrl: a.toUrl(&./images/basemap/topo.jpg&),
itemId: &6f65bca8cb43fe23dad7&,
baseMapLayers: [{
url: &/sharing/rest/content/items/6f65bca8cb43fe23dad7/resources/styles/root.json&,
type: &VectorTile&
&streets-night-vector&: {
title: b.basemaps[&streets-night-vector&],
thumbnailUrl: a.toUrl(&./images/basemap/streets-night.jpg&),
itemId: &bf79e422ecbe&,
baseMapLayers: [{
url: &/sharing/rest/content/items/bf79e422ecbe/resources/styles/root.json&,
type: &VectorTile&
&streets-relief-vector&: {
title: b.basemaps[&streets-relief-vector&],
thumbnailUrl: a.toUrl(&./images/basemap/streets-relief.jpg&),
itemId: &2e063e709e8ed&,
baseMapLayers: [{
url: &/sharing/rest/content/items/2e063e709e8ed/resources/styles/root.json&,
type: &VectorTile&
&streets-navigation-vector&: {
title: b.basemaps[&streets-navigation-vector&],
thumbnailUrl: a.toUrl(&./images/basemap/streets-navigation.jpg&),
itemId: &dcbbba0edf094eaa81af7&,
baseMapLayers: [{
url: &/sharing/rest/content/items/dcbbba0edf094eaa81af7/resources/styles/root.json&,
type: &VectorTile&
c(&extend-esri&) && (d.basemaps = a);
View Code (basemaps.js)
然后是官方帮助文档中对这17种basemap的简单介绍(/javascript/3/jsapi/esri.basemaps-amd.html)：
NameTypeSummary dark-gray Object The Dark Gray Canvas basemap is designed to be used as a soothing background map for overlaying and focus attention on other map layers. dark-gray-vector Object This vector tile layer provides a detailed basemap for the world featuring a neutral background style with minimal colors, labels, and features. gray Object The Light Gray Canvas basemap is designed to be used as a neutral background map for overlaying and emphasizing other map layers. gray-vector Object This vector tile layer provides a detailed basemap for the world featuring a neutral background style with minimal colors, labels, and features. hybrid Object The World Imagery map is a detailed imagery map layer and labels that is designed to be used as a basemap for various maps and applications. national-geographic Object The National Geographic basemap is designed to be used as a general reference map for informational and educational purposes. oceans Object The Ocean Basemap is designed to be used as a basemap by marine GIS professionals and as a reference map by anyone interested in ocean data. osm Object The OpenStreetMap is a community map layer that is designed to be used as a basemap for various maps and applications. satellite Object The World Imagery map is a detailed imagery map layer that is designed to be used as a basemap for various maps and applications. streets Object The Streets basemap presents a multiscale street map for the world. streets-navigation-vector Object This vector tile layer provides a detailed basemap for the world featuring a custom navigation map style. streets-night-vector Object This vector tile layer provides a detailed basemap for the world featuring a custom &night time& street map style. streets-relief-vector Object This vector tile layer provides a detailed basemap for the world featuring a classic Esri street map style designed for use with a relief map. streets-vector Object This vector tile layer provides a detailed basemap for the world featuring a classic Esri street map style. terrain Object The Terrain with Labels basemap is designed to be used to overlay and emphasize other thematic map layers. topo Object The Topographic map includes boundaries, cities, water features, physiographic features, parks, landmarks, transportation, and buildings. topo-vector Object This vector tile layer provides a detailed basemap for the world featuring a classic Esri topographic map style designed for use with a relief map.
最后，对于GIS开发人员来说，在webgis开发中如果需要使用esri提供的basemap，就可以直接在脚本中通过指定Map构造函数参数中的basemap的值来引用相应的底图图层。下面写了一段代码，可以新建一个html文件，把这段代码拷进去，然后可以在中运行查看地图显示效果。将代码第20行中的&topo&改成上面表格中其它basemap的名字，可以查看相应basemap的实际效果。
我通过上述方式改动代码并依次运行程序，发现还是有点问题，即这17种basemap中只有8种可以通过上述代码的这种方式调用，其余的不能运行。比如，我把&topo&改成&topo-vector&后运行程序，浏览器中地图不能显示，控制台提示信息是Map.setBasemap: Unable to find basemap definition for: &topo-vector&. Try one of these: streets,satellite,hybrid,topo,gray,oceans,national-geographic,osm。后来有查文档和求助大神，不过还是没搞通其余的basemap应该怎么调用，比较遗憾。烦请有知道的朋友告诉我一下，我也要继续研究一下，搞懂之后我再写个续篇吧。
下面是这8种basemap（national-geographic,gray,hybrid,oceans,osm,satellite,streets,topo）的运行效果示例：
national-geographic
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'ArcGIS API for JavaScript 学习笔记（一） - 咖啡漩涡 - 博客园
随笔 - 25, 文章 - 0, 评论 - 2, 引用 - 0
终于开始了 噩梦一般的ArcGIS 我特别不习惯这种结构化的程序写法 写起来特别吃力 特别是把几个功能整合到同一个页面去的时候。
写程序的时候，一般我喜欢先写个Demo然后再把Demo上面的功能加到页面里面去 结果 加进去之后老是有问题 早了半天 问题还没找到 新的问题又出现了 好了不吐槽了 慢慢来&
有关于ArcGIS的介绍 我就不再赘述了 网上有很多。
如何初始化地图
1 html,body {
padding-top: 25px;
margin: 0;
height: 100%;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
这很重要 如果不定义html和body的高度 你的地图只有400的行号 或者你定义了map的高度 只能是map的高度不能自适应屏幕
var map, pieChart, buffG
require(["esri/map",
"esri/basemaps",
"dojo/domReady!"],
function (Map, esriBasemaps, dom) {
esriBasemaps.tdtvec = {
baseMapLayers: [{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService1/MapServer" },
{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService2/MapServer" }],
thumbnailUrl: "../Content/image/vectormap.png",
title: "基础地形"
esriBasemaps.tdtimg = {
baseMapLayers: [{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService3/MapServer" },
{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService4/MapServer" }],
thumbnailUrl: "../Content/image/imagemap.png",
title: "影像地图"
map = new Map("map", {
basemap: "tdtvec",
center: [120.756, 30.766],
这里我自定义了需要叠加的底图（天地图）
如何添加一些小工具
就是将那些工具定位在地图上 这里就不写出来了 注意的一点是 map的样式上面 需要加上position: 这样 这些工具会随着地图变动 位置跟着移动
require(["esri/map",
"esri/basemaps",
"esri/units",
"esri/dijit/BasemapToggle",
"esri/dijit/HomeButton",
"esri/dijit/Scalebar",
"esri/dijit/Measurement",
"dojo/dom",
"dojo/domReady!"],
function (Map, esriBasemaps, Units,BasemapToggle, HomeButton, Scalebar, Measurement, dom) {
esriBasemaps.tdtvec = {
baseMapLayers: [{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService1/MapServer" },
{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService2/MapServer" }],
thumbnailUrl: "../Content/image/vectormap.png",
title: "基础地形"
esriBasemaps.tdtimg = {
baseMapLayers: [{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService3/MapServer" },
{ url: "http://10.73.1.171:9001/JXPDServerCore/rest/services/MyJXPDMapService4/MapServer" }],
thumbnailUrl: "../Content/image/imagemap.png",
title: "影像地图"
map = new Map("map", {
basemap: "tdtvec",
center: [120.756, 30.766],
logo: false,
//底图切换
var toggle = new BasemapToggle({
map: window.map,
basemap: "tdtimg"
}, "BasemapToggle");
toggle.startup();
var scalebar = new Scalebar({
map: window.map,
scalebarUnit: "metric"
//HOME按钮
var home = new HomeButton({
map: window.map
}, "HomeButton");
home.startup();
//测量工具
if (!msr) {
msr = new Measurement({
map: window.map,
defaultAreaUnit: Units.SQUARE_KILOMETERS,
defaultLengthUnit: Units.KILOMETERS
}, dom.byId("measurementDiv"));
msr.startup();
msr.on("measure-end", function (evt) {
this.setTool(evt.toolName, false);
下面是实际样式：
转载请注明地址：/CoffeeEddy/p/5643949.html下次自动登录
现在的位置:
& 综合 & 正文
ArcGIS API for Javascript Graphic心得
1、map对象中默认有一个GraphicLayer，置于最顶层，使用它的方式是map.graphics.
比如map.graphics.add(graphci);
2、可以给GraphicLayer添加事件，比如点击事件， dojo.connect(map.graphics, "onClick", capitalclick);返回的是一个event对象，有三个值mapPoint（地图坐标）、screenPoint（屏幕坐标） 、Graphic（你所点击的Graphic对象）。
3、声明Graphic时参数都是可选的geometry、symbol、attributes、infoTemplate，如果添加了infoTemplate，不需要添加点击事件，点击Graphic，infoTemplate就会自动弹出，这个时候可以赋给相应的attributes，可以用来后续的查询用，点击查询时就不需要用identify这个工具了，直接取event.graphic.attributes.可以提高查询效率。event.graphic.geometry.type这个语句可以得知你所点击的Graphic是什么类型（点线面）。
&&&&推荐文章:
【上篇】【下篇】ArcGIS API for JavaScript开发环境搭建及第一个实例demo
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
ESRI公司截止到目前已经发布了最新的ArcGIS Server for
API v3.9，它提供了更为丰富而又强大的功能。一、安装前准备1、ArcGIS Server for JavaScript API 我们选择下载最新的“ArcGIS API for JavaScript 3.9：Library | SDK”,如下图所示：2、下载到本地的文件如下图所示：3、解压上面2个zip压缩包，如下图所示：4、确保本地已经安装了IIS，如果没有的话，请参考以下地址进行配置：/article/c3.html二、api和sdk本地IIS配置部署1、打开C:Inetpubwwwroot文件夹。2、将arcgis_js_v39_sdk文件夹直接拷贝到C:Inetpubwwwroot下，变成C:Inetpubwwwrootarcgis_js_v39_sdk，如下图所示：3、将arcgis_js_v39_apiarcgis_js_api目录下的library文件夹拷贝到C:inetpubwwwrootarcgis_js_v39_sdkarcgis_js_api下，变成C:inetpubwwwrootarcgis_js_v39_sdkarcgis_js_apilibrary，如下图所示：4、打开IIS，如下图所示，浏览install.htm,如下图所示，说明初步部署成功：5、找到C:inetpubwwwrootarcgis_js_v39_sdkarcgis_js_apilibrary.93.9init.js文件，利用记事本或EditPlus打开；Ctrl+F组合键查找[HOSTNAME_AND_PATH_TO_JSAPI]，并替换为/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/，其中为机器名称或者机器IP，注意没有http前缀。可以是localhost或者192.168.11.195，这里我使用的是localhost，如下图所示：6、找到C:inetpubwwwrootarcgis_js_v39_sdkarcgis_js_apilibrary.93.9jsdojodojodojo.js文件，利用记事本或者EditPlus打开，Ctrl+F组合键查找[HOSTNAME_AND_PATH_TO_JSAPI],并替换为/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/，其中为机器名称或者机器IP，没有http前缀。可以是localhost或者192.168.11.195，这里我使用的是localhost，如下图所示：7、如下图所示，找到3.9compact文件夹，接下来8）、9）步骤的操作和5）、6）完全相同，只是8）、9）操作针对3.9compact文件夹，而5）、6）操作针对3.9文件夹，如下图所示：8、C:inetpubwwwrootarcgis_js_v39_sdkarcgis_js_apilibrary.9
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(3347)
同在一个环境中生活，强者与弱者的分界就在于谁能改变它
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net