SuperMap iClient for Vue.js
supermap / vue-iclient Goto Github PK
View Code? Open in Web Editor NEWSuperMap iClient UI Components for Vue.js
Home Page: https://iclient.supermap.io/web/apis/vue/
License: Apache License 2.0
SuperMap iClient UI Components for Vue.js
Home Page: https://iclient.supermap.io/web/apis/vue/
License: Apache License 2.0
最近项目开发有用到vue-iclient这个库,但是有些功能没有,就想要自己实现一下,但是在克隆项目下来后发现了一些问题。
主要是因为npm版本过新的问题。首先说明一下我的node版本为15.10,npm版本为7.6.3。
问题应该出在npm上,因为在安装完依赖后,我尝试使用npm run dev -mapboxgl运行使用mapboxgl的示例代码,然后我发现了代码中process.env['npm_config_argv']并没有获取到相应的值,并且是个undefined,但是可以用process.env['npm_config_mapboxgl']来代替,希望能够注意一下。
下载最新版本,执行命令npm run dev后
打开浏览器,一片空白,报错:
webpack-internal:///./node_modules/webpack-dev-server/client/clients/SockJSClient.js:98 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
at Module.eval (webpack-internal:///./node_modules/webpack-dev-server/client/clients/SockJSClient.js:98)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/clients/SockJSClient.js:140)
at Module../node_modules/webpack-dev-server/client/clients/SockJSClient.js (app.js:14583)
at webpack_require (app.js:727)
at fn (app.js:101)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/socket.js:53)
at Object../node_modules/webpack-dev-server/client/socket.js (app.js:14619)
at webpack_require (app.js:727)
at fn (app.js:101)
at Object.eval (webpack-internal:///./node_modules/webpack-dev-server/client/index.js?http://localhost:8080:8)
版本"@supermap/vue-iclient-mapboxgl": "^11.0.0-beta"
使用情况
打断点发现echart是元素,不是echart
node版本14.19.1,@vue/cli 5.0.4
echartoption就是你们超图里面的例子
https://iclient.supermap.io/examples/component/editor.html#components_echarts_vue
文档目前好像还不太完整,希望加快完善
不支持Vue3???
vue2.0引入vue-iclient3d-webgl启动报错,我用的是现在的若依框架,在main.js引入vue-iclient3d-webgl后启动直接报错,报错信息如下:
ERROR Failed to compile with 1 error 下午5:20:21
error in ./node_modules/@supermap/vue-iclient3d-webgl/dist/styles/images/cur/draw.cur
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/@vue/cli-service/node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css 12:36-68
@ ./node_modules/@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.36.180:8099&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Vue 3.2和typescript怎么使用啊,@types/找不到对应类型
最近才接触到 GIS 的开发,请问该组件支持使用天地图“经纬度投影”类型的瓦片吗?我看示例中使用的是“球面墨卡托投影”。
The latest has removed OBJLoader2, so why don't this project change to OBJLoader?
ElementUI的message使用的是this.$message({}),超图里面用的是Ant-design,ant的message也是叫this.$message,这样的话会导致之前项目中用elmentUI的message方法全部都报错了,因为他俩的用法不太一样,建议优化一下。
超图的代码是在src/mapboxgl/index.ts中,大概59行:Vue.prototype.$message = message;
ElementUI的官方文档说明:
Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 Message。
如题
1、目前的demo页面充斥了太多东西,所有功能都往一个页面上堆,显然不利于新手学习。建议做多些页面,每个页面只介绍一个组件或一个功能的用法。
2、不建议一上来就对接超图在线地图,虽然开发人员可快速看到效果,不过从目前的demo看在线地图的配置和本地地图的配置不一样,不方便用户快速上手。
3、不建议通过mapID去区分在线和本地地图,通过options的参数控制更好些,这样开发人员只需要关注一个参数对象,不用去考虑额外的参数对象比如mapID等,把相关参数放在一起,而不是构建多个对象,分别用之,这样会加大用户的学习成本。
4、提供属性信息微件,便于用户查看或修改属性数据。
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-mapboxgl';
Vue.use(VueiClient);
我想在地图上动态加载图层,该如何操作呢?
axios .get(this.host + '/iserver/services/pipeComponent/restjsr/query/maps/zp.json') .then(response => { var rasteLayerOptions = { name: 'GD', opacity: 0.8, visible: true, tiles: [this.host + '/iserver/services/map-NWJG/rest/maps/PD_GD/zxyTileImage.png?z={z}&x={x}&y={y}'], mapUrl: this.host + '/iserver/services/map-NWJG/rest/maps/PD_GD' }; var lyr = new RasterTileLayerViewModel(map, rasteLayerOptions); // this.info = response.data; });
我尝试新建RasterTileLayerViewModel对象,不过没用。
当我npm安装好@supermap/vue-iclient-mapboxgl,其中main.js的代码如下
import './assets/main.css' import { createApp } from 'vue' import VueiClient from '@supermap/vue-iclient-mapboxgl'; import App from './App.vue' const app=creatApp(App) app.use(VueiClient) app.mount('#app')
运行时报错
X [ERROR] No loader is configured for ".vue" files: node_modules/@supermap/vue-iclient-mapboxgl/node_modules/vue-echarts/components/ECharts.vue
node_modules/@supermap/vue-iclient-mapboxgl/lib/time-range/index.js:205:25:
205 │ module.exports = require("vue-echarts");
╵ ~~~~~~~~~~~~~
X [ERROR] Could not resolve "merge-descriptors"
node_modules/vue-cesium/lib/utils/mergeDescriptors.js:13:29:
13 │ import mergeDescriptors from 'merge-descriptors';
╵ ~~~~~~~~~~~~~~~~~~~
You can mark the path "merge-descriptors" as external to exclude it from the bundle, which will
remove this error and leave the unresolved path in the bundle.
环境: vue-cli3生成模板 + @supermap/vue-iclient-mapboxgl + vue-cli-plugin-electron-builder
在本地测试以及打 web 包时不会出现问题,但在打 exe 包后程序运行时 deck.gl.min.js 文件报WebGLDebugUtils is not defined 的错误.
目前不知道是不是 electron 或 webpack 我配置有问题
我找了未压缩的 deck.gl.js 文件做测试,发现在 WebGLDebugUtils 赋值的前面加入: var WebGLDebugUtils 后报错消失. 位置约为 61129 行.
n /project/supermap/vue-iclient-master/src/mapboxgl/web-map/WebMap.vue.ts
[tsl] ERROR in /project/supermap/vue-iclient-master/src/mapboxgl/web-map/WebMap.vue.ts(357,12)
TS2339: Property '$message' does not exist on type 'SmWebMap'.
下载最新版本,执行命令npm run dev后控制台报错:
error in /project/supermap/vue-iclient-master/src/mapboxgl/web-map/WebMap.vue.ts
[tsl] ERROR in /project/supermap/vue-iclient-master/src/mapboxgl/web-map/WebMap.vue.ts(369,12)
TS2339: Property '$message' does not exist on type 'SmWebMap'.
error in /project/supermap/vue-iclient-master/src/mapboxgl/web-map/WebMap.vue.ts
[tsl] ERROR in /project/supermap/vue-iclient-master/src/mapboxgl/web-map/WebMap.vue.ts(369,32)
TS2339: Property '$t' does not exist on type 'SmWebMap'.
error in /project/supermap/vue-iclient-master/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayer.vue.ts
[tsl] ERROR in /project/supermap/vue-iclient-master/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayer.vue.ts(19,2)
TS2769: No overload matches this call.
加入"@supermap/iclient-leaflet": "^11.1.1",工程启动报错,错误如下图,包已经都下载了在node_modules里面存在:
98% after emitting CopyPlugin
ERROR Failed to compile with 2 errors
These relative modules were not found:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.