工具类 - 随笔分类 - 一往无前！

openLayer矩形框选要素，展示要素属性

摘要：实现的效果：通过绘制矩形框选要素，然后使用popup以弹窗的形式展示获取的要素属性。 // 选择要素事件开始 const btn_select = document.getElementById("btn_select"); btn_select.addEventListener("click", 阅读全文

posted @ 2021-09-15 17:04 一往无前！阅读(544) 评论(0) 推荐(0) 编辑

点击选中的要素，更换标注图片，并添加文本标注

摘要：首先放置修饰好的图标 //使用Select进行要素的选择 //定义select控制器，点击标注后的事件 const map = this.map; var select = new Select(); //map加载该控件，默认是激活可用的 map.addInteraction(select); s 阅读全文

posted @ 2021-09-13 10:52 一往无前！阅读(110) 评论(0) 推荐(0) 编辑

openLayer点击要素获取对应的属性信息

摘要：点击要素获取对应的属性信息的两种方法 1.首先是map的点击事件 const map = this.map; map.on('click', function(evt) { var coordinate = evt.coordinate; //获取点击要素的位置coordinate[0]为精度coo 阅读全文

posted @ 2021-09-13 10:51 一往无前！阅读(1735) 评论(0) 推荐(0) 编辑

openLayer实现放大缩小

摘要：openLayer使用自定义的图标，实现地图的放大缩小 // 放大地图 function zoomIn() { var view = map.getView(); // 让地图的zoom增加1，从而实现地图放大 view.setZoom(view.getZoom() + 1); } // 缩小地图阅读全文

posted @ 2021-09-13 10:47 一往无前！阅读(741) 评论(0) 推荐(0) 编辑

openLayer的切换中心点、定位功能

摘要：设置重新设置定位的功能 1.ol的定位功能 map.getView().setCenter([经度,纬度]) map.getView().setZoom(11); 2.根据经纬度，重新确定中心位置 map.getView().animate({ // 只设置需要的属性即可 center: [经度,纬阅读全文

posted @ 2021-09-13 10:44 一往无前！阅读(4518) 评论(0) 推荐(1) 编辑

使用openLayer加载arcgis中的地图

摘要：由于项目中需要用到openLayer引入arcgis中的服务，所以特此分享以下 var img = new TileLayer({ source: new XYZ({ url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWa 阅读全文

posted @ 2021-09-13 10:18 一往无前！阅读(801) 评论(0) 推荐(0) 编辑

openLayer实现两个地图联动

摘要：其主要思想就是将两个地图放在一个view即可 <template> <div class="main"> <div id="map1"></div> <div id="map2"></div> </div> </template> <script> import {Map,View} from 'o 阅读全文

posted @ 2021-09-10 11:56 一往无前！阅读(301) 评论(0) 推荐(0) 编辑

使用ol进行底图的切换

摘要：使用openLayer进行天地图的显示，以及底图的切换 <template> <div> <div id="mapDiv" class="mapDiv"> </div> <button @click="change_img">切换影像底图</button> <button @click="chang 阅读全文

posted @ 2021-09-08 10:57 一往无前！阅读(203) 评论(0) 推荐(0) 编辑

vue中引入天地图

摘要：参考链接：https://blog.csdn.net/Wuyo_7/article/details/107253632 首先在public文件夹的index.html中引入天地图的api文件 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您阅读全文

posted @ 2021-09-07 18:10 一往无前！阅读(3519) 评论(0) 推荐(0) 编辑

使用openLayer在地图上添加标注

摘要：因为在实际的项目中要用到这个功能，找了好久才得以实现，代码来自：https://www.jianshu.com/p/4af2a52a0fc6 效果如下; 需要引入的类 //添加标注所用到的类 import Vectors from 'ol/layer/Vector.js' import { WMTS 阅读全文

posted @ 2021-09-07 17:58 一往无前！阅读(1713) 评论(0) 推荐(0) 编辑

解决vue中图片无法加载问题

摘要：可以先使用require获取以下，然后将photo赋值给对应的位置 var photo = require("../assets/index/selected.png");img:photo; 或者在使用时直接使用require img: require('./../assets/index/sel 阅读全文

posted @ 2021-09-07 17:45 一往无前！阅读(502) 评论(0) 推荐(0) 编辑

vue项目实现界面跳转

摘要：为了使程序更加清晰，在src文件夹中建立router文件夹，在其中新建index.js，在此定义每个界面的路由。 import Vue from 'vue' import Router from 'vue-router' import index from '../components/index 阅读全文

posted @ 2021-09-06 10:08 一往无前！阅读(599) 评论(1) 推荐(1) 编辑

使用li列举属性表中的某一属性

摘要：view.whenLayerView(featureLayer).then(function(layerView) { layerView.watch("updating", function(value) { if (!value) { // wait for the layer view to 阅读全文

posted @ 2021-09-02 11:02 一往无前！阅读(58) 评论(0) 推荐(0) 编辑

popuptemplate的使用

摘要：在使用arcgis api for js 会有默认的弹窗组件，就是popup使用它可以显示地图上的相关属性，可以通过，点击查询事件，自动的获取到所处位置的属性表信息，将详细的信息对到弹窗当中，操作较为方便。以下代码是我从官方样例中截取的一段，他的作用是以表格的形式显示要素的属性 // Create 阅读全文

posted @ 2021-09-02 09:25 一往无前！阅读(345) 评论(0) 推荐(0) 编辑

html中自动分配界面

摘要：在项目中需要用到一个自动分配内容的功能，即设置两个并列的div如果下方的div关闭，上方的div占满整个屏幕，当下方div出现时，两个div各占界面的50% <div id="appContainer"> <div id="viewDiv"></div> <div class="container" 阅读全文

posted @ 2021-09-01 09:58 一往无前！阅读(73) 评论(0) 推荐(0) 编辑

div中移除和添加元素

摘要：在进行数据显示时，有时需要关闭某些数据的显示窗口，将最为关注的数据进行突出显示这就需要动态的改变div中数据的显示情况。首先设置两个div模块并对其id属性进行设置例如: <div id="appContainer"> <div class="container" id="container"> 阅读全文

posted @ 2021-09-01 09:52 一往无前！阅读(273) 评论(0) 推荐(0) 编辑

使用v-html绑定数据，实现图片的动态转换

摘要：首先定义存放图片的div在div里设置v-html事件 <div class="detail-picture" id="picture" v-html="pict"></div> 然后在下面的的js里设定触发事件，例如按钮的点击事件等。在监听函数里写入以下代码，当需要改变图片时，只需要对piv_ur 阅读全文

posted @ 2021-08-31 08:59 一往无前！阅读(407) 评论(0) 推荐(0) 编辑

使用js下载数据

摘要：由于项目中会用到一个文件的下载功能，所以查找了各种论坛，找到两篇很好用的下载方式，1.通过获取json数据下载为csv文件2.将Table表格下载为excel文件。代码来源（代码全部来源于以下两篇博客） https://blog.csdn.net/u012832088/article/detail 阅读全文

posted @ 2021-08-30 18:01 一往无前！阅读(318) 评论(0) 推荐(1) 编辑

使用FeatureTable对FeatureLayer中的数据进行显示

摘要：FeatureTable的使用方法，（其中csvLayer是之前定义的FeatureLayer图层，然后fieldConfigs就是对表头的重命名，如果删去的话，表头默认为数据中的名称） const featureTable = new FeatureTable({ view: view, laye 阅读全文

posted @ 2021-08-30 10:49 一往无前！阅读(217) 评论(0) 推荐(0) 编辑

使用ant的checkboxGroup将列表信息添加为多选框，并根据多选框的转换进行操作

摘要：使用的数据（放到script的data（）中） taskList: [], taskListOptions: [], taskItems: [], ops: { vuescroll: {}, scrollPanel: {}, rail: { keepShow: true }, bar: { hove 阅读全文

posted @ 2021-08-30 10:12 一往无前！阅读(2156) 评论(0) 推荐(0) 编辑

一往无前！

随笔分类 - 工具类