https://lbs.dituhui.com/open-platform/assets/dataview-webmap-2d-7bfb6eac.js

1import{d as a,f as e,z as n,g as s,K as t,a8 as l}from"./index-4d70d209.js";const p={class:"md-container"},i=[s("h1",{id:"%E6%95%B0%E6%8D%AE%E4%B8%8A%E5%9B%BE%E6%88%90%E6%9E%9C%E6%8E%A5%E5%85%A5",tabindex:"-1"},"数据上图成果接入",-1),s("h2",{id:"%E4%B8%80%E3%80%81%E7%AE%80%E4%BB%8B",tabindex:"-1"},"一、简介",-1),s("p",null,[t("​ "),s("a",{href:"https://www.supermapol.com/apps/dataviz/edit.html",class:"external-link",target:"_blank",rel:"noreferrer noopener"},"数据上图"),t("即拿即用的在线制图单页面应用，其保存的成果可以通过 iclient 提供的 WebMap 接口简单、快速的接入到项目中;")],-1),s("p",null,[s("a",{href:"/open-platform/demo/detail/web/editor#dvMap",class:"internal-link router-link"},"Demo 详情")],-1),s("iframe",{height:"650",width:"90%",src:"/open-platform/examples/origin/2d/WebMap.html",frameborder:"0"},"\n ",-1),l('<h2 id="%E4%BA%8C%E3%80%81%E5%89%8D%E7%BD%AE%E6%9D%A1%E4%BB%B6" tabindex="-1">二、前置条件</h2><ol><li>已经在 SuperMap Online 上发布地图服务，</li><li>如果服务为私有，需要通过密钥进行授权访问；key 如何获取参考 <a href="https://doc.supermapol.com/zh-hans/GettingStarted/key.html" class="external-link" target="_blank" rel="noreferrer noopener">开发授权详解</a>。</li><li>SuperMap iClient JavaScript 提供了多种 JavaScript 地图库；我们将使用<a href="https://iclient.supermap.io/web/introduction/openlayers.html#introduce" class="external-link" target="_blank" rel="noreferrer noopener">SuperMap iClient for OpenLayer</a> 进行核心代码说明；更多的地图库使用请参考<a href="https://iclient.supermap.io/" class="external-link" target="_blank" rel="noreferrer noopener">SuperMap iClient 官方文档</a>。</li></ol><h2 id="%E4%B8%89%E3%80%81%E6%A0%B8%E5%BF%83%E4%BB%A3%E7%A0%81" tabindex="-1">三、核心代码</h2><ol><li>实例化 WebMap，1945334393 是作好的地图 ID<div class="code-wrapper"><div class="heading-row no-heading show-lang"><span class="lang-display">JavaScript</span></div><div class="code-block language-javascript no-line-numbers" data-lang="JavaScript" data-modifiers=""><pre class="language-javascript" data-lang="JavaScript"><code class="code-line odd first-row line-1"> <span class="token comment">//此处数字为您制作的公开地图生成的id，本示例为山东_县级行政区划图</span></code>\n<code class="code-line even line-2">  <span class="token comment">//资源地址为 https://www.supermapol.com/apps/dataviz/view.html?id=1945334393</span></code>\n<code class="code-line odd last-row line-3">  <span class="token keyword">new</span> <span class="token class-name">ol<span class="token punctuation">.</span>supermap<span class="token punctuation">.</span>WebMap</span><span class="token punctuation">(</span><span class="token number">783566240</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></div></li></ol><p>至此我们完成了一个完整的对接 SuperMap Online 地图服务 的 地图展示的例子；可以通过鼠标操作地图放大缩小、左右移动进行浏览。</p>',5)],r={},o="",c=a({__name:"dataview-webmap-2d",setup:(a,{expose:s})=>(s({frontmatter:{},excerpt:void 0}),(a,s)=>(e(),n("div",p,i)))});export{c as default,o as excerpt,r as frontmatter};