openlayers结合天地图的精准搜索定位

项目中的一个功能是只允许用户搜索某市范围之内的地点,用的天地图的搜索,用行政区划的国标码来筛选范围

$.getJSON('http://api.tianditu.gov.cn/search?postStr=' +
            '{"keyWord":"' + place + '","level":"11","specifyAdminCode":"156330109","mapBound":"-180,-90,180,90","queryType":"1","count":"20","start":"0"}'
            + '&type=query&tk=42dca576db031641be0524ee977ddd04',
            function(){
})

主要在于specifyAdminCode这个属性,参数详情参考天地图官网的POI搜索,国标码是156+xxxxxx,这个9位国标码的156现在还不知道什么意思,看的北京的示例前就加了156,寻思着这是国家编码的意思?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要在Vue中加载地图,需要先安装OpenLayers地图的相关库。可以通过npm安装: ``` npm install ol @supermap/iclient-ol6 --save ``` 然后在Vue组件中引入OpenLayers地图的相关库: ```javascript import ol from 'ol'; import { Tianditu } from '@supermap/iclient-ol6'; ``` 接着,在Vue组件的mounted生命周期中,创建地图并添加地图图层: ```javascript mounted() { // 创建地图容器 const mapContainer = document.getElementById('map'); // 创建地图对象 const map = new ol.Map({ target: mapContainer, view: new ol.View({ center: [, ], zoom: 2 }) }); // 创建地图图层 const tiandituLayer = new Tianditu({ layerType: 'vec', key: 'your-tianditu-key' }); // 添加地图图层到地图中 map.addLayer(tiandituLayer); } ``` 其中,`your-tianditu-key`需要替换成你自己的地图开发者密钥。如果没有密钥,可以在地图开发者平台申请。 ### 回答2: Vue 是一种流行的前端框架,能够帮助开发者构建高效的用户界面。而 OpenLayers 则是一种流行的前端地图库,它提供了许多强大的地图功能,包括地图渲染、矢量数据展示、标注等等。 地图是一种常用的在线地图服务,提供了丰富的地图数据资源,包括卫星影像、地形数据、街景图等等。 为了加载地图,并在 Vue 中使用 OpenLayers 进行地图展示,我们需要采取以下步骤: 1. 获取地图API 密钥 地图需要注册开发者账号,并获得一个 API 密钥,才能进行在线地图服务的调用。获取密钥后,我们可以在 OpenLayers 中调用地图的 WMTS 服务,加载所需的瓦片数据。 2. 安装必要的依赖库 在 Vue 项目中使用 OpenLayers,需要先安装相关的依赖库。具体来说,我们需要安装三个库:ol、proj4 和 proj4leaflet。其中,ol 是 OpenLayers 的核心库,proj4 和 proj4leaflet 则是用于地图坐标转换的工具库。 可以使用 npm install 命令来安装这些库。 3. 在 Vue 模板中添加地图容器 在 Vue 的模板中,我们可以添加一个 div 元素,用于承载 OpenLayers地图容器。这个容器需要设置样式来确定它所占据的位置和大小。 4. 在 Vue 中引入 OpenLayers地图的配置 为了在 Vue 中加载 OpenLayers地图服务,我们需要新建一个 .js 文件,用于配置这些服务的相关信息。在这个文件中,我们需要引入 OpenLayers 和 proj4 库,以及地图API 密钥。 5. 在 Vue 中引入地图组件 最后,在 Vue 的组件中,我们需要引入地图组件,并在其 mounted 生命周期中,调用我们定义好的配置文件,来加载地图服务和 OpenLayers地图显示。 通过以上步骤,我们就可以在 Vue 中,轻松地加载和显示地图,并使用 OpenLayers 进行地图展示和交互。 ### 回答3: Vue是一种流行的JavaScript框架,它提供了一种开发Web应用程序的方法,使您可以使用组件,指令和状态来轻松构建丰富的用户界面。而OpenLayers是一个功能强大的JavaScript库,它可以帮助您在Web应用程序中实现各种地图和空间分析功能。 地图是一种广泛使用的中国地图服务,它提供了各种地图数据,如道路,建筑物和地形,以及各种功能,如地理编码和路径规划。对于Vue开发人员来说,整合地图OpenLayers可以为他们的Web应用程序提供丰富的地图功能。 要加载地图,需要使用OpenLayers的TileLayer组件。在Vue应用程序中,您可以使用Vue-OpenLayers,这是一个Vue组件库,为OpenLayers提供了Vue绑定。下面是一些步骤,可以帮助您在Vue中加载地图: 步骤一:安装Vue-OpenLayers组件库 您可以使用npm安装Vue-OpenLayers: npm install vue-openlayers 步骤二:导入Vue-OpenLayers组件 您需要在Vue组件中导入Vue-OpenLayers组件: import { Map, TileLayer } from 'vue-openlayers'; 步骤三:创建地图容器 您需要在模板中添加一个地图容器: <template> <div> <Map ref="map"> <TileLayer type="XYZ" url="http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}" attributions="&copy;2018 TDT&nbsp;|&nbsp;http://www.tianditu.gov.cn/" /> </Map> </div> </template> 步骤四:配置地图数据 您需要在TileLayer组件中配置地图数据。此处的URL应该是地图服务提供商提供的。 步骤五:运行应用程序 您可以运行Vue应用程序,并在浏览器中查看地图。现在,您应该能够看到一个包含地图数据的地图!您可以尝试通过添加更多图层来定制地图,或者使用OpenLayers的各种功能来实现空间分析。 在使用Vue-OpenLayers加载地图时,需要注意保护好自己的开发者密钥,在与地图服务提供商之间的交互中,应该遵守相关协议和政策。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值