随笔分类 - openlayers
摘要：openlayers之geoserver的wms图层mysql数据源数据修改后更新问题 问题： geoserver发布了以mysql为数据源的图层服务，在数据新增后，openlayers中的图层刷新无效。 原因： openlayers加载wms图层是会对图层进行缓存处理，所以地图没有发生变化时，移除
阅读全文
摘要：openlayers之wms属性查询、空间查询 图层新建代码： let wmsSource = new ol.source.TileWMS({ url: config.dataSeverUrl, params: { 'FORMAT': 'image/png', 'VERSION': '1.1.1',
阅读全文
摘要：openlayers截图之图片跨域问题 报错： Error in v-on handler: "SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported
阅读全文
摘要：mapserver服务加载 服务获取： 方法：在链接后面添加 REQUEST=getcapabilities 例如： http://127.0.0.1/mapserver/vmap/WMTS/1.0/XZQH/11?REQUEST=getcapabilities 加载的链接可以在xml文件中获取。
阅读全文
摘要：proj4之空间参考查询 查询地址：https://spatialreference.org/ref/sr-org/ 查询步骤： 1.填入wkid 2.选择投影 3.选择proj4 4.得到结果 EPSG proj4格式定义列表： https://blog.51cto.com/u_15311558/
阅读全文
摘要：gis之通过中心点和半径计算圆形的经纬度数据 方法： countCircle(t, e) { var r = t / (2 * Math.PI * 6371004) * 360 let s = [] for(let i=0;i<360;i++){ let x = e[0] + r * Math.co
阅读全文
摘要：ol3之加载geojson数据 数据： let data = { "type": "Feature", "geometry": { "type": "Point", "coordinates": [125.6, 10.1] }, "properties": { "name": "Dinagat Is
阅读全文
摘要：ol3之测试项目 代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht
阅读全文
摘要：ol3之加载arcgis wms图层 服务： 图层创建代码： var arcgiswmschina = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:18080/arcgi
阅读全文
摘要：ol3之添加点、线 添加图层： let source = new ol.source.Vector(); let layer = new ol.layer.Vector({ source: source, }); this.map.addLayer(layer); 添加点： var iconFeat
阅读全文
摘要：ol 之 判断点是否在面内 引用： import { Feature } from 'ol' import Polygon from 'ol/geom/Polygon'; 代码： // 地图上的不规则斑块 let wuxi = [ [ [120.57785099716335, 31.72873608
阅读全文
摘要：ol之加载geoserver的wms服务 示例： 将geoserver发布的shp文件图层，以tile的方式加载到图层上。 addSj () { this.sjLayer = new ol.layer.Tile({ className: 'sj', source: new ol.source.Til
阅读全文
摘要：ol之要素查询 要素查询可以直接从geoserver上的矢量数据服务中查询符合条件的要素。 代码： let featureRequest = new ol.format.WFS().writeGetFeature({ srsName: 'EPSG:3857', featureNS: 'gistone
阅读全文
摘要：ol之弹窗 openlayers的弹窗主要通过 Overlay 添加。 1.首先需要创建弹框dom： <div id="popup" ref="popup" class="ol-popup"> <a href="#" ref="popup-closer" class="ol-popup-closer
阅读全文
摘要：ol之天地图加载 天地图的添加使用XYZ的方式添加。代码如下 // 加载天地图图层 addTdtLayer (type) { let layer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://t' + Math.roun
阅读全文
摘要：ol之地图定位 1.通过extent定位 let extent = vectorSource.getExtent() this.view.fit(extent) 2.通过点、zoom定位 this.view.setZoom(_zoomLevel); this.view.setCenter(ol.ex
阅读全文
摘要：ol之filter过滤获取feature 使用场景： 通过geoserver的省界服务查询对应省的要素，定位到对应位置 代码： sfCode 为省份编码 queryLocation (sfCode) { let featureRequest = new ol.format.WFS().writeGe
阅读全文
摘要：ol之从全局加载ol 将openlayers引入vue： npm i ol 当使用时，需要从ol中分别将用到的组件引入页面，如下： import 'ol/ol.css' import {Map, View} from 'ol' import Tile from 'ol/layer/Tile' imp
阅读全文
摘要：ol之点的坐标系转换 经纬度转为米： ol.proj.transform([item.cd002, item.cd003], 'EPSG:4326', 'EPSG:3857') 米转换为经纬度： ol.proj.toLonLat([]) 钻研不易，转载请注明出处。。。。。。
阅读全文
摘要：天地图之开发授权添加 2019年1月1日起天地图API及服务接口调用都需要获得开发授权，所以突然之间天地图都变成空白了。 解决方法很简单： 只需要在请求天地图的url连接后将从天地图官网获取到的key值添加在链接后面即可（？tk=b7bfb591f7435f530314cff9a16d40e4） 结
阅读全文
