首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

OpenLayers入门(一)

OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库,可以满足几乎所有的地图开发需求...面向对象开发方式,在OpenLayers中万物皆对象 和另一个流行的地图库leaflet不同,openLayers完全是用面向对象的方式开发的,且几乎内置了所有地图开发需要的功能,而leaflet核心库只提供基本功能...这是本系列的第一篇,主要介绍地图的实例化、基本的要素操作,后续不定期更新。 本文基于OpenLayers v6+版本,代码基于Vue。...显示要素 在地图上显示一些自定义元素可以说是最基本也是最常见的需求,如果要显示的元素结构或样式比较复杂,可以使用Overlay,它可以将DOM元素在地图上进行显示,并将随地图一起移动。...以上对几何体的操作和显示用的都是自带的默认样式,如果有自定义样式需求的话可以通过style配置进行修改,对要素的基本使用就到这里。

4.8K40

OpenLayers入门(二)

虽然是基于v3版本介绍的,很多api可能变了,但还是值得一看,除了OpenLayers本身的介绍,还会有一些地理基础知识的分享,这种相对全面的中文教程真的很稀有,且看且珍惜。...style=7&x={x}&y={y}&z={z} 3.高德瓦片,最大支持放大到18级,最常用的样式。 http://webrd01.is.autonavi.com/appmaptile?...30.314227730637967],[120.11997452699472, 30.314227730637967],...] function renderArea (data) { // 创建要素...添加阴影效果 OpenLayers样式对象并不支持直接设置阴影效果,所以需要获取到canvas的绘图上下文来自行添加,原理是监听图层的prerender(在一个图层渲染前触发)和postrender(...在一个图层渲染后触发)事件,修改canvas`上下文的绘图样式,对整个图层都是有影响的,所以最好把要添加阴影的要素放到一个单独的图层里: import { Vector as VectorSource

2.7K51

我是如何通过geojson画个中国地图出来的 |Java 开发实战

selectStyleFunction});我这是引用本地准备好的数据(可以从服务器上获得,从服务器上只需要将url地址改写成服务地址),加载url完成后并不会在map中显示出来,我们还需要指定数据的显示样式...,这里和之前瓦片是加载不同,样式很重要我调节了好久才调通的,这里我将封装在方法里。...).B);} else {// alert(hdms+"\n这里属于"+featureInfo.feature.get("name")+"省");//显示点击区域的}console.log('打印选择要素...');console.log(featureInfo.feature);console.log('打印选择要素所属Layer');console.log(featureInfo.layer);} else...| 新旧对比 | openlayers2 | openlayers3 | |:-------------- |:-------------|:-----| | 点击 | 获取经纬度查询 | 点线类别区分

26610

基于高德地图开发 Web 应用

对比腾讯、百度、OpenLayers 目前做 LBS 需求的前端有几个 API 选择,高德地图、腾讯地图、百度地图,还有一个由于某些原因相对用的人比较少的 OpenLayers。...先说下很多人不熟悉的 OpenLayersOpenLayers 先放个官网:https://openlayers.org/。...OpenLayers 使在任何 Web 页面中放置动态地图变得很容易。它可以显示从任何源加载的地图块、矢量数据和标记。OpenLayers 的开发是为了进一步利用各种地理信息。...城市设为北京,默认:“全国” // radius: 500 //范围,默认:500 }); // 设置 label 标签 // label 默认蓝框白底左上角显示,样式...当然了这里还有很多细节可以处理,比如 Marker 的样式、Marker 的 label、显示的长短,以及颜色都与原版不一致,大家就不要太纠结这些了。

4.4K30
领券