基于高德API实现网络geoJSON功能(突出省份)

news2024/11/30 0:36:04

代码实现:

       <script>
            // 3、初始化一个高德图层
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
            })
        });
        // 4、初始化openlayer地图
        const map = new ol.Map({
            //将初始化的地图设置到id为map的DOM元素上
            target:"map",
            //设置图层
            layers:[gaode],
            //设置视图
            view:new ol.View({
                center:[120.15,30.22],
                //设置地图的放大级别
                zoom:5,
                projection:"EPSG:4326"
            })
        })
        //试图跳转控件
        const ZoomToExtent = new ol.control.ZoomToExtent({
            extent:[110,30,160,30]
        })
        map.addControl(ZoomToExtent)
        //放大缩小控件
        const zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider)
        //全屏控件
        const fullScreen = new ol.control.FullScreen();
        map.addControl(fullScreen);

        //加载网络geojson数据
        const china_source = new ol.source.Vector({
            url:"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
            format:new ol.format.GeoJSON()
        })
        const china_layer =new ol.layer.Vector({
            source:china_source
        })
        const china_style = new ol.style.Style({
            fill:new ol.style.Fill({
                color:'rgba(50,50,0,0.4)'
            }),
            stroke:new ol.style.Stroke({
                color:"#ff2d5180",
                width:2
            })
        })
        china_layer.setStyle(china_style)
        map.addLayer(china_layer)
        //https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json
        const BJ_source = new ol.source.Vector({
            url:"https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json",
            format:new ol.format.GeoJSON()
        })
        const BJ_layer =new ol.layer.Vector({
            source:BJ_source
        })
        const BJ_style = new ol.style.Style({
            fill:new ol.style.Fill({
                color:'#333'
            }),
        })
        BJ_layer.setStyle(BJ_style)
        map.addLayer(BJ_layer)
        </script>

结果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1290797.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

git 面试字节时,老师问:合并分支中 rebase 和 merge 的区别

实际开发工作的时候&#xff0c;我们都是在自己的分支开发&#xff0c;然后将自己的分合并到主分支&#xff0c;那合并分支用2种操作&#xff0c;这2种操作有什么区别呢&#xff1f; git上新建一个项目&#xff0c;默认是有master分支的&#xff0c;将项目克隆到本地&#xff…

C/C++,数值计算——快速幂(Quick Pow)的几种算法源代码

1 文本格式 // C Version long long binpow(long long a, long long b) { if (b 0) return 1; long long res binpow(a, b / 2); if (b % 2) return res * res * a; else return res * res; } // C Version long long binpow(long long a,…

Nginx的安装、升级和管理

目录 一. nginx介绍 1. nginx简介 2. nginx和apache区别 二. nginx编译安装 1. 下载解压nginx安装包&#xff0c;并安装nginx依赖包 2. 创建运行用户和组 3. 编译安装并补全 4. 效验结果 三. 平滑升级nginx 1. 下载解压nginx安装包 2. 编译安装 3. 替换二进制文件 …

uniapp使用v-html调用接口,富文本图片 视频自适应大小

前端获取到后台数据 不做处理 就会出现下面问题 图片 视频超出视图显示不全 处理 //info 是富文本 <view v-ifinfo v-htmlreplaceWhite(info)></view>调用下面方法 replaceWhite(html) { // 处理富文本默认图片&#xff0c;视频大小let newContent html.replace…

EPICS modbus 模块数字量读写练习

本文使用modbus slave软件模拟一个受控的modbus设备&#xff0c;此模拟设备提供如下功能&#xff1a; 1、线圈1&#xff0c;起始地址为0&#xff0c;数量为8&#xff0c;软件设置如下(功能码1)&#xff1a; 2、线圈2&#xff0c;起始地址为8&#xff0c;数量为8&#xff0c;软…

easyui实现省市县三级联动

一、技术: 前端采用的是easyui+jquery+jsp页面 后端采用springmvc+mybatis+mysql8 效果图 二、cascadeEasyui.jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContex…

Stable Diffusion 系列教程 - 2 WebUI 参数详解

Stable Diffusion 的整个算法组合为&#xff1a; UNet VAE 文本编码器 UNet&#xff1a;就是我们大模型里的核心。 文本编码器&#xff1a;将我们的prompt进行encoder为算法能理解的内容&#xff08;可以理解为SD外包出去的项目CLIP&#xff09;。 VAE&#xff1a;对UNet生…

现货白银简单介绍

在贵金属投资领域&#xff0c;现货白银是当前国际上最为流行、交投最为活跃的白银投资方式&#xff0c;其交易市场遍布全球&#xff0c;包括伦敦、苏黎世、纽约、芝加哥及香港等主要市场&#xff0c;是一种以杠杆交易和做市商的形式进行的现货交易。 现货白银可以说是当下交易模…

ELK的日志解决方案

ELK的日志解决方案 ELK是什么 ELK 是一个缩写&#xff0c;代表 Elastic Stack&#xff0c;而不是三个独立的产品名称。Elastic Stack 是一个开源的数据处理和分析平台&#xff0c;用于实时搜索、分析和可视化大规模数据。ELK 是由三个主要的组件构成&#xff1a; Elasticsea…

分享一个基础面试题---手写call

分享一个基础面试题---手写call 手写call笔记第一步第二步第三步 手写call笔记 call()&#xff1a;在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。 let foo {value:1 }; function bar(){console.log(this.value); } bar.call(foo);//1注意两点&…

Vue2与Vue3的语法对比

Vue2与Vue3的语法对比 Vue.js是一款流行的JavaScript框架&#xff0c;通过它可以更加轻松地构建Web用户界面。随着Vue.js的不断发展&#xff0c;Vue2的语法已经在很多应用中得到了广泛应用。而Vue3于2020年正式发布&#xff0c;带来了许多新的特性和改进&#xff0c;同时也带来…

unity 2d 入门 飞翔小鸟 飞翔脚本(五)

新建c#脚本 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Fly : MonoBehaviour {//获取小鸟&#xff08;刚体&#xff09;private Rigidbody2D bird;//速度public float speed;// Start is called before the first frame up…

浅谈web性能测试

什么是性能测试&#xff1f; web性能应该注意些什么&#xff1f; 性能测试&#xff0c;简而言之就是模仿用户对一个系统进行大批量的操作&#xff0c;得出系统各项性能指标和性能瓶颈&#xff0c;并从中发现存在的问题&#xff0c;通过多方协助调优的过程。而web端的性能测试…

【华为数据之道学习笔记】2-建立企业级数据综合治理体系

数据作为一种新的生产要素&#xff0c;在企业构筑竞争优势的过程中起着重要作用&#xff0c;企业应将数据作为一种战略资产进行管理。数据从业务中产生&#xff0c;在IT系统中承载&#xff0c;要对数据进行有效治理&#xff0c;需要业务充分参与&#xff0c;IT系统确保遵从&…

若依项目前后端部署记录

前言 本文较乱&#xff0c;用于笔者记录项目部署过程&#xff0c;对于想学习若依项目部署的同学看文章可能会导致误导&#xff0c;建议读者多查资料&#xff0c;保持疑问并谨慎验证。 项目官方指导&#xff1a; 环境部署 | RuoYi 1、环境部署相关 JDK > 1.8 (推荐1.8版本…

TIMO后台管理系统 Shiro 反序列化漏洞复现

0x01 产品简介 TIMO 后台管理系统,基于SpringBoot2.0 + Spring Data Jpa + Thymeleaf + Shiro 开发的后台管理系统,采用分模块的方式便于开发和维护,支持前后台模块分别部署,目前支持的功能有:权限管理、部门管理、字典管理、日志记录、文件上传、代码生成等,为快速开发后…

记录 | vscode pyhton c++调试launch.json配置

下面提供 vscode 中 python 和 c 调试配置的 launch.json (好用&#xff0c;已用好几年&#xff0c;建议收藏) {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: https://go.microsoft.com/fwlink/?linkid830387&qu…

多人聊天UDP

服务端 package 多人聊天;import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStream; import java.io.PrintStream; import java.net.ServerSocket; import java.net.Socket; import java.util.ArrayList;…

神经网络 模型表示(一)

神经网络 模型表示 模型表示一 为了构建神经网络模型&#xff0c;我们需要首先思考大脑中的神经网络是怎样的&#xff1f;每一个神经元都可以被认为是一个处理单元/神经核&#xff08;processing unit/Nucleus&#xff09;&#xff0c;它含有许多输入/树突&#xff08;input/…